flutter - Flutter Gridview 在列中。有什么解决办法..？

Question

我对gridview 和column 有疑问。在这种情况下，我想将图像放在网格视图的上方。请给我一个解决方案..

return new Container(
  child: new Column(
    children: <Widget>[
      new Container(
        child: new Image.asset(
          "assets/promo.png",
          fit: BoxFit.cover,
        ),
      ),
      new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: new List<Widget>.generate(16, (index) {
            return new GridTile(
                header: new Container(
                  padding: const EdgeInsets.all(10.0),
                  alignment: Alignment.centerRight,
                  child: new Icon(
                    Icons.shopping_cart,
                    size: 20.0,
                    color: Colors.red,
                  ),
                ),
                child: new MyList(
                  nomor: '$index',
                ));
          }),
        ),
      ),
    ],
  ),
);

这就是结果： Flutter Gridview in Column

Answer 1

您只需要将网格视图放入Expanded小部件中，例如：

body: new Column(
  children: <Widget>[
    new Expanded(
      child: GridView.count(
        // Create a grid with 2 columns. If you change the scrollDirection to
        // horizontal, this would produce 2 rows.
        crossAxisCount: 2,
        // Generate 100 Widgets that display their index in the List
        children: List.generate(10, (index) {
          return _buildCard(index);
        }),
      ),
    ),
    new Text("text")
  ],
),

Answer 2

错误原因：

Column在主轴方向（垂直轴）扩展到最大尺寸，GridView（滚动方向默认为垂直）也是如此

解决方案

您需要限制 的高度GridView，使其膨胀以填充内部剩余空间Column，解决此问题的方法有多种，请使用更适合您的方法。

---

1. 如果要允许GridView占用内部Column使用的所有剩余空间Flexible。

   Column(
     children: <Widget>[
       Flexible(
         child: GridView(...),
       )
     ],
   )
   

---

2. 如果你想限制你GridView的某些height，你可以使用SizedBox。

   Column(
     children: <Widget>[
       SizedBox(
         height: 200, // constrain height
         child: GridView(...),
       )
     ],
   )
   

---

3. 如果你GridView很小，你可以试试shrinkWrap它的属性。

   Column(
     children: <Widget>[
       GridView(
         shrinkWrap: true, // use it
       )
     ],
   )
   

Answer 3

如果 Column 是其父级，GridView那么它会出现渲染问题，因为Column两者GridView都单独占用屏幕的整个空间，这是默认行为（默认滚动轴为垂直）。

解决方案：

为了解决上述问题，我们必须禁用滚动GridView，这可以通过 shrinkWrap 和物理属性来实现

shrinkWrap:true -GridView只占用它需要的空间

物理： NeverScrollableScrollPhysics() - 它禁用 的滚动功能GridView，这意味着现在我们只有SingleChildScrollView提供滚动功能的人。

代码：

SingleChildScrollView
   Column
        GridView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

Answer 4

@RuslanLeshchenko 提到的答案是正确的，但如果它仍然不适合您，请在 GridView 上尝试以下属性

1. 尝试更改shrinkwrap为 true
2. 申请 physics: BouncingScrollPhysics()

Answer 5

在您的 Gridview 中，确保添加这 2 个属性。

physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,

Answer 6

只需用脚手架和滚动视图包装

Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: Column(
            children: [ 
          ...

在对话模型上也进行了测试。

Answer 7

我有同样的问题，无法解决。然后我再次使用了 GridView.builder()。

如其他评论中所述，我将其更改为 GridView.count 并添加了 shrinkWrap: true 和 Physics: NeverScrollableScrollPhysics() 。

它现在工作正常。谢谢！

Answer 8

只包GridView在里面ListView

Column(
    children: <Widget>[
        ListView(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            children: [
                GridView(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                ),
            ],
        ),
)

它也适用于SingleChildScrollView

SingleChildScrollView(
    child: Column(
        children: <Widget>[
            ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                children: [
                    GridView(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                    ),
                ],
            ),
    )
)

奇迹般有效 （：

Answer 9

body:Container(
   body: Container(
          child: Column(
            children: [
              Text('Exemple'),
              Expanded(
                child: GridView.count(
                    children: <Widget>[
                          //Widgets
                    ]
               )
             )
           ]
         )
       ) 

Answer 10

尝试将childAspectRatioGridView 的属性更改为 0.8 或更低。