flutter中如何让Column或Row的子组件相互之间保持一定的间距？

Posted 2023-04-02

参考技术A Column或者Row控件的子组件相互之间保持间距的方式有很多种，比较简单直接的实现方式如下：

Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 10),//保留间距10
SecondWidget(),
],
),
如果是行的话，参考以下：

Row(
children: <Widget>[
FirstWidget(),
SizedBox(width: 10),
SecondWidget(),
],
),

Flutter中常用的组件-Expanded

 //将 Row 子部件包装在 Expanded 对象中有助于它水平扩展空间并占用其余的 Row 空间。
      new Row(
        children: [
          //Expanded 是一个小部件，有助于根据主轴扩展 Row 或 Column 的子小部件的空间。需要注意的是，Row 的主轴是水平轴，Column 的主轴是垂直轴。
          new Expanded(
            child: new Text("估价师"),
            //flex 属性被认为是 Expanded 的权重。它确定将分配多少空间给 Expanded。分配的空间与 flex 值成正比。flex 的默认值为 1。
            flex: 2,
          ),
          new Expanded(
            child: new Text("贾克斯"),
            flex: 2,
          ),
          new Expanded(
            child: new Text("时代大厦"),
            flex: 3,
          ),
          new Icon(Icons.ice_skating)
        ],
      ),