Flutter控件之Container

Container简介

一个方便的小部件,它结合了常见的绘画、定位和大小小部件。

Container的组成

child元素首先会被padding包着;然后添加额外的constraints限制;最后添加margin。

Container的绘制

绘制时首先会绘制transform效果;接着绘制decoration;然后绘制child;最后绘制foregroundDecoration,填充填充填充范围。

Container尺寸大小调节

Container在没有子节点(children)的时候,会试图去变得足够大。如果constraints是unbounded限制,Container会试图去变得足够小。带子节点的Container,会根据子节点尺寸调节自身尺寸,但是Container构造器中如果包含了width、height以及constraints,则会按照构造器中的参数来进行尺寸的调节。

由于Container组合了许多其他小部件,每个小部件都有自己的布局行为,因此Container的布局行为有些复杂。
总的来说就是:Container尝试顺序是:遵守对齐,根据子对象调整自身大小,遵守宽度、高度和约束,扩展以适应父对象,尽可能小。
更具体地说:
如果小部件没有子部件、没有高度、没有宽度、没有约束,并且父部件提供无界约束,则Container会尽量缩小尺寸。
如果小部件没有子部件,也没有对齐,但提供了高度、宽度或约束,则考虑到这些约束和父约束的组合,Container将尽可能小。
如果小部件没有子部件、没有高度、没有宽度、没有约束和对齐方式,但父部件提供有边界的约束,则Container将展开以适应父部件提供的约束。
如果小部件具有对齐方式,并且父部件提供了无限约束,那么Container将尝试围绕子部件调整自身大小。
如果小部件具有对齐方式,并且父部件提供有边界的约束,则Container将尝试展开以适应父部件,然后根据对齐方式将子部件放置在自身中。
否则,小部件有一个子部件,但没有高度、宽度、约束和对齐方式,Container将约束从父部件传递给子部件,并调整其大小以匹配子部件。
边距和填充财产也会影响布局,如这些财产的文档中所述。(它们的效果只是增强了上述规则。)装饰可以隐式地增加填充(例如,BoxDecoration中的边框有助于填充)

Container实例

Container在没有子节点(children)的时候,会试图去变得足够大。

代码如下:
Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
),

image.png

带子节点的Container,会根据子节点尺寸调节自身尺寸

Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
child: Text(
‘This is a Container’,
style: TextStyle(fontSize: 24),
),
),
image.png

Container构造器中如果包含了width、height以及constraints,则会按照构造器中的参数来进行尺寸的调节。

Container(
margin: const EdgeInsets.all(10.0),
color: Colors.amber[600],
width: 48.0,
height: 48.0,
child: Text(
‘This is a Container’,
style: TextStyle(fontSize: 24),
),
),
image.png

猜你喜欢

转载自blog.csdn.net/yikezhuixun/article/details/128957343