简介
- Container class一个便利的控件，结合了常见的绘画，定位和大小调整。
- 容器(Container class)首先用padding包围子容器(由装饰中出现的任何边框填充)，然后对填充的范围应用额外的约束(将宽度和高度合并为约束，如果二者都不是空的)。然后容器被额外的空白包围。
- 在绘画过程中，容器首先应用指定的变换，然后描绘装饰物用以填充填充范围，再然后描绘子元素，最后描绘前景装饰，也填充填充范围。
- 没有子元素的容器尝试尽可能地大，除非传入的约束是无限的，在这种情况下，它们尝试尽可能地小。有子元素的容器大小适合他们的子元素。构造函数的宽度、高度和约束参数覆盖了这点。
布局行为
有关框布局模型的介绍，请参阅BoxConstraints。
由于容器将许多其他小部件各自与它们自己的布局行为相结合，因此容器的布局行为有些复杂。
为了实现对齐，容器会尝试根据子容器的大小调整其自身的大小，考虑宽度、高度和约束，扩展以适合父容器，尽可能地小。
更具体地说:
如果小部件没有子部件、没有高度、没有宽度、没有约束，并且父部件提供无限约束，那么容器将尝试尽可能地缩小大小。
如果小部件没有子控件，也没有对齐，但是提供了高度、宽度或约束，那么容器将尝试尽可能地小，因为存在这些约束和父控件的约束。
如果小部件没有子部件、没有高度、没有宽度、没有约束、也没有对齐，但是父部件提供了有界的约束，那么容器将展开以适应父部件提供的约束。
如果小部件具有一个对齐，并且父组件提供无限约束，则容器尝试围绕子组件调整自己的大小。
如果小部件具有一个对齐，并且父组件提供有限的约束，那么Container尝试展开以适应父组件，然后根据对齐将子组件定位在自己内部。
否则，小部件有一个子部件，但没有高度、宽度、约束和对齐，并且容器将约束从父部件传递给子部件，并调整自身的大小以匹配子部件。
边距和填充属性也影响布局，如这些属性的文档中所述。（它们的效果仅仅增强了上面描述的规则。）装饰可以隐式地增加填充（例如，BoxDec.中的边框有助于填充）；参见Decoration.padding
此示例显示了一个48x48绿色正方形（放置在Center小部件内部，以防父小部件对容器应该采取的大小有自己的意见），并留有空白以便它远离相邻小部件：
Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: const Color(0xFF00FF00),
width: 48.0,
height: 48.0,
),
)
这个例子展示了如何同时使用Container的许多特性。这些约束被设置为垂直地适应字体大小和足够的头部空间，同时水平地扩展以适应父字体。填充用于确保内容和文本之间存在空间。这颜色使箱子发青。对齐导致子对象位于框的中心。前景装饰在文本上覆盖了九个补丁的图像。最后，转换对整个设备应用轻微的旋转来完成效果。padding用于确保内容和文本之间有空隙,这种颜色使盒子变成青色。对齐(直线)使子元素居中于框中。前景装饰在文本上叠加了一个可以拉伸的小图片。
Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.teal.shade700,
alignment: Alignment.center,
child: Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://www.example.com/images/frame.png'),
centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
),
transform: Matrix4.rotationZ(0.1),
)
参考
- AnimatedContainer是一个变量，它可以在属性更改时平滑地进行动画。
- Border,有一个大量使用容器的例子。
- Ink（油墨）, 在材料上绘制装饰，允许InkResponse和InkWell喷溅在它们上面绘画。
- 布局小部件的目录
继承
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
构造函数
Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child })
Creates a widget that combines common painting, positioning, and sizing widgets. [...]
这段我也不知道有什么用...
属性
alignment → AlignmentGeometry
在容器中对齐子元素
child → Widget
容器所包含的子元素。
constraints → BoxConstraints
应用于子节点的附加约束。
decoration → Decoration
装饰要描绘在子元素的后面。
foregroundDecoration → Decoration
装饰要描绘在子元素的前面。
margin → EdgeInsetsGeometry
空的空间包围着装饰和子元素 。
padding → EdgeInsetsGeometry
在装饰内部留出空白。子元素(如果有的话)被放置在这个填充中。
transform → Matrix4
在绘制容器之前应用的矩阵变换。
hashCode → int
这个对象的hashCode
key → Key
控制一个小部件如何替换树中的另一个小部件。
runtimeType → Type
表示对象的运行时类型。
方法
build（BuildContext context）→Widget
描述此窗口小部件表示的用户界面部分。 [...]
覆盖
debugFillProperties（DiagnosticPropertiesBuilder属性）→void
添加与节点关联的其他属性。 [...]
覆盖
createElement（）→StatelessElement
创建StatelessElement以管理此窗口小部件在树中的位置。 [...]
继承
debugDescribeChildren（）→列出<DiagnosticsNode>
返回描述此节点的子节点的DiagnosticsNode对象列表。 [...]
@protected，继承
noSuchMethod（调用调用）→动态
访问不存在的方法或属性时调用。 [...]
继承
toDiagnosticsNode（{String name，DiagnosticsTreeStyle style}）→DiagnosticsNode
返回调试工具和toStringDeep使用的对象的调试表示形式。 [...]
继承
toString（{DiagnosticLevel minLevel：DiagnosticLevel.debug}）→字符串
返回此对象的字符串表示形式。
继承
toStringDeep（{String prefixLineOne：''，String prefixOtherLines，DiagnosticLevel minLevel：DiagnosticLevel.debug}）→String
返回此节点及其后代的字符串表示形式。 [...]
继承
toStringShallow（{String joiner：'，'，DiagnosticLevel minLevel：DiagnosticLevel.debug}）→String
返回对象的单行详细描述。 [...]
继承
toStringShort（）→String
这个小部件的简短文字描述。
继承
运算符
operator ==(dynamic other) → bool
平等运算符。[...]
继承
