目 录CONTENT

文章目录

Flutter 布局控件篇-->Align、Center

俊阳IT知识库
2023-03-09 / 0 评论 / 0 点赞 / 456 阅读 / 1,380 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903957051998222
欢迎访问😃,有任何问题都可留言评论哦~

在Flutter中,如果想指定组件的位置的话,可以使用StackPositioned,他们可以指定一个或多个子元素相对于父元素各个边的精确偏移,并且可以重叠。

但是如果我们只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些。

我们也可以使用Center组件,让子元素都居中显示

Align

Align组件可以调整子组件的位置,并且可以根据子组件的宽高来确定自身的宽高

源码示例

构造函数如下:

Align({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})

属性解释

alignment

他表示子组件在父组件中的起始位置 。

他需要一个AlignmentGeometry类型的值,AlignmentGeometry是一个抽象类,它有两个常用的子类:AlignmentFractionalOffset,下面会说到。

widthFactor、heightFactor

用于确定 Align 组件本身宽高的属性。

  • 它们是两个缩放因子,会分别乘以子元素的宽、高,最终的结果就是 Align 组件的宽高

  • 如果值为null,则组件的宽高将会占用尽可能多的空间。

代码示例:

Container(
  height: 200.0,
  width: 200.0,
  color: Colors.blue[50],
  child: Align(
	  alignment: Alignment.topRight,
	  child: Image(
		width: 100,
		height: 100,
		image: AssetImage('images/Test.jpg'),
	  )),
);

运行效果:

flutter-align-center-2

在这个例子中,我们指定了Container的宽高都为200,
如果我们不显式指定宽高,而通过同时指定widthFactorheightFactor为 2 也是可以达到同样的效果:

Container(
  // height: 200.0,
  // width: 200.0,
  color: Colors.blue[50],
  child: Align(
	  widthFactor: 2,
	  heightFactor: 2,
	  alignment: Alignment.topRight,
	  child: Image(
		width: 100,
		height: 100,
		image: AssetImage('images/Test.jpg'),
	  )),
);

因为这个图片的宽高都是 100,则Align的最终宽高就是 100*2=200

Alignment

在上面的例子中,我们指定了图片的位置alignment: Alignment.topRight, 意思就是显示在右上角,当然还有其他的值,例如:

  • topLeft 左上角
  • topRight 右上角
  • topCenter 上中
  • center 中心
  • centerLeft 左中
  • centerRight 右中
  • bottomLeft 左下角
  • bottomCenter 下中
  • bottomRight 右下角

当然,我们也可以用坐标的形式表示,Alignment继承自AlignmentGeometry,表示矩形内的一个点,他有两个属性xy,分别表示在水平和垂直方向的偏移量。

定义:Alignment(this.x, this.y)

坐标转换公式:(Alignment.x*childWidth/2+childWidth/2, Alignment.x*childHeight+childHeight/2)
其中childWidth为子元素的宽度,childHeight为子元素高度。

但是他比较特殊,他的坐标原点,是矩形的中心点,而不是我们Web中的左上角的那个点,
如果你这样写:Alignment(-1, -1),那他表示的就是左上角的那个点,一定要注意。

代码示例:

Container(
  color: Colors.blue[50],
  child: Align(
	  widthFactor: 2,
	  heightFactor: 2,
	  alignment: Alignment(0,0),
	  child: Image(
		width: 100,
		height: 100,
		image: AssetImage('images/Test.jpg'),
	  )),
);

运行效果:

flutter-align-center-5

Container(
  color: Colors.blue[50],
  child: Align(
	  widthFactor: 2,
	  heightFactor: 2,
	  alignment: Alignment(2,0),
	  child: Image(
		width: 100,
		height: 100,
		image: AssetImage('images/Test.jpg'),
	  )),
);

运行效果:

flutter-align-center-3

FractionalOffset

上面我们说了,Alignment的坐标原点是中心点,而FractionalOffset就不一样了,FractionalOffset继承自 Alignment,它和Alignment唯一的区别就是坐标原点不同。

坐标转换公式:实际偏移 = (FractionalOffse.x * childWidth, FractionalOffse.y * childHeight)

他的坐标原点为矩形的左上角,这和Web是一样的

代码示例:

Container(
  color: Colors.blue[50],
  child: Align(
	  widthFactor: 2,
	  heightFactor: 2,
	  alignment: FractionalOffset(0,0),
	  child: Image(
		width: 100,
		height: 100,
		image: AssetImage('images/Test.jpg'),
	  )),
);

运行效果:

flutter-align-center-4

Align和Stack对比

可以看到,AlignStack/Positioned都可以用于指定子元素相对于父元素的偏移,但它们还是有两个主要区别:

  • 定位参考系统不同;Stack/Positioned定位的的参考系可以是父容器矩形的四个顶点;而Align则需要先通过alignment参数来确定坐标原点,不同的alignment会对应不同原点,最终的偏移是需要通过alignment的转换公式来计算出。

  • Stack可以有多个子元素,并且子元素可以堆叠,而Align只能有一个子元素,不存在堆叠。

Center

这个组件就比较简单了,他可以让他里面的子元素全部居中排列

源码示例

构造函数如下:

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);
}

可以看到Center继承自Align,它比Align只少了一个alignment参数;

由于Align的构造函数中alignment值为Alignment.center,所以,我们可以认为Center组件其实是对齐方式确定(Alignment.center)了的Align

代码示例:

Container(
  color: Colors.blue[50],
  child: Center(
	child: Text('xxx'),
  )
);

运行效果:

flutter-align-center-6

还有一点忘说了,上面说过,当widthFactorheightFactornull时组件的宽高将会占用尽可能多的空间,这一点需要特别注意,

代码示例:

Container(
  child: Column(
	children: <Widget>[
	  DecoratedBox(
		decoration: BoxDecoration(color: Colors.red),
		child: Center(
		  child: Text("xxx"),
		),
	  ),
	  SizedBox(
		height: 20,
	  ),
	  DecoratedBox(
		decoration: BoxDecoration(color: Colors.red),
		child: Center(
		  widthFactor: 1,
		  heightFactor: 1,
		  child: Text("xxx"),
		),
	  )
	],
  ),
);

运行效果:

flutter-align-center-1


S_S

0

评论区