在网页开发中,有盒子模型,号称统一三端的 Flutter 也不例外,而且和 HTML 的盒子模型几乎是一样的,本篇文章通过简单的例子说明一下 Flutter 的盒子模型,方便以后再做界面时可以更好的理解布局。
在讲 Flutter 的盒子模型前,先看看HTML 中的盒子模型。如下图所示,一个页面元素包括了与父级容器的外边距(margin),自身内容与边框的内边距(padding)。外边距 和内边距都可以通过 LTRB (左、上、右、下)单独设定四个方向的大小。
Flutter 的盒子模型和 HTML 的是一样的,而通用的容器 Container 就相当于是一个通用的容器,和 HTML 的 div 标签一样。如果要控制一个元素的尺寸,外边距,内边距和边框,最通用的做法是使用 Container
容器将元素包裹。当然 Flutter 也提供了一些更为具体的布局组件方便开发,例如 :
SizedBox
:指定尺寸的容器。ConstaintedBox
:带约束条件的容器,如限制最小最大宽度和高度。DecoratedBox
:带装饰的容器,比如渐变色。RotatedBox
:旋转一定角度的容器。
上面这些组件实际都可以通过 Container 的参数设置完成ÿ