如何在多个项目之间分配 space

Question

我正在尝试添加覆盖屏幕 前 20% 的图像，而其他 80% 应该是网格卡片。图片需要在正文中，而不是在 Appbar 上。我制作了卡片网格，然后尝试将图像和网格放在一列中。实现如下。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        primary: true,
        appBar: AppBar(
        elevation: 4.0,
        backgroundColor: Color(0xfff8f8f8),
        title: Center(child: titleLogo,),
        ),
  //------------ PROBLEM BELOW ----------------
        body: new Column(
          children: <Widget>[
            titleLogo,   //Image object
            TheGridView().build()  //Returns a GridView object
            ],
      ),
  ),
);

}

我收到以下错误

I/flutter (21751): The following assertion was thrown during performResize():
I/flutter (21751): Vertical viewport was given unbounded height.
I/flutter (21751): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (21751): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (21751): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (21751): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (21751): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (21751): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (21751): the height of the viewport to the sum of the heights of its children.

非常感谢任何建议。提前谢谢你。

Answer 1

要在多个项目之间分发 space，您应该像这样使用 Expanded 小部件：

return new Column(
  children: <Widget>[
    new Expanded(
      flex: 2,
      child: new Container(
        color: Colors.red,
      ),
    ),
    new Expanded(
      flex: 8,
      child: new Container(//use your Gridview instead 
        color: Colors.green,
      )
    )
  ],

);

如何在多个项目之间分配 space

how to distribute space between multiple items

dart

flutter

flutter-layout