Flutter布局之Container

Container

简介

​ 官方给出的简介，是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。

布局特点

• 如果没有子节点、没有设置width、height以及constraints，并且父节点没有设置unbounded的限制，Container会将自身调整到足够小。
• 如果没有子节点、对齐方式（alignment），但是提供了width、height或者constraints，那么Container会根据自身以及父节点的限制，将自身调节到足够小。
• 如果没有子节点、width、height、constraints以及alignment，但是父节点提供了bounded限制，那么Container会按照父节点的限制，将自身调整到足够大。
• 如果有alignment，父节点提供了unbounded限制，那么Container将会调节自身尺寸来包住child;
• 如果有alignment，并且父节点提供了bounded限制，那么Container会将自身调整的足够大（在父节点的范围内），然后将child根据alignment调整位置；
• 含有child，但是没有width、height、constraints以及alignment，Container会将父节点的constraints传递给child，并且根据child调整自身。​

使用场景

Container是一个相对功能比较多的Widget,用它来做一些复杂的布局,例如
​

• 需要设置间隔,使用margin padding . 如果只需要padding,也可以直接用Padding.
• 需要对齐 使用alignment
• 需要设置背景色或者背景图片的时候 使用color
• 需要边框,圆角,阴影 使用deoration

注意:deoration和 color： 背景颜色不能共存，二者同时只能有一个

构造方法

 Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

简单的例子

效果

先来看看效果

这个Demo涵盖了Container的基本用法.

• 宽度和高度
• margin和padding
• 对齐的方式
• 背景
• 边框
• 阴影

实现

Widget _buildContainerText() {
    return Container(
      padding: EdgeInsets.all(10.0),
      margin: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.red),
          borderRadius: BorderRadius.circular(10.0),
          color: Colors.blueAccent,
          boxShadow: [
            BoxShadow(
              offset: Offset(0.0, 5.0),
              color: Colors.blueAccent,
              blurRadius: 10.0,
              spreadRadius: -5.0,
            ),
          ]),
      child: Text("我是示例代码", style: TextStyle(color: Colors.white)),
    );
  }

参考

https://juejin.im/post/5b13c3e1f265da6e3d666d80