网站导航
> 技术文档 > Flutter基础（前端教程①⑦-Column竖直-Row水平-Warp包裹-Stack堆叠）_flutter wrap 包裹row

Flutter基础（前端教程①⑦-Column竖直-Row水平-Warp包裹-Stack堆叠）_flutter wrap 包裹row

网友: 技术文档 2025-07-26 20:26:23

MainAxisAlignment 是一个枚举类，用于控制主轴（Main Axis） 方向上子组件的排列和对齐方式。

MainAxisAlignment 的常用取值及效果：

  1. MainAxisAlignment.start
    子组件沿主轴的起点对齐（Row 左对齐，Column 顶部对齐）

  2. MainAxisAlignment.end
    子组件沿主轴的终点对齐（Row 右对齐，Column 底部对齐）

  3. MainAxisAlignment.center
    子组件在主轴方向上居中对齐

  4. MainAxisAlignment.spaceBetween
    子组件之间均匀分配剩余空间，首尾组件贴近边缘（无额外间距）

  5. MainAxisAlignment.spaceAround
    子组件两侧分配相等空间，首尾组件到边缘的距离是组件间距的一半

  6. MainAxisAlignment.spaceEvenly
    子组件之间及与边缘的距离完全相等

Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, // 水平方向均匀分布 children: [ Container(width: 50, height: 50, color: Colors.red), Container(width: 50, height: 50, color: Colors.green), Container(width: 50, height: 50, color: Colors.blue), ],)
属性 功能描述 取值示例 mainAxisSize 决定容器在主轴方向上的空间大小：
- max：尽可能占满父容器的空间
- min：仅包裹子组件，不额外占空间 MainAxisSize.max（默认）、MainAxisSize.min mainAxisAlignment 决定子组件在容器的主轴空间内如何排列（如对齐方式、间距分配） start、center、spaceBetween 等
情况 1：mainAxisSize: max（容器占满空间）
Row( mainAxisSize: MainAxisSize.max, // 容器宽度=屏幕宽度 mainAxisAlignment: MainAxisAlignment.spaceBetween, // 子组件分散在整个宽度上 children: [ Container(width: 50, height: 50, color: Colors.red), Container(width: 50, height: 50, color: Colors.green), ],)

效果：两个色块分别靠向屏幕左右边缘，中间有大量空隙（利用了容器的全部宽度）。

情况 2：mainAxisSize: min（容器仅包裹子组件）
Row( mainAxisSize: MainAxisSize.min, // 容器宽度=两个色块宽度之和（100） mainAxisAlignment: MainAxisAlignment.spaceBetween, // 无效果（没有额外空间） children: [ Container(width: 50, height: 50, color: Colors.red), Container(width: 50, height: 50, color: Colors.green), ],)

效果：两个色块紧挨着（总宽度 100），spaceBetween 无法产生间距（因为容器没有多余空间）。

CrossAxisAlignment

Warp

在 Flutter 中，Wrap 是一个布局组件，用于在子组件超出父容器边界时自动换行（或换列），类似于文本换行的效果。它解决了 Row/Column 中子组件超出界溢出的问题，是处理动态数量子组件布局的常用选择。

常用属性：

  1. direction：指定主轴方向（默认水平）

    • Axis.horizontal：水平方向排列，空间不足时换行（默认）
    • Axis.vertical：垂直方向排列，空间不足时换列

  2. spacing：主轴方向上子组件之间的间距

  3. runSpacing：行与行（或列与列）之间的间距

  4. alignment：主轴方向上的对齐方式（类似 mainAxisAlignment）

  5. crossAxisAlignment：交叉轴方向上的对齐方式（类似 CrossAxisAlignment）

示例代码：

下面是一个水平方向的 Wrap 示例，包含多个按钮，当屏幕宽度不足时会自动换行：

Wrap( direction: Axis.horizontal, // 水平方向排列（默认） spacing: 8.0, // 按钮之间的水平间距 runSpacing: 8.0, // 行之间的垂直间距 alignment: WrapAlignment.start, // 每行左对齐 children: [ ElevatedButton(onPressed: () {}, child: Text(\"按钮1\")), ElevatedButton(onPressed: () {}, child: Text(\"按钮2\")), ElevatedButton(onPressed: () {}, child: Text(\"按钮3\")), ElevatedButton(onPressed: () {}, child: Text(\"按钮4\")), ElevatedButton(onPressed: () {}, child: Text(\"按钮5\")), ElevatedButton(onPressed: () {}, child: Text(\"按钮6\")), ],)

1. Stack（堆叠容器）

Stack 是一个容器组件，用于将子组件按顺序堆叠在一起，后面的子组件会覆盖在前面的子组件之上（类似 CSS 中的 position: absolute 堆叠效果）。

核心特点：
  • 子组件默认左上角对齐（可以通过 alignment 属性修改默认对齐方式）。
  • 本身不限制大小，默认会根据子组件中最大的尺寸来调整自身大小（也可通过 fit 属性控制）。

2. Positioned（定位组件）

Positioned 只能作为 Stack 的直接子组件，用于精确控制子组件在 Stack 中的位置，通过设置与 Stack 边缘的距离来定位。

常用属性（用于定位）：
  • left：距离 Stack 左边缘的距离
  • right：距离 Stack 右边缘的距离
  • top：距离 Stack 上边缘的距离
  • bottom：距离 Stack 下边缘的距离
  • width/height：固定子组件的宽高（可选，不设置则由子组件自身大小决定）

示例：图片上叠加文字和图标

下面的代码实现了 “背景图 + 顶部标题 + 右下角图标” 的层叠效果：

Stack( // 未使用 Positioned 的子组件会默认左上角对齐（可通过 alignment 修改） alignment: Alignment.center, // 未定位子组件的默认对齐方式（这里无效，因为所有子组件都用了 Positioned） children: [ // 底层：背景图片（占满 Stack） Positioned.fill( // 快捷方式：让子组件填满整个 Stack child: Image.network( \'https://picsum.photos/400/300\', fit: BoxFit.cover, // 图片铺满容器 alt: \"示例背景图\", ), ), // 中层：顶部标题（距离顶部 16 像素，水平居中） Positioned( top: 16, left: 0, right: 0, // left 和 right 都设为 0 可让组件水平占满，配合 textAlign 居中 child: Text( \"风景照片\", style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), ), // 上层：右下角图标（距离右和下各 16 像素） Positioned( right: 16, bottom: 16, child: Icon(Icons.favorite, color: Colors.red, size: 30), ), ],)
网络标签：

相关问题