【Flutter基础】1.3-组件尺寸和位置

170 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第15天,点击查看活动详情

Container本身是一个结合各种常见组件于一身的“便利型”组件,但是当只使用其中几个功能时,可以使用其他响应的组件,这样更易读,程序运行也更高效

  • SizedBox
  • Align 组件
  • Center组件

SizedBox 组件

从下图可知,该组件就主要是width,height和child image.png

image.png

也可占位

image.png

Align 组件

image.png

Align组件与上文介绍的Container组件用法一致,通过alignment参数传入对齐方式即可。Align组件的alignment属性默认值为居中。

image.png

这里alignment属性的赋值方法是传入FractionalOffset类。这与传入Alignment非常相似,主要区别在于x和y对应横轴和纵轴方向的位置,常用取值范围为**[0.0,1.0],而不是[-1.0,1.0]**。即同样表示正中间,Alignment是(0.0,0.0)FractionalOffset是(0.5,0.5)

image.png

Center组件

Flutter框架从Align组件继承了一个新的Center组件,专门负责居中

image.png

Center与Align组件相比,实际上只少了alignment参数,因为它不支持其他的对齐方式,而恰好Align组件不传alignment参数时,其默认行为也是居中,于是代码中出现的所有Center组件均可直接替换为Align组件。这样做除了牺牲可读性之外,运行起来不会有任何区别。由此可见,Center存在的意义就是为了帮助代码的可读性,属于像“语法糖”一样的便利组件。

是读书笔记,《Flutter组件详解与实践》 作者王浩然