在 Flutter 应用程序的 ListView.builder 中添加滚动

Posted 2023-02-23

【中文标题】在 Flutter 应用程序的 ListView.builder 中添加滚动

【英文标题】：Add Scrolling in the ListView.builder in Flutter application

【发布时间】：2019-06-05 14:37:57

【问题描述】：

我正在尝试使列表视图能够滚动，当我搜索并找不到可理解且简单的解决方案时，我尝试制作自定义滚动（来自链接 https://docs.flutter.io/flutter/widgets/ListView-class.html 的示例），目前它不起作用.

代码如下：

CustomScrollView(
  shrinkWrap: true,
  slivers: <Widget>[
    SliverPadding(
      padding: const EdgeInsets.all(20.0),
      sliver: SliverList(
        delegate: SliverChildListDelegate(
          <Widget>[
            StreamBuilder(
            stream: Firestore.instance.collection("Items").snapshots(),
            builder: (BuildContext context, AsyncSnapshot snapshot) 
              if (snapshot.hasData) 
                return new ListView.builder(
                  padding: const EdgeInsets.only(top: 5.0),
                  scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: snapshot.data.documents.length,

                    itemBuilder: (BuildContext context,int index) 
                      DocumentSnapshot ds = snapshot.data.documents[index];
                      return new Row(

                        textDirection: TextDirection.ltr,
                        children: <Widget>[
                          Expanded(child: Text(ds["item1"])),
                          Expanded(child: Text(ds["item2"])),
                          Expanded(child: Text(ds["price"].toString())),
                        ],
                      );
                    );
              
              else 
                return Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: CircularProgressIndicator(),
                );

              
            ,
          )
          ],
        ),
      ),
    ),
  ],
)

下面是模拟器的截图（请节点，手机上也一样）：

请帮助我提供可滚动列表视图的指针或示例代码。

【问题讨论】：

您只是想创建一个可以向右滚动的列表吗？

是的，我也必须使用 ListView builder 构造函数

如果你想要简单的可滚动列表，只需使用ListView.builder - 你不需要其他任何东西，例如查看here

【参考方案1】：

您不需要使用 CustomScrollView。 ListView 本身就是一个滚动小部件。所以你只需要在你的 StreamBuilder 中创建它。

@override
Widget build(BuildContext context) 
  return StreamBuilder<List<int>>(
    stream: posts,
    builder: (BuildContext context, AsyncSnapshot<List<int>> snapshot) 
      if (snapshot.hasError) 
        return Text('Error: $snapshot.error');
      
       switch (snapshot.connectionState) 
        case ConnectionState.waiting:
          return const Text('Loading...');
        default:
          if (snapshot.data.isEmpty) 
            return const NoContent();
          
          return _itemList(snapshot.data);
      
    ,
  );

CustomScrollView 用于在其中添加 Sliver 小部件。

【参考方案2】：

您将ListView 包装在SliverList 中，如果它们具有相同的滚动方向，这绝不是一个好主意。您可以使用List.generate() 生成器（效率低下）执行Column，或者摆脱ListView 之一：

CustomScrollView(
  shrinkWrap: true,
  slivers: <Widget>[
    StreamBuilder(
      stream: Firestore.instance.collection("Items").snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) 
        if (snapshot.hasData) 
          return SliverPadding(
            padding: const EdgeInsets.all(20.0),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) 
                  DocumentSnapshot ds = snapshot.data.documents[index];
                  return new Row(
                    textDirection: TextDirection.ltr,
                    children: <Widget>[
                      Expanded(child: Text(ds["item1"])),
                      Expanded(child: Text(ds["item2"])),
                      Expanded(child: Text(ds["price"].toString())),
                    ],
                  );
                ,
                childCount: snapshot.data.documents.length,
              ),
            ),
          );
         else 
          return SliverFillRemaining(
            child: Center(
              child: CircularProgressIndicator(),
            ),
          );
        
      ,
    ),
  ],
);

如果此代码 sn-p 不起作用，请将 StreamBuilder 替换为 CustomScrollView

【讨论】：

带有 CustomScrollView 的 StreamBuilder 是什么意思

将customscrollview 放在streambuilder 的构建函数中。但只有当它不能以这种方式工作时才这样做！

【参考方案3】：

ListView 本身是一个可滚动的列表，因此您只需使用自定义图块创建它。这是我的待办事项列表应用程序中的代码，用于创建我的待办事项列表。 好吧，当我必须创建一个列表时，我会调用这个函数。

/*Called each time the widget is built.
* This function creates the list with all items in '_todoList'
* */
Widget _buildTodoList() 
  return new ListView.builder(
    // itemBuilder will be automatically be called as many times as it takes for the
    // list to fill up its available space, which is most likely more than the
    // number of to do items we have. So, we need to check the index is OK.
    itemBuilder: (context, index) 
      if (index < _todoList.length) 
        return _buildTodoItem(_todoList[index],index);
      
    ,
  );

现在这个函数调用一个_buildTodoItem 函数来创建一个自定义列表图块。

 /*Build a single List Tile*/
Widget _buildTodoItem(TodoItem todoItem,int index) 
  //return a custom build single tile for your list