Flutter中如何在if else分支下渲染两个SizedBox组件

错误原因 #

你当前的写法不符合Dart的集合if语法规则：单个if/else分支后只能跟随一个表达式。你在if(n==1)后直接写了两个独立的SizedBox组件，语法解析时会判定第一个SizedBox是if分支的全部内容，第二个SizedBox会被识别为数组的普通元素，后续的else找不到匹配的if，就会抛出找不到]的语法错误。

正确实现方式 #

如果要在单个if/else分支返回多个组件，使用展开运算符... 包裹分支内的组件列表即可，示例代码如下：

body: Center(
  child: Column(
    children: <Widget>[
      Flexible(
        child: Row(
          children: <Widget>[
            if (n == 1)
              // 用展开运算符把分支内的多个组件展开到当前children数组中
              ...[
                SizedBox(
                  child: TextButton(
                    child: Image.asset('images/a.jpg'),
                  ),
                ),
                SizedBox(
                  child: TextButton(
                    child: Image.asset('images/b.jpg'),
                  ),
                ),
              ]
            else
              ...[
                SizedBox(
                  child: TextButton(
                    child: Image.asset('images/b.jpg'),
                  ),
                ),
                SizedBox(
                  child: TextButton(
                    child: Image.asset('images/a.jpg'),
                  ),
                ),
              ]
          ],
        ),
      )
    ],
  ),
)

补充说明 #

如果你的两个组件本身就需要嵌套在同一个布局容器内（比如需要统一调整间距、排列方向等），也可以直接用Row/Column/Wrap等容器把两个SizedBox包成一个组件作为分支的返回值，这种情况就不需要使用展开运算符。

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