对齐定位 Align
Align 是什么
Align 是一个用于 对子组件进行对齐和定位 的布局组件。它的作用是：
- 根据
alignment参数，将 子组件 在自身范围内按指定位置摆放。 - 可以配合
widthFactor和heightFactor决定Align自己的大小。
Align的定义
Align({
Key key,
// 需要一个AlignmentGeometry类型的值
// AlignmentGeometry 是一个抽象类，
// 它有两个常用的子类：Alignment和 FractionalOffset
this.alignment = Alignment.center,
// 两个缩放因子
// 会分别乘以子元素的宽、高，最终的结果就是 Align 组件的宽高
this.widthFactor,
this.heightFactor,
Widget child,
})
alignment：控制子组件在 Align 内部的位置，常用值如下
| 值 | 含义 |
|---|---|
Alignment.center |
居中 |
Alignment.topLeft |
左上角 |
Alignment.topRight |
右上角 |
Alignment.bottomLeft |
左下角 |
Alignment.bottomRight |
右下角 |
Alignment(0.0, -0.5) |
自定义位置（横向居中，纵向靠上） |
widthFactor / heightFactor
- 默认情况下，
Align会尽量 占满父容器。 - 如果指定
widthFactor或heightFactor，Align的大小会等于子组件大小×对应 factor。 - 常用场景：让
Align自己的尺寸收缩到子组件的大小附近。
举例说明
class AlignPage extends StatelessWidget {
const AlignPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Align(
alignment: Alignment.bottomLeft,
child: Container(width: 100, height: 100, color: Colors.amber),
),
);
}
}
默认情况下，Align 会尽量 占满父容器
class AlignPage extends StatelessWidget {
const AlignPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Align(
widthFactor: 2,
heightFactor: 2,
alignment: Alignment.bottomLeft,
child: Container(width: 100, height: 100, color: Colors.amber),
),
);
}
}
如果指定 widthFactor 或 heightFactor，Align 的大小会等于 子组件大小 × 对应 factor
Align=子组件大小 * (2*2)
Alignment
Alignment 是 一个二维坐标系上的位置描述类（Alignment extends AlignmentGeometry）。
用来指定 子组件在父组件内部的位置。
最常用在 Align、Stack、FractionalOffset 等需要控制位置的地方。
Alignment 的坐标是 相对父容器 的：
- x 方向：-1.0（最左） → 0.0（中间） → 1.0（最右）
- y 方向：-1.0（最上） → 0.0（中间） → 1.0（最下）
(-1,-1) (0,-1) (1,-1)
topLeft topCenter topRight
(-1, 0) (0, 0) (1, 0)
centerLeft center centerRight
(-1, 1) (0, 1) (1, 1)
bottomLeft bottomCenter bottomRight
以下是Alignment定义的常量：
/// The top left corner.
static const Alignment topLeft = Alignment(-1.0, -1.0);
/// The center point along the top edge.
static const Alignment topCenter = Alignment(0.0, -1.0);
/// The top right corner.
static const Alignment topRight = Alignment(1.0, -1.0);
/// The center point along the left edge.
static const Alignment centerLeft = Alignment(-1.0, 0.0);
/// The center point, both horizontally and vertically.
static const Alignment center = Alignment(0.0, 0.0);
/// The center point along the right edge.
static const Alignment centerRight = Alignment(1.0, 0.0);
/// The bottom left corner.
static const Alignment bottomLeft = Alignment(-1.0, 1.0);
/// The center point along the bottom edge.
static const Alignment bottomCenter = Alignment(0.0, 1.0);
/// The bottom right corner.
static const Alignment bottomRight = Alignment(1.0, 1.0);
我们也可以自定义位置：Alignment(x, y)
class AlignPage extends StatelessWidget {
const AlignPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Align(
widthFactor: 2,
heightFactor: 2,
alignment: Alignment(0.5, -0.5), // 自定义位置
child: Container(width: 100, height: 100, color: Colors.amber),
),
);
}
}
FractionalOffset
FractionalOffset，它其实就是 Alignment 的一个特殊实现版本，用比例来表示子组件在父组件中的位置。
FractionalOffset 这种方式是固定从左上角出发
FractionalOffset(double dx, double dy)
dx: 水平方向比例，0.0 = 左边，1.0 = 右边dy: 垂直方向比例，0.0 = 顶部，1.0 = 底部
class AlignPage extends StatelessWidget {
const AlignPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Align(
widthFactor: 2,
heightFactor: 2,
alignment: FractionalOffset(0, 0),
child: Container(width: 100, height: 100, color: Colors.amber),
),
);
}
}
Center
Center 是集成了 Align 对象，默认 alignment=Alignment.center
Center 定义, 少了一个 alignment 参数
class Center extends Align {
/// Creates a widget that centers its child.
const Center({ Key? key, double? widthFactor, double? heightFactor, Widget? child })
: super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
然后 Align 定义, 默认了 this.alignment = Alignment.center,
class Align extends SingleChildRenderObjectWidget {
/// Creates an alignment widget.
///
/// The alignment defaults to [Alignment.center].
const Align({
Key? key,
this.alignment = Alignment.center, // 默认使用了
this.widthFactor,
this.heightFactor,
Widget? child,
}) : assert(alignment != null),
assert(widthFactor == null || widthFactor >= 0.0),
assert(heightFactor == null || heightFactor >= 0.0),
super(key: key, child: child);
