首页 > 解决方案 > How to solve scrolling in list view when gridview as a child?

问题描述

How to solve the scrolling issue in flutter layout when adding gridview inside listview.
in android studio java we use NestedScrollView to solve this type of issue
What is the solution for flutter?
I need to scrolling continues with out any problem with listview with custom view and gridview.
Now then gridview is only allowing to scroll gridview
if i scroll grid view then top imageview is not scrolling .How to solve this issue?

body: 
    ListView(
  children: <Widget>[
    new Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
    Container(
    height: 300.0,
    child: GridView.count(
      crossAxisCount: 3,
      childAspectRatio: .6,
      children: _list.map((p) => ProductManagment(p)).toList(),
    ),
  ) 
  ],
)

enter image description here

After adding @deniss answer enter image description here

SOLVED
enter image description here

标签: dartflutterflutter-layout

解决方案


而不是使用ListView,您应该使用如下所示的列小部件。

    body: 
        Column(
      children: <Widget>[
        Container (
         height: 150.0, // Set as you want
        child: Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")),
        Container(
        height: 300.0,
        child: GridView.count(
          crossAxisCount: 3,
          childAspectRatio: .6,
          children: _list.map((p) => ProductManagment(p)).toList(),
        ),
      ) 
      ],
    )

Because of `GridView` itself has scroll effect.

编辑:

Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          child: ListView(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    height: 200,
                    child: Image.network(
                        "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
                  ),
                  ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: 80, // Set as you want or you can remove it also.
                      maxHeight: double.infinity,
                    ),
                    child: Container(
                      child: GridView.count(
                        crossAxisCount: 3,
                        shrinkWrap: true,
                        scrollDirection: Axis.vertical,
                        physics: NeverScrollableScrollPhysics(),
                        childAspectRatio: .6,
                        children: _list.map((p) => ProductManagment(p)).toList(),
                      ),
                    ),
                  )
                ],
              ),
            ],
          ),
        ));

您必须使用ConstrainedBoxsetmaxHeight: double.infinityGridView.countset shrinkWrap: true,。并删除容器高度 300。

另外如果你想改变

 Container(
                    height: 200,
                    child: Image.network(
                        "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
                  ),

只是

 Image.network("https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg")

比你可以改变它。


推荐阅读