ListView 不会在 Flutter 中滚动

Question

我尝试创建一个可滚动的 ListView，但由于某些原因它不起作用。

我的目标：创建一个连接到 Firebase 的 ListView。 我的 ListView 收集了很好的数据，但 scoll 是不可能的。

我的脚手架的主体：

body: const SingleChildScrollView(
  child: RecipesInformations(),
),

我的小部件：

@override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _recipesStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return const Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Text("Chargement recettes");
        }

        return ListView(
          shrinkWrap: true,
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data =
                document.data()! as Map<String, dynamic>;
            List tags = List.from(document["tags"]);

            return Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: const Color(0xFF011200)),
                    borderRadius: const BorderRadius.all(Radius.circular(8))),
                margin: const EdgeInsets.only(
                    bottom: 32, left: 16, right: 16, top: 8),
                padding: const EdgeInsets.all(32),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          data["title"],
                          overflow: TextOverflow.fade,
                          maxLines: 1,
                          softWrap: false,
                          style: Theme.of(context).textTheme.headline1,
                        )
                      ],
                    ),
                  ],
                ));
          }).toList(),
        );
      },
    );
  }

如果您需要更多信息，请告诉我。

Answer 1

删除SingleChildScrollView可能会有所帮助。

Answer 2

在您的ListView构造函数中，设置primary: false因为您将它嵌套在一个 `SingleChildScrollView.

Answer 3

使用ListView.builder来简化事情并删除不必要的嵌套滚动视图。 像这样的东西可以工作：

body: RecipesInformations(),

Widget build(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: _recipesStream,
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
...
      return ListView.builder(
        itemCount: snapshot.data!.docs.length,
        itemBuilder: (context, index) {
          final document = snapshot.data!.docs[index];
          return Container(
            ...
          );
        },
      ) 
...

Answer 4

您需要使用FutureBuilder而不是StreamBuilder 。

从 docs 来看， StreamBuilder是一个Widget，它基于与 Stream 交互的最新快照构建自身。 因此，只有最后一项会显示在屏幕上。

相反，使用toList()方法将流转换为 List 并在FutureBuilder.future属性上使用它，如下所示：

    ...

    return FutureBuilder<List<QuerySnapshot>>(
      future: _recipesStream.toList(),
      builder: (BuildContext context, snapshot) {

    ...

snapshot.data现在是QuerySnapshot的List 。 所以，迭代它会有点不同：

      ...

      return ListView(
        shrinkWrap: true,
        children: snapshot.data!.map((query) {
          Map<String, dynamic> data = query.docs.first;

      ...

结果将是这样的：