当前位置：首页 > news >正文

Flutter - 布局Widget

news 来源：原创 2025/9/13 16:45:30

Flutter的布局主要分为单子组件和多子组件两大类：

Container、Padding、Align这些属于单子组件，而Row、Column、ListView这些则是多子组件。

单子组件

Align组件

Align 是一个用于控制子组件位置的单子布局组件。它通过指定对齐方式（如居中、右上角、底部等）将子组件放置在可用空间内的特定位置，常用于精确控制子组件的布局。在 Android/iOS 中 align 只是一个属性，在 Flutter 中是一个组件。

    /*** Align 默认会填满父容器的可用空间，可以通过 widthFactor 和 heightFactor 按比例缩设置。*/Align(child: Icon(Icons.people, size: 36, color: Colors.blue),/*** 对齐方式，默认居中对齐 (子组件在父容器中的对齐位置)* 使用 Alignment(x, y) 或 AlignmentDirectional(start, y)（支持 RTL 布局）指定坐标*/alignment: Alignment.topCenter,/*** 按子组件的尺寸比例控制 Align 自身大小* Align 宽度为子组件的 3 倍，高度为子组件的 2 倍*/widthFactor: 3,heightFactor: 2);

Center组件

Center 是一个专门用于将子组件居中对齐的单子布局组件。Center 继承 Align，它是 Align 组件的简化版本，默认将子组件放置在父容器的中心位置，非常适合快速实现居中布局。

    // Center 不支持设置背景色Center(child: Icon(Icons.people, size: 36, color: Colors.blue),widthFactor: 3,heightFactor: 3);

Padding 组件

Padding 是一个用于为子组件添加内边距（即子组件与其父容器之间的空白区域）的布局组件。它是控制界面元素间距的核心工具之一，常用于优化视觉效果或避免内容紧贴容器边缘。

