Flutter 项目实战 下拉刷新、上拉加载 九

在Flutter中，下拉刷新和上拉加载更多通常使用RefreshIndicator和ListView配合使用。以下是一个简单的示例，展示了如何实现下拉刷新和上拉加载更多的功能。

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> {
  List<String> items = List.generate(20, (i) => "Item ${i + 1}");
  final ScrollController _scrollController = ScrollController();
 
  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
        setState(() {
          items.addAll(List.generate(20, (i) => "Item ${i + 21}"));
        });
      }
    });
  }
 
  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
 
  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items = List.generate(20, (i) => "Item ${i + 1}").toList();
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('下拉刷新和上拉加载'),
      ),
      body: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView.builder(
          controller: _scrollController,
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

这段代码实现了以下功能：

1. 使用RefreshIndicator来实现下拉刷新功能。
2. 使用ScrollController来监听列表滚动，当用户滚动到列表底部时，触发加载更多数据。
3. 数据加载使用Future.delayed模拟异步操作，实际应用中应替换为从服务器获取数据。

这个简单的例子展示了如何在Flutter中实现下拉刷新和上拉加载的基本逻辑。