简介
- 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对象列表。 [...]
@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
平等运算符。[...]
继承