列中的Flutter Gridview.什么是解决方案..？

Question

我的gridview和列有问题.在这种情况下,我想在gridview的上部放置一个图像.请给我一个解决方案..

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

Answer 1

错误原因：

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 2

您只需将网格视图放入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 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

您可以通过这两个属性来解决它并更改它们，如下所示：

shrinkWrap: true,
primary: false,

• ShrinkWrap将包裹您的内容并处理溢出。
• 通过primary，我们可以设置您想要使该列表可滚动或其父列表。通过将其设置为 false，它允许滚动父列表或可滚动视图。

注意：您还可以使用SingleChildScrollView包裹您的列，以便在视图中滚动。

快乐飘飘！