Flutter 轻松构建加载更多(loading more)

在Flutter中，你可以使用ListView.builder来构建一个可以加载更多数据的列表。这里是一个简单的示例：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  final List<String> items = List.generate(20, (i) => 'Item ${i + 1}');
  final ScrollController _scrollController = ScrollController();
  int _itemCount = 20; // 初始项目数量
  bool _isLoading = false; // 是否正在加载更多
 
  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }
 
  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener);
    _scrollController.dispose();
    super.dispose();
  }
 
  void _scrollListener() {
    if (_isLoading) return;
 
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      setState(() {
        _isLoading = true;
      });
 
      // 模拟加载更多数据
      Future.delayed(Duration(seconds: 2), () {
        setState(() {
          _itemCount += 10;
          _isLoading = false;
        });
      });
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('加载更多示例'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _itemCount,
        itemBuilder: (context, index) {
          if (index >= items.length) {
            return _isLoading
                ? Center(child: CircularProgressIndicator())
                : Text('没有更多数据');
          }
          return ListTile(title: Text(items[index]));
        },
      ),
    );
  }
}

这个例子中，我们创建了一个ListView，使用ListView.builder来高效构建列表项。我们还使用了一个ScrollController来监听滚动事件，并在用户接近列表底部时加载更多数据。数据加载时显示一个圆形进度指示器，数据加载完毕后，圆形进度指示器会被一条消息替换，告知用户是否还有更多数据。这个例子提供了一个简单的框架，你可以在其中添加自己的加载数据逻辑。