Center / Align

Center 和 Align 用于控制子组件在父容器中的对齐位置。

Center

Center 将子组件居中显示。实际上就是 Align 的 alignment: Alignment.center 的快捷方式。

构造函数

Center({
  Key? key,                      // 组件标识
  double? widthFactor,            // 宽度因子（null=撑满父组件，1.0=与子组件同宽）
  double? heightFactor,           // 高度因子（null=撑满父组件，1.0=与子组件同高）
  required Widget child,          // 子组件（必填）
})

属性速查

属性	类型	默认值	说明
widthFactor	double?	null	宽度因子，Align 宽度 = 子组件宽度 × 此值
heightFactor	double?	null	高度因子，Align 高度 = 子组件高度 × 此值
child	Widget	必填	子组件

快速示例

import 'package:flutter/material.dart';

class CenterAlignExample extends StatelessWidget {
  const CenterAlignExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Center / Align 示例')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: const [
            // ─── ★ Center 居中 ──────────────
            Center(
              child: Text('我居中了'),
            ),
            // ─── ☆ Center 居中 ──────────────
            SizedBox(height: 16),
            // ─── ★ Align 指定位置 ──────────────
            Align(
              alignment: Alignment.centerLeft,
              child: Text('我靠左了'),
            ),
            // ─── ☆ Align 指定位置 ──────────────
          ],
        ),
      ),
    );
  }
}

Center 的行为

import 'package:flutter/material.dart';

class CenterBehaviorExample extends StatelessWidget {
  const CenterBehaviorExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Center 行为')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            // 如果没有约束，Center 会尽可能大，子组件在中心
            Center(
              child: Container(width: 100, height: 100, color: Colors.blue),
            ),
            const SizedBox(height: 16),
            // 如果 Center 有固定尺寸，子组件在该尺寸内居中
            SizedBox(
              width: 300,
              height: 150,
              child: Center(
                child: Container(width: 100, height: 100, color: Colors.orange),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Center 会撑满父组件

在 Column 中使用 Center 时，Center 会撑满剩余空间。如果只想让子组件居中但不撑满，用 Align 代替。

Align

Align 可以将子组件对齐到任意位置，并且可以控制自身的尺寸因子。

构造函数

Align({
  Key? key,                                          // 组件标识
  AlignmentGeometry alignment = Alignment.center,      // 对齐方式
  double? widthFactor,                                // 宽度因子（null=撑满父组件，1.0=与子组件同宽）
  double? heightFactor,                               // 高度因子（null=撑满父组件，1.0=与子组件同高）
  required Widget child,                               // 子组件（必填）
})

属性速查

属性	类型	默认值	说明
alignment	AlignmentGeometry	center	子组件的对齐位置
widthFactor	double?	null	宽度因子，Align 宽度 = 子组件宽度 × 此值
heightFactor	double?	null	高度因子，Align 高度 = 子组件高度 × 此值
child	Widget	必填	子组件

widthFactor / heightFactor 说明

值	行为
null（默认）	Align 尽可能撑满父组件
1.0	Align 与子组件同大小
0.5	Align 是子组件的一半大小
2.0	Align 是子组件的两倍大小

对齐位置图

(-1, -1) ─────────── (0, -1) ─────────── (1, -1)
  │   topLeft          topCenter          topRight   │
  │                                                     │
  │                                                     │
(-1, 0)  centerLeft ─── (0, 0) ──── centerRight   (1, 0)
  │                   center                           │
  │                                                     │
  │                                                     │
(-1, 1) ───────── (0, 1) ──────────── (1, 1)
  bottomLeft      bottomCenter       bottomRight

Alignment 常用值速查

值	位置	坐标
Alignment.topLeft	左上	(-1, -1)
Alignment.topCenter	上中	(0, -1)
Alignment.topRight	右上	(1, -1)
Alignment.centerLeft	左中	(-1, 0)
Alignment.center	正中	(0, 0)
Alignment.centerRight	右中	(1, 0)
Alignment.bottomLeft	左下	(-1, 1)
Alignment.bottomCenter	下中	(0, 1)
Alignment.bottomRight	右下	(1, 1)
Alignment(x, y)	自定义	x∈[-1,1], y∈[-1,1]

快速示例

各位置示例

// 右上角
Align(
  alignment: Alignment.topRight,
  child: Container(width: 50, height: 50, color: Colors.red),
)

// 左下角
Align(
  alignment: Alignment.bottomLeft,
  child: Container(width: 50, height: 50, color: Colors.green),
)

// 自定义位置（偏右上）
Align(
  alignment: const Alignment(0.5, -0.8),
  child: Container(width: 50, height: 50, color: Colors.blue),
)

百分比定位

Align(
  alignment: const Alignment(0.8, 0.3),  // 右偏 80%，下偏 30%
  child: floatingWidget,
)

使用 widthFactor / heightFactor

// Align 宽度 = 子组件宽度 × 2
Align(
  alignment: Alignment.topRight,
  widthFactor: 2,
  child: Container(width: 50, height: 50, color: Colors.blue),
)

// Align 高度 = 子组件高度 × 3
Align(
  alignment: Alignment.bottomCenter,
  heightFactor: 3,
  child: Container(width: 50, height: 50, color: Colors.green),
)

Center vs Align 对比

特性	Center	Align
对齐位置	固定居中	可指定任意位置
尺寸行为	撑满父组件（可被 shrinkWrap 约束）	可通过 factor 控制大小
本质	Align(alignment: center)	完整的定位组件
适用场景	简单居中	需要精确控制位置时