Flutter 如何在一个页面上呈现ListView.builder和GridView.builder

我想在一个页面上呈现ListView.builder和GridView.builder我尝试了这段代码，但仍然有效 渲染这两个构建器的难度都将显示垂直列表和可滚动列表

Scaffold(
      appBar: AppBar(title: Text("Title")),
      body: Column(
        children: <Widget>[
          ListView.builder(
            primary: false,
            shrinkWrap: true,
            itemBuilder: (context, position) {
              return ListTile(
                title: Text(choices[position]),
              );
            },
            itemCount: choices.length,
          ),
          GridView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: (3 / 2),
              ),
              itemCount: personas.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: Card(
                    child: Center(
                      child: Text(personas[index]?.fullName),
                    ),
                  ),
                );
              }),
        ],
      ),
    );

脚手架(
appBar:appBar（标题：文本（“标题”）），
正文：专栏(
儿童：[
ListView.builder(
主要：错误，
收缩膜：对，
itemBuilder：（上下文、位置）{
返回列表块(
标题：文本（选择[位置]），
);
},
itemCount:choices.length，
),
GridView.builder(
物理：物理（），
收缩膜：对，
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：2，
儿童方面：（3/2），
),
itemCount:personas.length，
itemBuilder:（构建上下文，int索引）{
返回容器(
孩子：卡片(
儿童：中心(
子：文本（人物角色[索引]？.fullName），
),
),
);
}),
],
),
);

将它们包装在容器中，并给它们适当的高度或宽度

Scaffold(
      appBar: AppBar(title: Text("Title")),
      body: Column(
        children: <Widget>[
         Container(
          height:200,
           child: ListView.builder(
            primary: false,
            shrinkWrap: true,
            itemBuilder: (context, position) {
              return ListTile(
                title: Text(choices[position]),
              );
            },
            itemCount: choices.length,
          ),
        ),
         Container(
          height:200,
            child: GridView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: (3 / 2),
              ),
              itemCount: personas.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: Card(
                    child: Center(
                      child: Text(personas[index]?.fullName),
                    ),
                  ),
                );
              }),
           )
        ],
      ),
    );

脚手架(
appBar:appBar（标题：文本（“标题”）），
正文：专栏(
儿童：[
容器(
身高：200，
子项：ListView.builder(
主要：错误，
收缩膜：对，
itemBuilder：（上下文、位置）{
返回列表块(
标题：文本（选择[位置]），
);
},
itemCount:choices.length，
),
),
容器(
身高：200，
子项：GridView.builder(
物理：物理（），
收缩膜：对，
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：2，
儿童方面：（3/2），
),
itemCount:personas.length，
itemBuilder:（构建上下文，int索引）{
返回容器(
孩子：卡片(
儿童：中心(
子：文本（人物角色[索引]？.fullName），
),
),
);
}),
)
],
),
);

我找到了一种解决方法，可以用棉条来解决这个问题

Scaffold(
        appBar: AppBar(title: Text(appBarTitle)),
        body: CustomScrollView(
          slivers: <Widget>[
            SliverList(
              delegate: SliverChildBuilderDelegate((context, index) {
                return ListTile(
                  title: Text(title(choices[index])),
                  selected: isSame(choices[index], selected),
                  onTap: () {
                    onSelected(choices[index]);
                  },
                );
              }, childCount: choices.length),
            ),
            SliverToBoxAdapter(
              child: GridView.builder(
                  physics: ScrollPhysics(),
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    childAspectRatio: (3 / 2),
                  ),
                  itemCount: personas?.length ?? 0,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      child: Card(
                        child: Center(
                          child: Text(personas[index]?.fullName),
                        ),
                      ),
                    );
                  }),
            ),
          ],
        ));

脚手架(
appBar:appBar（标题：文本（appBarTitle）），
正文：自定义滚动视图(
条子：[
银表(
委托：SliverChildBuilderDelegate（（上下文，索引）{
返回列表块(
标题：文本（标题（选项[索引]），
选中：ISNAME（选项[索引]，选中），
onTap:（）{
onSelected（选项[索引]）；
},
);
}，childCount:choices.length），
),
滑动双轴适配器(
子项：GridView.builder(
物理：物理（），
收缩膜：对，
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：2，
儿童方面：（3/2），
),
itemCount:personas？长度为0，
itemBuilder:（构建上下文，int索引）{
返回容器(
孩子：卡片(
儿童：中心(
子：文本（人物角色[索引]？.fullName），
),
),
);
}),
),
],
));

使用

SingleChildScrollView

包装

列

，这将解决渲染问题。加

physics:ScrollPhysics（）

，这将允许

ListView

和

GridView

垂直滚动

Scaffold(
      appBar: AppBar(title: Text("Title")),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            ListView.builder(
              shrinkWrap: true,
              physics: ScrollPhysics(),
              itemBuilder: (context, position) {
                return ListTile(
                  title: Text('List Item'),
                );
              },
              itemCount: 20,
            ),
            GridView.builder(
                physics: ScrollPhysics(),
                shrinkWrap: true,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  childAspectRatio: (3 / 2),
                ),
                itemCount: 15,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    child: Card(
                      child: Center(
                        child: Text('Grid Item'),
                      ),
                    ),
                  );
                }),
          ],
        ),
      ),
    );

脚手架(
appBar:appBar（标题：文本（“标题”）），
正文：SingleChildScrollView(
子：列(
儿童：[
ListView.builder(
收缩膜：对，
物理：物理（），
itemBuilder：（上下文、位置）{
返回列表块(
标题：文本（“列表项”），
);
},
物品计数：20，
),
GridView.builder(
物理：物理（），
收缩膜：对，
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：2，
儿童方面：（3/2），
),
物品计数：15，
itemBuilder:（构建上下文，int索引）{
返回容器(
孩子：卡片(
儿童：中心(
子项：文本（“网格项”），
),
),
);
}),
],
),
),
);

输出：

---

如何设置动态高度因为我的物品会一天比一天增加，所以无法设置动态高度。您可以通过将初始高度乘以物品数量来计算高度。或者，您可以显示您正试图执行的操作的屏幕截图吗？我可以展示一个动态的替代解决方案。