Flutter Widget组件库:Align
Align
组件可以调整子组件的位置,定义如下:
Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
})
alignment
: 需要一个AlignmentGeometry
类型的值,表示子组件在父组件中的起始位置。AlignmentGeometry
是一个抽象类,它有两个常用的子类:Alignment
和FractionalOffset
,我们将在下面的示例中详细介绍。widthFactor
和heightFactor
是用于确定Align
组件本身宽高的属性;它们是两个缩放因子,会分别乘以子元素的宽、高,最终的结果就是Align
组件的宽高。如果值为null
,则组件的宽高将会占用尽可能多的空间。
示例
我们先来看一个简单的例子:
Container(
height: 120.0,
width: 120.0,
color: Colors.blue.shade50,
child: Align(
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
)
FlutterLogo
是Flutter SDK 提供的一个组件,内容就是 Flutter 的 logo 。在上面的例子中,我们显式指定了Container
的宽、高都为 120。如果我们不显式指定宽高,而通过同时指定widthFactor
和heightFactor
为 2 也是可以达到同样的效果:
Align(
widthFactor: 2,
heightFactor: 2,
alignment: Alignment.topRight,
child: FlutterLogo(
size: 60,
),
),
因为FlutterLogo
的宽高为 60,则Align
的最终宽高都为2*60=120
。
另外,我们通过Alignment.topRight
将FlutterLogo
定位在Container
的右上角。那Alignment.topRight
是什么呢?通过源码我们可以看到其定义如下:
//右上角
static const Alignment topRight = Alignment(1.0, -1.0);
可以看到它只是Alignment
的一个实例,下面我们介绍一下Alignment
。
Alignment
Alignment
继承自AlignmentGeometry
,表示矩形内的一个点,他有两个属性x
、y
,分别表示在水平和垂直方向的偏移,Alignment
定义如下:
Alignment(this.x, this.y)
Alignment
Widget会以矩形的中心点作为坐标原点,即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 * (parentWidth - childWidth) / 2 + (parentWidth - childWidth) / 2,
Alignment.y * (parentHeight - childHeight) / 2 + (parentHeight - childHeight) / 2)
其中childWidth
为子元素的宽度,childHeight
为子元素高度。
现在我们再看看上面的示例,我们将Alignment(1.0, -1.0)
带入上面公式,可得FlutterLogo
的实际偏移坐标正是(60,0)。下面再看一个例子:
Align(
widthFactor: 2,
heightFactor: 2,
alignment: Alignment(2,0.0),
child: FlutterLogo(
size: 60,
),
)
我们可以先想象一下运行效果:将Alignment(2,0.0)
带入上述坐标转换公式,可以得到FlutterLogo
的实际偏移坐标为(90,30)。
FractionalOffset
FractionalOffset
继承自 Alignment
,它和 Alignment
唯一的区别就是坐标原点不同!FractionalOffset
的坐标原点为矩形的左侧顶点,这和布局系统的一致,所以理解起来会比较容易。FractionalOffset
的坐标转换公式为:
实际偏移 = (FractionalOffse.x * (parentWidth - childWidth), FractionalOffse.y * (parentHeight - childHeight))
下面看一个例子:
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),和实际运行效果吻合。
- 0
- 0
-
赞助
微信支付宝 -
分享