flutter 触底加载

在 Flutter 中实现触底加载的功能可以通过使用 ListView 或 GridView 来实现。下面是一个简单的示例代码：

import 'package:flutter/material.dart';

class ScrollLoadDemo extends StatefulWidget {
  @override
  _ScrollLoadDemoState createState() => _ScrollLoadDemoState();
}

class _ScrollLoadDemoState extends State<ScrollLoadDemo> {
  List<String> items = List.generate(20, (index) => 'Item $index');

  ScrollController _scrollController = ScrollController();
  bool isLoading = false;

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

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

  void _scrollListener() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      setState(() {
        isLoading = true;
      });
      // 模拟加载更多数据
      Future.delayed(Duration(seconds: 2), () {
        setState(() {
          items.addAll(List.generate(10, (index) => 'Item ${items.length + index}'));
          isLoading = false;
        });
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Load Demo'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: items.length + 1,
        itemBuilder: (context, index) {
          if (index == items.length) {
            return Container(
              padding: EdgeInsets.symmetric(vertical: 16.0),
              alignment: Alignment.center,
              child: isLoading ? CircularProgressIndicator() : null,
            );
          }
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: ScrollLoadDemo(),
  ));
}

在上面的示例中，我们使用一个 ListView.builder 来展示数据，并通过 ScrollController 监听滚动事件。当滚动到底部时，会触发加载更多数据的逻辑。isLoading 用于控制是否显示加载中的指示器。

你可以根据自己的需求修改代码，并在 itemBuilder 中替换为自己的布局和数据。希望对你有帮助！如果还有其他问题，请继续提问。