Flutter圈子

flutter widget: container

2018-09-29  本文已影响20人  浩林Leon

Container是一个statelessWidget.Container是一个包含常见的绘画,定位和调整大小的widget.


image.png

Container 首先用padding包围子控件(在布局解析时解析任何带边界的控件的decoration属性值),然后对填充范围应用附加约束(包括宽度和高度约束). Container会被margin属性设置的空白边界约束.

在绘制过程中,container首先会应用设置的transform,然后绘制decoration以填充范围,再是绘制子控件,最后绘制foregroundDecoration,同时填充padded区域.

没有child的Container试图尽可能大,除非传入的约束是无边界的,在这种情况下,它们尽可能地小. 有child的Container, 构造函数的width,height和constraints参数会覆盖它。

2.Layout行为

有关框布局模型的介绍,请参阅BoxConstraints
由于Container结合了许多其他小部件,每个小部件都有自己的布局行为,因此Container的布局行为有点复杂.

Container按这样的顺序:在响应alignment时,会调整自身大小来适应子项,在响应widthheightconstraints时,以扩展以适合父级,尽可能小。

3.进一步说:

demo1
new Center(
  child: new Container(
    margin: const EdgeInsets.all(10.0),
    color: const Color(0xFF00FF00),
    width: 48.0,
    height: 48.0,
  ),
)

此示例显示了一个48x48绿色正方形(放置在Center小部件内部),并留有空白以便它远离相邻widget

demo2
new Container(
  constraints: new 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: new Text('Hello World', style: Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
  foregroundDecoration: new BoxDecoration(
    image: new DecorationImage(
      image: new NetworkImage('https://flutter.io/images/homepage/screenshot-1.png'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  transform: new Matrix4.rotationZ(0.1),
)

这个例子展示了如何同时使用容器的许多特性。
constraints被设置为适合字体大小加上充足的净空垂直,同时水平扩展以适应父级。
padding是用来确保内容和文本之间有空格的。
color使盒子变淡了。
alignment会使孩子在框中居中。
foregroundDecoration在文本上覆盖一个图片。最后,
transform对整个装置施加轻微的旋转以完成效果。

上一篇 下一篇

猜你喜欢

热点阅读