在Flutter应用程序的ListView.builder中添加滚动 [英] Add Scrolling in the ListView.builder in Flutter application

问题描述

我试图使列表视图滚动成为可能，当我用Google搜索但找不到可理解和简单的解决方案时，我试图进行自定义滚动(例如，链接

I am trying to make a List view scroll able, when I googled and could not found an understandable and simple solution, I tried to make a custom scroll (example from link https://docs.flutter.io/flutter/widgets/ListView-class.html), at the moment it is not working.

这是代码:

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(),
                );

              }
            },
          )
          ],
        ),
      ),
    ),
  ],
)

下面是模拟器的屏幕截图(亲切的节点，在手机上相同):

Below is the screenshot from emulator (Kindly node, same on the phone):

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

Kindly help me with pointers or sample code for scroll-able list view.

推荐答案

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

ListView itself is a scroll able list so you just create it with your custom tiles. Here is the code from my to-do list app that I used to create a list of my to-do items. Well I call this function when I have to create a list.

/*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函数，该函数创建单个自定义列表图块.

Now this function calls a _buildTodoItem function which creates a single custom list tile.

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

这篇关于在Flutter应用程序的ListView.builder中添加滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！