时间戳

首页 > 解决方案 > 在 Flutter 应用程序的 ListView.builder 中添加滚动

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

问题描述

我正在尝试使列表视图能够滚动，当我用谷歌搜索并且找不到可理解且简单的解决方案时，我尝试制作自定义滚动（来自链接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(),
                );

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

下面是模拟器的截图（Kindly node，手机上也一样）： 在此处输入图像描述

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

标签： androidfirebasefluttergoogle-cloud-firestore

解决方案

您不需要使用 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 小部件。

推荐阅读