flutter如何实现下拉刷新和上拉加载更多

在Flutter中，可以通过以下方式实现下拉刷新和上拉加载更多：

1. 下拉刷新 - 使用 RefreshIndicator

RefreshIndicator(
  onRefresh: () async {
    // 执行刷新逻辑
    await fetchData(); // 你的数据获取方法
    setState(() {}); // 更新UI
  },
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text(items[index]),
      );
    },
  ),
)

2. 上拉加载更多 - 使用 ListView 的控制器

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  final ScrollController _scrollController = ScrollController();
  List<String> items = [];
  bool isLoading = false;
  int currentPage = 1;

  @override
  void initState() {
    super.initState();
    _loadInitialData();
    _scrollController.addListener(_scrollListener);
  }

  void _scrollListener() {
    if (_scrollController.position.pixels == 
        _scrollController.position.maxScrollExtent && 
        !isLoading) {
      _loadMoreData();
    }
  }

  Future<void> _loadInitialData() async {
    // 加载初始数据
    setState(() {
      items = List.generate(20, (index) => 'Item ${index + 1}');
    });
  }

  Future<void> _loadMoreData() async {
    if (isLoading) return;
    
    setState(() {
      isLoading = true;
    });

    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 2));
    
    setState(() {
      int startIndex = items.length;
      items.addAll(List.generate(10, (index) => 'Item ${startIndex + index + 1}'));
      isLoading = false;
      currentPage++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      controller: _scrollController,
      itemCount: items.length + (isLoading ? 1 : 0),
      itemBuilder: (context, index) {
        if (index == items.length) {
          return Center(
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: CircularProgressIndicator(),
            ),
          );
        }
        return ListTile(
          title: Text(items[index]),
        );
      },
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

3. 完整示例（结合下拉刷新和上拉加载）

RefreshIndicator(
  onRefresh: () async {
    // 重置数据并重新加载
    setState(() {
      currentPage = 1;
    });
    await _loadInitialData();
  },
  child: ListView.builder(
    controller: _scrollController,
    itemCount: items.length + (isLoading ? 1 : 0),
    itemBuilder: (context, index) {
      if (index == items.length) {
        return Center(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: CircularProgressIndicator(),
          ),
        );
      }
      return ListTile(
        title: Text(items[index]),
      );
    },
  ),
)

关键要点：

• RefreshIndicator：内置的下拉刷新组件
• ScrollController：监听滚动位置实现加载更多
• isLoading 状态：防止重复请求
• ListView.builder：优化长列表性能

这种方法适用于大多数列表场景，可以根据实际需求调整加载逻辑和UI显示。