Flutter中如何在body添加多个子组件？新手技术求助

我是Dart新手，现在卡在Flutter页面body里添加4个子组件的问题上，需要加入的组件是LinkBox()、MyHomePage()、ShoppingItem()、ShoppingGallery()。

我尝试过的写法 #

初始写法 #

body: Column(
    children: [
      LinkBox(), // Add the link box here
    Expanded(child: MyHomePage()),
    ],
  ),

后续尝试写法1 #

body: Column(
    children: [
      LinkBox(), // Add the link box here
    Expanded(child: MyHomePage()),
    Expanded(child: ShoppingItem()),
    Expanded(child: ShoppingGallery()),
    ],
  ),

后续尝试写法2 #

body: Column(
    children: <Widget>[
      LinkBox(), // Add the link box here
     MyHomePage(),
    ShoppingItem(),
     ShoppingGallery(),
    ],
  ),

后续尝试写法3 #

body: Column(
    children: <Widget>[
      LinkBox(), // Add the link box here
      Expanded(child: MyHomePage()),
    Expanded(child: ShoppingItem()),
    Expanded(child: ShoppingGallery()),
    ],
  ),

以上代码在DartPad中均无法运行，出现大量报错。

期望的布局样式 #

• 上方布局：顶部是链接栏（对应LinkBox），下方是主要内容区域（对应MyHomePage）
• 下方搭配：依次展示商品项（ShoppingItem）和商品图库（ShoppingGallery）

报错情况 #

• 报错1：RenderFlex子项溢出，提示组件总高度超过屏幕可用空间
• 报错2：组件缺少布局约束，无法确定自身尺寸导致渲染失败
• 报错3：Expanded组件使用不当，引发布局冲突

问题原因及解决办法 #

1. 语法格式错误：你所有尝试的代码都存在缩进不统一的问题，Dart对代码格式要求严格，这会直接导致语法报错，先把代码缩进修正为统一的4空格或2空格。
2. 布局溢出问题：Column默认让子组件按自身高度排列，当子组件总高度超过屏幕时就会溢出，解决方式分两种：
   • 若需下方组件平分剩余空间：给LinkBox之外的子组件用Expanded包裹，还可通过flex参数调整各组件的空间占比
   • 若内容过多需要滚动：把整个Column放在SingleChildScrollView里，此时不能用Expanded（滚动视图无固定剩余空间，Expanded无法计算尺寸）
3. 组件约束缺失：如果MyHomePage这类组件本身无固定高度或内部无约束，直接放在Column里会报错，需给它指定高度（比如用SizedBox(height: 200)包裹）或用Expanded提供约束。

正确示例代码 #

平分剩余空间的布局（适合内容不多的情况） #

body: Column(
  children: [
    // 顶部固定高度的LinkBox
    LinkBox(),
    // 用flex设置空间占比，数值越大占比越高
    Expanded(
      flex: 2,
      child: MyHomePage(),
    ),
    Expanded(
      flex: 1,
      child: ShoppingItem(),
    ),
    Expanded(
      flex: 1,
      child: ShoppingGallery(),
    ),
  ],
)

可滚动的布局（适合内容较多的情况） #

body: SingleChildScrollView(
  child: Column(
    children: [
      LinkBox(),
      // 如果组件没有固定高度，可手动指定
      SizedBox(height: 300, child: MyHomePage()),
      SizedBox(height: 150, child: ShoppingItem()),
      SizedBox(height: 150, child: ShoppingGallery()),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者Washington Fig