📖 前言

对齐定位是 Flutter 布局中的重要概念，它控制组件在父容器中的位置。Flutter 提供了多种对齐定位组件，从简单的居中到复杂的自定义定位，满足各种布局需求。

---

🎯 对齐定位组件概览

Flutter 提供了以下对齐定位组件：

组件名	功能说明	适用场景
Center	居中布局	水平垂直居中
Align	对齐布局	自定义对齐位置
Positioned	绝对定位	配合 Stack 使用
Baseline	基线对齐	按文本基线对齐

---

🎯 Center 组件

Center 是 Flutter 中用于居中布局的组件，它可以让子组件在父容器中水平 + 垂直居中。

Center 组件特性

• ✅ 让子组件在父容器中水平居中
• ✅ 让子组件在父容器中垂直居中
• ✅ 同时实现水平和垂直居中
• ✅ 与其他布局组件配合使用

基础用法

// 最简单的居中
Center(
  child: Container(
    color: Colors.blue,
    child: Text('居中内容'),
  ),
)

// 居中文本
Center(
  child: Text(
    '居中文本',
    style: TextStyle(fontSize: 20),
  ),
)

// 居中图标
Center(
  child: Icon(
    Icons.star,
    size: 50,
    color: Colors.amber,
  ),
)

// 居中按钮
Center(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('居中按钮'),
  ),
)

---

🎯 Align 组件

Align 是 Flutter 中用于对齐布局的组件，它可以自定义子组件在父容器中的对齐位置。

Align 组件特性

• ✅ 自定义子组件在父容器中的对齐位置
• ✅ 支持 9 个标准对齐位置（9宫格）
• ✅ 支持自定义对齐位置（使用 Alignment）
• ✅ 与其他布局组件配合使用

基础用法

// 居中（等同于 Center）
Align(
  alignment: Alignment.center,
  child: Container(
    color: Colors.blue,
    child: Text('居中'),
  ),
)

// 顶部居中
Align(
  alignment: Alignment.topCenter,
  child: Container(
    color: Colors.blue,
    child: Text('顶部居中'),
  ),
)

// 底部居中
Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.blue,
    child: Text('底部居中'),
  ),
)

// 左上角对齐
Align(
  alignment: Alignment.topLeft,
  child: Container(
    color: Colors.blue,
    child: Text('左上角'),
  ),
)

// 右上角对齐
Align(
  alignment: Alignment.topRight,
  child: Container(
    color: Colors.blue,
    child: Text('右上角'),
  ),
)

// 左下角对齐
Align(
  alignment: Alignment.bottomLeft,
  child: Container(
    color: Colors.blue,
    child: Text('左下角'),
  ),
)

// 右下角对齐
Align(
  alignment: Alignment.bottomRight,
  child: Container(
    color: Colors.blue,
    child: Text('右下角'),
  ),
)

自定义对齐位置

// 使用自定义 Alignment
Align(
  alignment: Alignment(0.5, -0.5), // x: 0.5 (右移50%), y: -0.5 (上移50%)
  child: Container(
    color: Colors.blue,
    child: Text('自定义对齐'),
  ),
)

// 使用 AlignmentDirectional
Align(
  alignment: AlignmentDirectional.centerStart, // 根据文本方向对齐
  child: Container(
    color: Colors.blue,
    child: Text('方向对齐'),
  ),
)

Alignment 详解

Alignment(x, y) 其中：

• x: 水平位置，-1.0（左）到 1.0（右），0.0 为居中
• y: 垂直位置，-1.0（上）到 1.0（下），0.0 为居中

常用对齐常量：

• Alignment.topLeft: (-1.0, -1.0) - 左上角
• Alignment.topCenter: (0.0, -1.0) - 顶部居中
• Alignment.topRight: (1.0, -1.0) - 右上角
• Alignment.centerLeft: (-1.0, 0.0) - 左侧居中
• Alignment.center: (0.0, 0.0) - 居中
• Alignment.centerRight: (1.0, 0.0) - 右侧居中
• Alignment.bottomLeft: (-1.0, 1.0) - 左下角
• Alignment.bottomCenter: (0.0, 1.0) - 底部居中
• Alignment.bottomRight: (1.0, 1.0) - 右下角

---

📍 Positioned 组件

Positioned 是 Flutter 中用于在 Stack 中精确控制子组件位置的组件。

Positioned 组件特性

• ✅ 只能在 Stack 中使用
• ✅ 提供绝对定位能力
• ✅ 可以设置上下左右的位置
• ✅ 可以设置宽高尺寸
• ✅ 支持 Positioned.fill 填充整个 Stack

基础用法

// 最简单的定位
Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(
      top: 20,
      left: 20,
      child: Text('定位文本'),
    ),
  ],
)

// 四个角的定位
Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned(top: 10, left: 10, child: Text('左上角')),
    Positioned(top: 10, right: 10, child: Text('右上角')),
    Positioned(bottom: 10, left: 10, child: Text('左下角')),
    Positioned(bottom: 10, right: 10, child: Text('右下角')),
  ],
)

