listView赢得了滚动中的滚动

Question

我尝试创建一个可滚动的ListView，但由于各种原因，它无法正常工作。

我的目标是：创建一个连接到Firebase的列表视图。我的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.builder.builder 简化事物并删除未经必要的嵌套scrolllviews 。这样的事情可以起作用：

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 3

您需要使用 futorbuilder 代替 streambuilder 。

， cream> streambuilder 是一个基于与流的交互的最新快照。

取而代之的是，将流转换为 tolist（tolist（）） 方法并在 futurebuilder.future.future.future so：

    ...

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

    ...

snapshot.data 现在是 list> list QUERYSNAPSHOT 。因此，它将与迭代上的迭代有所不同：

      ...

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

      ...

结果将是这样的东西：

Answer 4

在您 listView 构造函数中，set primary：false ，因为您将其嵌套在 singlechildscrollview 中。