【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )（一）-阿里云开发者社区

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

2022-01-29 151

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

文章目录

一、Wrap 组件

二、Expanded 组件

三、完整代码示例

四、相关资源

一、Wrap 组件

Wrap 组件 : 该组件是可换行的水平线性布局组件 , 与 Row 组件间类似 , 但是可以换行 ;

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);
}

Wrap 组件用法 :

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

代码示例 : Chip 组件用法参考【Flutter】StatelessWidget 组件 ( CloseButton 组件 | BackButton 组件 | Chip 组件 ) 博客 ;

// 可自动换行的水平线性布局
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 组件

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);
}

Expanded 组件在 Row 组件中会自动填充水平方向上的剩余空间 ;

Expanded 组件在 Column 组件中会自动填充垂直方向上的剩余空间 ;

代码示例 :

// 普通样式的 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),
        ),
      ),
    ),
  ],
),
// 空行