如何在一页上呈现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

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

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),
                    ),
                  ),
                );
              }),
           )
        ],
      ),
    );

Answer 2

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

输出：

Answer 3

我找到了使用条子可以解决的方法

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),
                        ),
                      ),
                    );
                  }),
            ),
          ],
        ));