// Positioned.fill 填充整个 Stack
Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.blue),
    Positioned.fill(
      child: Container(
        color: Colors.black54,
        child: Center(child: Text('遮罩层')),
      ),
    ),
  ],
)

位置和尺寸属性

// 使用 top、left、right、bottom 同时设置
Positioned(
  top: 20,
  left: 20,
  right: 20,
  bottom: 20,
  child: Container(color: Colors.red),
)

// 设置 width 和 height
Positioned(
  top: 50,
  left: 50,
  width: 100,
  height: 100,
  child: Container(color: Colors.red),
)

---

📏 Baseline 组件

Baseline 是 Flutter 中用于按文本基线对齐子组件的布局组件。

Baseline 组件特性

• ✅ 按文本基线对齐子组件
• ✅ 确保不同大小的文本视觉对齐
• ✅ 实现精确的文本对齐效果
• ✅ 支持自定义基线偏移

基础用法

// 基本的基线对齐
Row(
  children: [
    Baseline(
      baseline: 20.0,
      baselineType: TextBaseline.alphabetic,
      child: Text('小号', style: TextStyle(fontSize: 16)),
    ),
    Baseline(
      baseline: 20.0,
      baselineType: TextBaseline.alphabetic,
      child: Text('大号', style: TextStyle(fontSize: 32)),
    ),
  ],
)

// 不同字体大小的对齐
Row(
  children: [
    Baseline(
      baseline: 20.0,
      baselineType: TextBaseline.alphabetic,
      child: Text('16px', style: TextStyle(fontSize: 16)),
    ),
    Baseline(
      baseline: 20.0,
      baselineType: TextBaseline.alphabetic,
      child: Text('24px', style: TextStyle(fontSize: 24)),
    ),
    Baseline(
      baseline: 20.0,
      baselineType: TextBaseline.alphabetic,
      child: Text('32px', style: TextStyle(fontSize: 32)),
    ),
  ],
)

基线类型

// alphabetic 基线（字母基线，用于英文）
TextBaseline.alphabetic

// ideographic 基线（表意基线，用于中文）
TextBaseline.ideographic

---

💡 实际应用场景

场景1：浮动按钮（右下角）

Align(
  alignment: Alignment.bottomRight,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ),
)

场景2：带徽章的图标

Stack(
  children: [
    Icon(Icons.notifications, size: 48),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('5', style: TextStyle(color: Colors.white, fontSize: 12)),
      ),
    ),
  ],
)

场景3：图片叠加文字

Stack(
  children: [
    Image.network('https://picsum.photos/200/200'),
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Container(
        padding: EdgeInsets.all(8),
        color: Colors.black54,
        child: Text('图片标题', style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
)

场景4：文本基线对齐

Row(
  children: [
    Baseline(
      baseline: 20.0,
      baselineType: TextBaseline.alphabetic,
      child: Text('¥', style: TextStyle(fontSize: 16)),
    ),
    Baseline(
      baseline: 20.0,
      baselineType: TextBaseline.alphabetic,
      child: Text('99', style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
    ),
  ],
)

---

⚠️ 常见问题与解决方案

问题1：Center 与 Align 的区别

问题描述：什么时候使用 Center，什么时候使用 Align？

解决方案：

• Center: 固定水平和垂直居中（等同于 Align(alignment: Alignment.center)）
• Align: 可以自定义任意对齐方式，更灵活

问题2：Positioned 只能在 Stack 中使用

问题描述：Positioned 报错，提示只能在 Stack 中使用。

解决方案：

// 错误写法
Positioned(
  top: 10,
  child: Text('文本'),
)

// 正确写法
Stack(
  children: [
    Container(...),
    Positioned(
      top: 10,
      child: Text('文本'),
    ),
  ],
)

问题3：Baseline 需要文本基线

问题描述：Baseline 对非文本组件不生效。

解决方案：

• Baseline 需要子组件有文本基线
• 如果子组件不是文本组件，需要使用 TextBaseline 相关的组件或包裹文本组件

---

🎨 最佳实践

1. 组件选择指南

需求	推荐组件
简单居中	Center
自定义对齐	Align
绝对定位	Positioned（配合 Stack）
文本基线对齐	Baseline

2. 性能优化技巧

// 使用 const 构造函数
const Center(child: Text('文本'))

// 避免不必要的重建
class MyWidget extends StatelessWidget {
  const MyWidget();
  
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Text('文本'),
    );
  }
}

---

📚 总结

通过本教程，我们学习了：

1. ✅ Center 组件的居中布局
2. ✅ Align 组件的自定义对齐
3. ✅ Positioned 组件的绝对定位
4. ✅ Baseline 组件的文本基线对齐
5. ✅ 实际应用场景和最佳实践

对齐定位是 Flutter 布局的基础，掌握好这些组件的用法，能够让你精确控制组件的位置！

---

🔗 相关资源

• Center 官方文档
• Align 官方文档
• Positioned 官方文档
• Baseline 官方文档

Happy Coding! 🎨✨
欢迎加入开源鸿蒙跨平台社区