1. Align
Align组件可以调整子组件的位置,并且可以根据子组件的宽高来确定自身的的宽高,源码如下:
const Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
})
- alignment
需要一个AlignmentGeometry类型的值,表示子组件在父组件中的起始位置。AlignmentGeometry 是一个抽象类,它有两个常用的子类:Alignment和FractionalOffset。 - widthFactor heightFactor
用于确定Align 组件本身宽高的属性;它们是两个缩放因子,会分别乘以子元素的宽、高,最终的结果就是Align 组件的宽高。如果值为null,则组件的宽高将会占用尽可能多的空间。
代码示例:
class AlignDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
),
);
}
}
运行效果图如下:在上面的代码中,指定了Container的宽、高都为120。如果不指定宽高,可以通过同时指定widthFactor和heightFactor为2也可达到同样的效果,代码如下:
Align(
widthFactor: 2,
heightFactor: 2,
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
FlutterLogo的宽高为60,则Align的最终宽高都为2*60=120。
1.1. Alignment
Alignment继承自AlignmentGeometry,表示矩形内的一个点,他有两个属性x、y,分别表示在水平和垂直方向的偏移。Alignment会以矩形的中心点作为坐标原点,即Alignment(0.0, 0.0) 。x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离,因此2个水平(或垂直)单位则等于矩形的宽(或高),如Alignment(-1.0, -1.0) 代表矩形的左侧顶点,而Alignment(1.0, 1.0)代表右侧底部终点,而Alignment(1.0, -1.0) 则正是右侧顶点,即Alignment.topRight。为了使用方便,矩形的原点、四个顶点,以及四条边的终点在Alignment类中都已经定义为了静态常量。
Alignment可以通过其坐标转换公式将其坐标转为子元素的具体偏移坐标:
(Alignment.x * childWidth / 2 + childWidth / 2, Alignment.y * childHeight / 2 + childHeight / 2)
其中childWidth为子元素的宽度,childHeight为子元素高度。
Alignment.topRight带入上面的公式,FlutterLogo的实际偏移坐标是(60,0)。
1.2. FractionalOffset
FractionalOffset 继承自 Alignment,它和 Alignment唯一的区别就是坐标原点不同!FractionalOffset 的坐标原点为矩形的左侧顶点,这和布局系统的一致。FractionalOffset的坐标转换公式为:
(FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)
代码示例:
class FractionalOffsetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 120.0,
width: 120.0,
color: Colors.blue[50],
child: Align(
alignment: FractionalOffset(0.2, 0.6),
child: FlutterLogo(
size: 60,
),
),
);
}
}
FractionalOffset(0.2, 0.6)带入坐标转换公式得FlutterLogo实际偏移为(12,36)
2. Center
Center组件用来居中子元素。源码如下:
class Center extends Align {
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
: super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
Center继承自Align,它比Align只少了一个alignment 参数;Align的构造函数中alignment 值为Alignment.center,所以Center组件其实就是对齐方式为Alignment.center的Align。
代码传送门