Flutter- Gridview inside listview 问题

Question

我想在 gridview 中显示 Carousel 滑块和列表视图，并想滚动整个页面，我可以滚动父列表视图，但是当我向下滚动时无法滚动。

代码：

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("Home"),
    centerTitle: true,
  ),
  body: ListView(
    shrinkWrap: true,
    children: <Widget>[
      Column(
        children: <Widget>[
          new SizedBox(height: 20.0),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 10.0),
            child: CarouselSlider(
              options: CarouselOptions(height: 230.0),
              items: [1, 2, 3, 4, 5].map((i) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      margin: EdgeInsets.symmetric(horizontal: 5.0),
                      child: Card(
                        elevation: 2.0,
                        child: Image(
                          image:
                              AssetImage('assets/images/onboarding1.png'),
                        ),
                      ),
                    );
                  },
                );
              }).toList(),
            ),
          ),
          new SizedBox(height: 20.0),
          new ListView.builder(
            shrinkWrap: true,
            itemCount: 5,
            itemBuilder: (context, index) {
              return new Column(
                children: <Widget>[
                  new Container(
                    height: 50.0,
                    color: Colors.green,
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Icon(Icons.format_list_numbered,
                            color: Colors.white),
                        new Padding(
                            padding: const EdgeInsets.only(right: 5.0)),
                        new Text(index.toString(),
                            style: new TextStyle(
                                fontSize: 20.0, color: Colors.white)),
                      ],
                    ),
                  ),
                  Container(
                    child: GridView.count(
                      crossAxisCount: 3,
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      physics: NeverScrollableScrollPhysics(),
                      childAspectRatio: 1.2,
                      children: List.generate(
                        8,
                        (index) {
                          return Container(
                            child: Card(
                              color: Colors.blue,
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  new SizedBox(height: 20.0),
                ],
              );
            },
          ),
        ],
      ),
    ],
  ),
);
}

Answer 1

为 ListView.builder() 和 GridView.count()

添加 physics: PageScrollPhysics(),

代码：

ListView(
      shrinkWrap: true,
      children: <Widget>[
        Column(
          children: <Widget>[
            new SizedBox(height: 20.0),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: CarouselSlider(
                options: CarouselOptions(height: 230.0),
                items: [1, 2, 3, 4, 5].map((i) {
                  return Builder(
                    builder: (BuildContext context) {
                      return Container(
                        width: MediaQuery.of(context).size.width,
                        margin: EdgeInsets.symmetric(horizontal: 5.0),
                        child: Card(
                          elevation: 2.0,
                          child: Image(
                            image: AssetImage('assets/images/onboarding1.png'),
                          ),
                        ),
                      );
                    },
                  );
                }).toList(),
              ),
            ),
            new SizedBox(height: 20.0),
            new ListView.builder(
              shrinkWrap: true,
              itemCount: 5,
              physics: PageScrollPhysics(),
              itemBuilder: (context, index) {
                return new Column(
                  children: <Widget>[
                    new Container(
                      height: 50.0,
                      color: Colors.green,
                      child: new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          new Icon(Icons.format_list_numbered,
                              color: Colors.white),
                          new Padding(
                              padding: const EdgeInsets.only(right: 5.0)),
                          new Text(index.toString(),
                              style: new TextStyle(
                                  fontSize: 20.0, color: Colors.white)),
                        ],
                      ),
                    ),
                    Container(
                      child: GridView.count(
                        crossAxisCount: 3,
                        shrinkWrap: true,
                        physics: PageScrollPhysics(),
                        childAspectRatio: 1.2,
                        children: List.generate(
                          8,
                          (index) {
                            return Container(
                              child: Card(
                                color: Colors.blue,
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                    new SizedBox(height: 20.0),
                  ],
                );
              },
            ),
          ],
        ),
      ],
    );

Answer 2

最适合您的情况的是 Slivers，它将允许您滚动浏览 ListView 和 GridView一起顺利

举例如下：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
        centerTitle: true,
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: CarouselSlider(
                options: CarouselOptions(height: 230.0),
                items: [1, 2, 3, 4, 5].map((i) {
                  return Builder(
                    builder: (BuildContext context) {
                      return Container(
                        width: MediaQuery.of(context).size.width,
                        margin: EdgeInsets.symmetric(horizontal: 5.0),
                        child: Card(
                          elevation: 2.0,
                          child: Text('hello'),
                        ),
                      );
                    },
                  );
                }).toList(),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: SizedBox(height: 20.0),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return new Column(
                children: <Widget>[
                  new Container(
                    height: 50.0,
                    color: Colors.green,
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Icon(Icons.format_list_numbered,
                            color: Colors.white),
                        new Padding(padding: const EdgeInsets.only(right: 5.0)),
                        new Text(index.toString(),
                            style: new TextStyle(
                                fontSize: 20.0, color: Colors.white)),
                      ],
                    ),
                  ),
                  Container(
                    child: GridView.count(
                      crossAxisCount: 3,
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      physics: NeverScrollableScrollPhysics(),
                      childAspectRatio: 1.2,
                      children: List.generate(
                        8,
                        (index) {
                          return Container(
                            child: Card(
                              color: Colors.blue,
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                  new SizedBox(height: 20.0),
                ],
              );
            }, childCount: 5),
          )
        ],
      ),
    );
  }
}

Flutter- Gridview inside listview 问题

Flutter- Gridview inside listview issue

listview

gridview

flutter