Padding 在Android/iOS 也是一个属性，在 Flutter 是一个组件。

    return Padding(// 通过 EdgeInsets 设置不同方向的内边距（如上下左右、对称或自定义）padding: EdgeInsets.all(16),child: Text("我在练习书法，但不是写在纸上，而是用心去感受每一个字的灵魂。这是一种玄学，也是一种艺术。",style: TextStyle(color: Colors.teal, fontSize: 18)));

Container 组件

Container 是最常用且功能最丰富的布局组件之一，可以用来设置边距（margin）、填充（padding）、背景颜色（color）、装饰（decoration）、变换（如旋转、缩放）等，可以快速实现复杂的视觉效果。类似于 Android 的 View，iOS 的 UIView，在开发中使用频率较高。

    /*** 注：容器的大小可以通过 width、height属性来指定，也可以通过 constraints 来指定，* 如果同时存在时，width、height优先。（Container内部会根据width、height来生成一个 constraints）* color和decoration是互斥的，当指定color时，Container内会自动创建一个 decoration.*/return Container(color: Colors.blueGrey,width: 240,height: 120,child: Text("我在练习书法，但不是写在纸上，而是用心去感受每一个字的灵魂。这是一种玄学，也是一种艺术。",overflow: TextOverflow.ellipsis),alignment: Alignment.center,padding: EdgeInsets.all(8),margin: EdgeInsets.all(20));

BoxDecoration 组件

BoxDecoration 是一个用于定义容器（如 Container、DecoratedBox）视觉样式的类，支持设置背景色、边框、圆角、阴影、渐变等复杂装饰效果。它是构建精美 UI 的核心工具之一。

    return Container(width: 150,height: 150,child: Text("我在练习书法，但不是写在纸上，而是用心去感受每一个字的灵魂。这是一种玄学，也是一种艺术。"),margin: EdgeInsets.all(16),padding: EdgeInsets.all(12),decoration: BoxDecoration(// 背景颜色// color: Colors.blueGrey,// 边框样式（支持单边设置）border: Border.all(color: Colors.blue, width: 2),// 圆角半径（需与 shape 配合）borderRadius: BorderRadius.circular(10),// 阴影效果（支持多个叠加）boxShadow: [BoxShadow(color: Colors.red, blurRadius: 5)],// 渐变背景（与 color 互斥）,只保留一个gradient: LinearGradient(colors: [Colors.blueGrey, Colors.grey])),);

多子组件

在开发中经常需要将多个 Widget 放在一起进行布局，比如水平方向、垂直方向排列，甚至有时候需要他们进行层叠，比如图片上面放一段文字等；
这个时候我们需要使用多子布局组件（Multi-child layout widgets）

Flex 组件

Flex 组件是用于创建灵活布局的核心组件，支持通过主轴和交叉轴方向控制子组件的排列方式。它与 Row 和 Column 密切相关（实际上 Row 和 Column 是 Flex 的子类），但 Flex 提供了更底层的控制能力，允许开发者自定义布局方向和其他高级行为。

Flex组件和Row、Column属性主要的区别就是多一个direction。
当direction的值为Axis.horizontal的时候，则是Row。
当direction的值为Axis.vertical的时候，则是Column。

    Flex(direction: Axis.vertical,// direction: Axis.horizontal,children: [Icon(Icons.add),Icon(Icons.remove),Icon(Icons.center_focus_strong),],);

特性	`Flex`	`Row`/`Column`
方向灵活性	✅ 可动态切换 `horizontal`/`vertical`	❌ 固定方向（`Row` 水平，`Column` 垂直）
代码复杂度	❌ 需手动指定方向	✅ 直接使用 `Row` 或 `Column`
适用场景	需要动态布局方向时	明确方向时优先使用

Row 组件

Row 是一个用于水平排列子组件的多子布局组件，属于 Flex 布局的子类（相当于 Flex(direction: Axis.horizontal) 的简化版本）。它通过灵活的主轴和交叉轴对齐方式，实现复杂的水平布局需求。

    Row(children: [Container(color: Colors.redAccent,width: 40,height: 40),Container(color: Colors.blueGrey,width: 80,height: 80),Container(color: Colors.green,width: 60,height: 60),Container(color: Colors.orange,width: 100,height: 100)],// 主轴（水平方向）对齐方式（如 spaceBetween、start、center）mainAxisAlignment: MainAxisAlignment.spaceEvenly,// 交叉轴（垂直方向）对齐方式（如 stretch、baseline、end）crossAxisAlignment: CrossAxisAlignment.end,// 主轴的尺寸策略：MainAxisSize.max（填满父容器宽度） MainAxisSize.min（包裹子组件宽度）mainAxisSize: MainAxisSize.max);

Column 组件

Column 是一个用于垂直排列子组件的多子布局组件，属于 Flex 布局的子类（相当于 Flex(direction: Axis.vertical) 的简化版本）。它通过主轴（垂直方向）和交叉轴（水平方向）控制子组件的排列方式，适用于表单、列表、卡片内容等垂直布局场景。

    /*** Column的宽度是由子 Widget的最大宽度决定的* Column的所有子 Widget必须有一个明确的高度, 否则会报 hasSize的错误* Expanded 或 Flexible 处理动态高度分配。* 通过 crossAxisAlignment.stretch 实现水平拉伸效果。*/Column(children: [// Expanded 强制子组件填满剩余垂直空间（按 flex 权重分配） Flexible按比例分配空间，但不强制填满剩余高度Expanded(child: Container(color: Colors.redAccent, width: 40, height: 40),flex: 1,),Container(color: Colors.blueGrey, width: 80, height: 80),Container(color: Colors.green, width: 60, height: 60),Expanded(child: Container(color: Colors.orange, width: 100, height: 100),flex: 2,)],// 交叉轴（垂直方向）对齐方式（如 stretch、baseline、end）crossAxisAlignment: CrossAxisAlignment.end);

Stack 组件

Stack 是一个用于层叠排列子组件的多子布局组件，允许子组件通过绝对或相对定位覆盖在彼此之上。它常用于实现悬浮按钮、对话框、图片叠加文字等需要视觉层叠的场景。

Positioned组件只能在Stack中使用

    Stack(children: [Container(color: Colors.black54, width: 300, height: 300),Positioned(child: Icon(Icons.ac_unit, size: 48)),Positioned(child: Text("1234567890",style: TextStyle(fontSize: 20, color: Colors.green),))],);