Question

我正在网格视图中添加标题。标题正在滚动，但是在触摸网格视图时。它没有滚动。我想滚动标题和gridview。我使用了SingleChildScrollView和Expanded。如何解决，请帮帮我。

我的代码如下所示

Widget ItemGridview() {
    return Container(
        color: Colors.white,
    padding: EdgeInsets.all(10),
    child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            new Expanded(
            child: SingleChildScrollView(
            child: Column(
                children: <Widget>[
                new Text(
            'Items of products',
            style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
            textAlign: TextAlign.left,
        ),
                GridView.count(
            shrinkWrap: true,
            primary: true,
            padding: EdgeInsets.only(top:15.0),
            crossAxisCount: 3,
            childAspectRatio: 0.60, //1.0
            mainAxisSpacing: 0.2, //1.0
            crossAxisSpacing: 4.0, //1.0
            children: createCategoryList(),
            ),
                ],
            ),
            )
        )
        ]
    ),
    );
}

在我的代码中，产品项是标题。

List<Widget> createCategoryList() {

  List<Widget> createCategoryList = List<Widget>();

  for (int i = 0; i < documents.length; i++) {
    createCategoryList
        .add(makeGridCell(documents[i].data['title'], "name", 8,documents[i].data['id']));
  }
  return createCategoryList;
}

  Container makeGridCell(String name, String image, int count, String id) {
  return Container(

      child: new GestureDetector(
        onTap: () {
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            new Container(
              child: Image.asset('assets/' + image + ".jpg"),

            ),
            new Container(
              color: Colors.white,
              padding: EdgeInsets.only(left: 5),
              child: new Text(name,
                  style: TextStyle(
                      fontWeight: FontWeight.w500, fontSize: 18.0)), 
            ),

          ],
        ),
      ));
}

createCategoryList()是用小部件编写的网格中的项目列表。

Answer 1

向Gridview添加physics: ScrollPhysics()属性。它会滚动。

Answer 2

您遇到一些与小部件滚动有关的问题，可以使用Widgets来减少Wrap的数量，如下所示：

    Container(
            color: Colors.white,
            padding: EdgeInsets.all(10),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Text(
                    'Items of products',
                    style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
                    textAlign: TextAlign.left,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 15.0),
                    child: Wrap(
                      spacing: 20.0,
                      alignment: WrapAlignment.spaceEvenly,
                      children:createCategoryList(),
                ),
                    ],
                ),
                )
            )
            ]
        ),
        );

将约束宽度或固定宽度添加到您的项目的小部件：

    return Container(
          constraints:
                BoxConstraints(maxWidth: MediaQuery.of(context).size.width / 4),
          child: new GestureDetector(

Answer 3

我认为您需要使用一些自定义滚动视图

CustomScrollView( primary: false, slivers: <Widget>[ SliverPadding( padding: const EdgeInsets.all(20.0), sliver: SliverGrid.count( crossAxisSpacing: 10.0, crossAxisCount: 2, children: <Widget>[ const Text('He\'d have you all unravel at the'), const Text('Heed not the rabble'), const Text('Sound of screams but the'), const Text('Who scream'), const Text('Revolution is coming...'), const Text('Revolution, they...'), ], ), ), ], )

Answer 4

我有类似你的代码包裹在singleChildScrollView中的gridview.count（）添加

  physics: ScrollPhysics(),

到GridView.count（）小部件解决了我的问题

来源：https://github.com/flutter/flutter/issues/19205

Answer 5

只需在 GridView 中添加一些属性

  Widget _buildFields(BuildContext context) {
return Container(
    color: Colors.white,
    child: GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 2.0,
      mainAxisSpacing: 2.0,
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      physics: NeverScrollableScrollPhysics(),
      children: List.generate(choices.length, (index) {
        return Center(
          child: new Column(
            children: [
              new Expanded(
                child: SelectCard(choice: choices[index]),//your card wight
              ),
            ],
          ),
        );
      }),
    ));
}

并像这样使用

class _Dashboard extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      return ListView(
        children: <Widget>[
          Container(
            height: 200,
            child: Image.network(
                "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
          ),
          _buildFields(context),
        ],
      );
    });
  }
}

Answer 6

我自己遇到了这个问题，将GridView的 primary 参数更改为false，然后尝试一下。

Flutter Grid视图不滚动

6 个答案: