flutter - 如何在一页上呈现ListView.builder和GridView.builder

Question

我想在一页上撕裂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),
                    ),
                  ),
                );
              }),
        ],
      ),
    );

Answer 1

用Column包裹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'),
                      ),
                    ),
                  );
                }),
          ],
        ),
      ),
    );

输出: