Flutter- Gridview里面的listview问题

Posted 2023-02-23

【中文标题】Flutter- Gridview里面的listview问题

【英文标题】：Flutter- Gridview inside listview issue

【发布时间】：2020-11-09 09:23:21

【问题描述】：

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

代码：

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

【参考方案1】：

最适合你的情况是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),
          )
        ],
      ),
    );
  

【讨论】：

感谢您的帮助兄弟，我将使用此 Silver 小部件。

【参考方案2】：

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