在Flutter应用中的ListView.builder中添加滚动功能

Question

我正在尝试让列表视图可滚动，当我搜索时，没有找到易于理解和简单的解决方案，我尝试制作自定义滚动条（从链接示例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(),
                );

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

以下是模拟器的屏幕截图（请注意，手机上也是一样的）： 请帮我提供可滚动列表视图的指针或示例代码。

- SOAMad

---

你只是想制作一个可以向右滚动的列表吗？ - undefined

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

如果你想要一个简单可滚动的列表，只需使用ListView.builder即可 - 你不需要其他任何东西。点击这里查看示例。 - undefined

Answer 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小部件。

- Siavash

Answer 2

你正在将一个ListView包裹在SliverList中，如果它们具有相同的滚动方向，这不是一个好主意。你可以选择使用Column和List.generate()生成器（效率低下），或者去掉其中一个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(),
            ),
          );
        }
      },
    ),
  ],
);

如果这段代码片段无效，请将StreamBuilder与CustomScrollView互换。

- leodriesch

---

你对于带有CustomScrollView的StreamBuilder是什么意思？ - undefined

将CustomScrollView放置在StreamBuilder的build函数中。但是仅当以这种方式无法工作时才这样做！ - undefined

Answer 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
}

- Hussam