Flutter Wrap 流布、自动换行

最新推荐文章于 2025-10-27 10:50:01 发布

原创最新推荐文章于 2025-10-27 10:50:01 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter Wrap 组件 #Flutter自动换行 #Flutter 流布局 #Flutter #Flutter Wrap

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文深入解析Flutter中Wrap组件的功能与使用方法，包括流布局、自动换行特性，以及各项属性如direction、alignment、spacing等的详细说明。通过具体代码示例展示如何创建灵活的网格布局。

Wrap 可以实现流布局（自动换行），当子元素在一行排列空间不足时，会自动换行排列显示。

参数详解

属性	说明
direction	排列方向（垂直和水平）
alignment	主轴（x）对齐方式
spacing	主轴（x）子元素间距
runAlignment	纵轴（y）对齐方式
runSpacing	纵轴（y）子元素间距
crossAxisAlignment	交叉轴（crossAxis）方向上的对齐方式。
textDirection	正反序排列
verticalDirection	文本方向。
children	子元素集合

alignment

WrapAlignment.start,
WrapAlignment.end,
WrapAlignment.center,
WrapAlignment.spaceAround,//左右对齐间距与控件同时平分空间

WrapAlignment.spaceBetween,//左右对齐间距平分两边没间隙

WrapAlignment.spaceEvenly,//左右对齐间距平分两边有间隙

代码示例

class MyBodyA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      color: Colors.red[200],
      width: 400,
      height: 500,
      child: Wrap(
        //水平间距
        spacing: 8.0,
        //垂直间距
        runSpacing: 10.0, 
        //对齐方式
        alignment: WrapAlignment.spaceBetween,
        children: <Widget>[
          MyView('A'),
          MyView('widget'),
          MyView('that'),
          MyView('displays'),
          MyView('its'),
          MyView('children'),
          MyView('int'),
          MyView('multiple'),
          MyView('horizontal'),
          MyView('vertical'),
          MyView('runs'),
        ],

      )
    );
  }
}

//定义一个 公共类  返回view
class MyView extends StatelessWidget {
  String text;
  MyView(this.text);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(8, 5, 8, 5),
      decoration: BoxDecoration(
        border:Border.all(
          color: Colors.blue,
          width: 1,
        ),
        borderRadius: BorderRadius.all(
          Radius.circular(8),
        ),
      ),
      child: Text(this.text),
    );
  }
}