【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )（一）

class Wrap extends MultiChildRenderObjectWidget {
  /// Creates a wrap layout.
  ///
  /// By default, the wrap layout is horizontal and both the children and the
  /// runs are aligned to the start.
  ///
  /// The [textDirection] argument defaults to the ambient [Directionality], if
  /// any. If there is no ambient directionality, and a text direction is going
  /// to be necessary to decide which direction to lay the children in or to
  /// disambiguate `start` or `end` values for the main or cross axis
  /// directions, the [textDirection] must not be null.
  Wrap({
    Key key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0, // 水平方向间距
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0, // 垂直方向间距
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[], // 子组件集合
  }) : super(key: key, children: children);
}

设置水平间距 : spacing 字段 ;
设置垂直间距 : runSpacing 字段 ;
设置布局中的子组件 : children 字段 ;
// 可自动换行的水平线性布局
Wrap(
  // 设置水平边距
  spacing: 间距值 ( double 类型 ),
  // 设置垂直间距
  runSpacing: 间距值 ( double 类型 ),
  children: <Widget>[
    设置若干子组件 
  ]
)

// 可自动换行的水平线性布局
Wrap(
  // 设置水平边距
  spacing: 40,
  // 设置垂直间距
  runSpacing: 10,
  children: <Widget>[
    Chip(
      // 设置主体标签文本
      label: Text("宋江"),
      // 设置左侧圆形头像
      avatar: CircleAvatar(
        // 设置背景颜色
        backgroundColor: Colors.green.shade600,
        child: Text("宋"),
      ),
    ),
    Chip(
      // 设置主体标签文本
      label: Text("卢俊义"),
      // 设置左侧圆形头像
      avatar: CircleAvatar(
        // 设置背景颜色
        backgroundColor: Colors.green.shade600,
        child: Text("卢"),
      ),
    ),
    Chip(
      // 设置主体标签文本
      label: Text("吴用"),
      // 设置左侧圆形头像
      avatar: CircleAvatar(
        // 设置背景颜色
        backgroundColor: Colors.green.shade600,
        child: Text("吴"),
      ),
    ),
    Chip(
      // 设置主体标签文本
      label: Text("公孙胜"),
      // 设置左侧圆形头像
      avatar: CircleAvatar(
        // 设置背景颜色
        backgroundColor: Colors.green.shade600,
        child: Text("公孙"),
      ),
    ),
    Chip(
      // 设置主体标签文本
      label: Text("关胜"),
      // 设置左侧圆形头像
      avatar: CircleAvatar(
        // 设置背景颜色
        backgroundColor: Colors.green.shade600,
        child: Text("关"),
      ),
    ),
  ],
),

Expanded 组件 : 该组件可以自动识别父容器的方向 , 在垂直或水平方向上填充剩余空间 ;
class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key key,
    int flex = 1,
    @required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

// 普通样式的 Row
Row(
  children: <Widget>[
    Container(
      // 背景设置成黑色
      decoration: BoxDecoration(
        color: Colors.black,
      ),
      // 字体设置成黄色
      child: Text(
        "Text 原始样式",
        style: TextStyle(color: Colors.yellow),
      ),
    ),
  ],
),
// 空行
SizedBox(
  width: 10,
  height: 20,
),
// 使用了 Exoanbded 组件的 Row
Row(
  children: <Widget>[
    Expanded(
      child: Container(
        // 背景设置成黑色
        decoration: BoxDecoration(
          color: Colors.black,
        ),
        // 字体设置成黄色
        child: Text(
          "Text 原始样式",
          style: TextStyle(color: Colors.yellow),
        ),
      ),
    ),
  ],
),
// 空行