在 Flutter 中构建列表项时如何更新 ListView.builder 的 itemCount？

Posted 2023-02-23

【中文标题】在 Flutter 中构建列表项时如何更新 ListView.builder 的 itemCount？

【英文标题】：How to update `itemCount` of `ListView.builder` while building the list items in Flutter?

【发布时间】：2022-01-20 02:47:19

【问题描述】：

我有一个ListView.builder，它正在从项目列表_cache 中构建项目。当我滚动到_cache 列表的末尾时，会调用一个函数来通过从其他地方提取更多数据来扩展_cache。但是，该数据是有限的，最终我用完了扩展_cache 的项目。所以我希望ListView.builder 停止在那里建造物品。

我知道ListView.builder 有一个名为itemsCount 的属性，但我不知道只有在我用完要添加到_cache 的项目时才能添加该属性。如何实现我想要的？

【问题讨论】：

请添加您的代码块。

【参考方案1】：

当您滚动到列表项的末尾时，您可以使用ScrollController 加载更多数据。

这是我在应用程序中完成的简单示例。

class OtherUserListScreen extends StatefulWidget 
  const OtherUserListScreen(Key? key) : super(key: key);

  @override
  State<OtherUserListScreen> createState() => _OtherUserListScreenState();


class _OtherUserListScreenState extends State<OtherUserListScreen> 

// create a _scrollController variable

  late ScrollController _scrollController;

  @override
  void initState() 
    super.initState();

    _scrollController = ScrollController();
    _scrollController.addListener(_handleScroll);

   
  

  @override
  Widget build(BuildContext context) 
    final _usersProvider = Provider.of<UsersProvider>(context);
    return Scaffold(
      
      body: ListView.builder(
        itemBuilder: (context, index) 
          if (index == _usersProvider.users.length) 
            return MoreLoadingIndicator(
              isMoreLoading: _usersProvider.isMoreLoading,
            );
          

          final user = _usersProvider.users[index];

          return FadeIn(
            duration: const Duration(milliseconds: 400),
            delay: Duration(milliseconds: index * 100),
            child: GestureDetector(
              onTap: () 
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => PatientDetailScreen(
                      patientType: PatientType.OTHER,
                      user: user,
                    ),
                  ),
                );
              ,
              child: RecordUserDescription(
                user: user,
                showToolkit: false,
                margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),
              ),
            ),
          );
        ,
        itemCount: _usersProvider.users.length,
      ),
    );
  

  _handleScroll() async 
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) 
      await context.read<UsersProvider>().loadMoreUsers(
            context,
            accountID: context.read<UserProvider>().user!.accountId!,
          );
    
    return;
  

【讨论】：

感谢您的回答。请问您为什么选择使用ScrollController？如果我只是在ListView.builder 方法中调用loadMoreUsers()，当index == _usersProvider.users.length - 1（即当您到达列表中的最后一项时），会不会一样？

ScrollController 跟踪您的屏幕滚动行为。当您想在到达项目列表末尾时加载更多数据时，最好的可行解决方案是使用scrollcontroller。