Web 开发者如何理解 Flutter 布局之 —— 2. Container

弘树
1,363 阅读4分钟

容器组件。

  • 通过盒约束(BoxConstraints)可定义表现(行级/块级)

  • 通过边界嵌入(EdgeInsets)可定义边距(内边距[padding]/外边距[margin])

  • 通过装饰(BoxDecoration)可定义边框、投影、渐变等

  • 通过对齐(Alignment)可设置对齐方式

1、约束

1.1、无约束

类似于行级元素,跟随内容的增大而增大。

Container(
  child: Text("A convenience widget that combines common painting, positioning, and sizing widgets.")
)

等效于:

<span>
  A convenience widget that combines common painting, positioning, and sizing widgets.
</span>

1.2、约束最大尺寸

Container(
  child: Text("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."),
  constraints: BoxConstraints(
    maxWidth: 200.0,
    maxHeight: 200.0
  )
)

等效于:

<div
  style=
  "
    max-width: 200px;
    max-height: 200px;
  "
>
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.
</div>

1.3、约束最小尺寸

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints(
    minWidth: 200.0,
    minHeight: 200.0
  )
)

等效于:

<div
  style=
  "
    min-width: 200px;
    min-height: 200px;
  "
>
  Hello Flutter!
</div>

1.4、扩展至父级元素尺寸

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand()
)

等效于:

<div
  style=
  "
    width: 100%;
    height: 100%;
  "
>
  Hello Flutter!
</div>

1.5、设置固定尺寸

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand(
    width: 200.0,
    height: 200.0
  )
)

等效于:

<div
  style=
  "
    width: 200px;
    height: 200px;
  "
>
  Hello Flutter!
</div>

2、边距

2.1、单独设置

需要单独设置某方向边距时,可以使用EdgeInsets.only()

Container(
  child: Text("Hello Flutter!"),
  padding: EdgeInsets.only(
    top: 10.0,
    left: 5.0
  )
)

等效于:

<div
  style=
  "
    padding-top: 10px;
    padding-left: 5px;
  "
>
  Hello Flutter!
</div>

2.2、全部设置

所有方向边距统一时,可以使用 EdgeInsets.all()

Container(
  child: Text("Hello Flutter!"),
  padding: EdgeInsets.all(10.0)
)

等效于:

<div
  style=
  "padding: 10px;"
>
  Hello Flutter!
</div>

2.3、对称设置

只需要设置单独方向,可以使用 EdgeInsets.symmetric()

Container(
  child: Text("Hello Flutter!"),
  padding: EdgeInsets.symmetric(
    vertical: 10.0,
    horizontal: 15.0
  )
)

等效于:

<div
  style=
  "padding: 10px 15px 10px 15px;"
>
  Hello Flutter!
</div>

2.4、分别快速设置

缩写声明,可以使用 EdgeInsets.fromLTRB(l, t, r, b)

Container(
  child: Text("Hello Flutter!"),
  padding: EdgeInsets.fromLTRB(5.0, 10.0, 15.0, 20.0)
)

等效于:

<div
  style=
  "
    padding-left: 5px;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
  "
>
  Hello Flutter!
</div>

3、装饰

3.0、【这里有坑】

装饰属性存在时,背景色应写在BoxDecoration中,若BoxDecoration与外层的样式属性冲突,则会报错。

报错指出,container的 color 是其 BoxDecoration.color 的快捷方式,无法同时存在。

具体情况请参见下面的示例:

坑

Container(
  child: Text("Hello Flutter!"),
  //此时,由于存在 BoxDecoration, 此处 color 会报错
  color: Colors.deepPurple,
  decoration: BoxDecoration(
    color: Colors.deepPurple
  )
)

错误详细信息:

Cannot provide both a color and a decoration The color argument is just a shorthand for "decoration: BoxDecoration(color: color)".

3.1、设置边框

Container(
  child: Text("Hello Flutter!"),
  decoration: BoxDecoration(
    border: Border.all(
      width: 2.0,
      style: BorderStyle.solid,
      color: Color(0xFF000000)
    )
  )
)

等效于:

<div
  style=
  "border: 2px solid #000000FF;"
>
  Hello Flutter!
</div>

3.2、设置投影

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand(
    width: 200.0,
    height: 200.0
  ),
  decoration: BoxDecoration(
    //此处与webview有差异:若不设置背景色,视为容器透明,此时容器中央以投影颜色显示并向边界径向发散
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Color(0xFFFF0000),
        offset: Offset(5.0, 10.0),
        blurRadius: 15.0
      )
    ]
  )
)

等效于:

<div
  style=
  "
    width: 200px;
    height: 200px;
    box-shadow: 5px 10px 15px #FF0000FF;
  "
>
  Hello Flutter!
</div>

3.3、设置渐变

3.3.1、默认线性渐变

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand(
    width: 200.0,
    height: 200.0
  ),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xFF6A11CB),
        Color(0xFF2575FC)
      ]
    )
  )
)

等效于:

<div
  style=
  "
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to right, #6A11CBFF, #2575FCFF);
  "
>
  Hello Flutter!
</div>

3.3.1、设置渐变方位

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand(
    width: 200.0,
    height: 200.0
  ),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Color(0xFF6A11CB),
        Color(0xFF2575FC)
      ],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter
    )
  )
)

等效于:

<div
   style=
   "
      width: 200px;
      height: 200px;
      background-image: linear-gradient(to bottom, #6A11CBFF, #2575FCFF);
   "
>
  Hello Flutter!
</div>

3.3.1、径向渐变

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand(
    width: 200.0,
    height: 200.0
  ),
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [
        Color(0xFF6A11CB),
        Color(0xFF2575FC)
      ],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter
    )
  )
)

等效于:

<div
  style=
  "
    width: 200px;
    height: 200px;
    background-image: radial-gradient(#6A11CBFF, #2575FCFF);
  "
>
  Hello Flutter!
</div>

3.4、设置背景图片

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand(
    width: 200.0,
    height: 200.0
  ),
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/images/thumbnail.png"),
      fit: boxfit.cover
    )
  )
)

等效于:

<div
  style=
  "
    width: 200px;
    height: 200px;
    background-image: url('assets/images/thumbnail.png');
    background-size: cover;
  "
>
  <span>Hello Flutter!</span>
</div>

注: 如需为 container 引入背景图,你应在 "pubspec.yaml" 的 assets 字段中声明它们。 具体操作请参考:

插入本地资源图片 juejin.cn/post/684490…

3.5、设置圆角

Container(
  child: Text("Hello Flutter!"),
  constraints: BoxConstraints.expand(
    width: 200.0,
    height: 200.0
  ),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.all(5.0)
  )
)

等效于:

<div
  style=
  "
    width: 200px;
    height: 200px;
    background-color: blue;
    border-radius: 5px;
  "
>
  <span>Hello Flutter!</span>
</div>

参考文献

[1] Flutter从0到1构建大前端应用 何瑞君 2019年7月 ISBN: 978-7-121-36179-1 p48~p51

avatar
文章
阅读
粉丝