Flutter Widget-Container文档翻译(纯业余勿喷)

221 阅读2分钟

Container class

类容器

A convenience widget that combines common painting, positioning, and sizing widgets.

一个集渲染、定位、尺寸大小等功能的便捷组件(部件)

A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorporating the width and height as constraints, if either is non-null). The container is then surrounded by additional empty space described from the margin.

这个容器部件,有常见的padding、margin、width、height属性,纯理解翻译,非专业,哈哈。

During painting, the container first applies the given transform, then paints the decoration to fill the padded extent, then it paints the child, and finally paints the foregroundDecoration, also filling the padded extent.

渲染过程中,container会先应用transform属性,然后渲染一些装饰性属性去填充内容,然后渲染child,同时渲染一些乱七八糟的装饰属性。

Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The width, height, and constraints arguments to the constructor override this.

如果container内,没有任何元素,那么该容器的大小会填充整个屏幕,除非通过width、height去限制它。如果有子元素,那么容器会根据child的大小适配,而且可以调整一些其他属性padding、margin属性,去渲染出你想要的样子。原文直译不是这个意思哈

By default, containers return false for all hit tests. If the color property is specified, the hit testing is handled by ColoredBox, which always returns true. If the decoration or foregroundDecoration properties are specified, hit testing is handled by Decoration.hitTest.

默认状态下,container会返回一个false,在hit test的时候。举个栗子:如果设定了color属性,那么会由ColorBox来处理hit test,这个情况就一直返回true。设置什么属性,就会有相应的处理人。

官方例子

Center(
  child: Container(
    margin: const EdgeInsets.all(10.0),
    color: Colors.amber[600],
    width: 48.0,
    height: 48.0,
  ),
)

这是一个48*48的正方形,背景色黄色。

Container(
  constraints: BoxConstraints.expand(
    height: Theme.of(context).textTheme.headline4!.fontSize! * 1.1 + 200.0,
  ),
  padding: const EdgeInsets.all(8.0),
  color: Colors.blue[600],
  alignment: Alignment.center,
  child: Text('Hello World',
    style: Theme.of(context)
        .textTheme
        .headline4!
        .copyWith(color: Colors.white)),
  transform: Matrix4.rotationZ(0.1),
)

这块示例的代码,就有问题了,编译会报错,问题出现在!感叹号。

貌似生了2.0,这玩意儿换了?我去除之后,就完美呈现该示例

摸鱼至此,溜了溜了,白。。。