Flutter 之 Container （十）

1. Container 介绍

Container在开发中被使用的频率是非常高的，特别是我们经常会将其作为容器组件

Container是一个组合类容器，它本身不对应具体的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。下面是Container的定义

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
  ...
})

• 容器的大小可以通过width、height属性来指定，也可以通过constraints来指定；如果它们同时存在时，width、height优先。实际上Container内部会根据width、height来生成一个constraints。
• color和decoration是互斥的，如果同时设置它们则会报错！实际上，当指定color时，Container内会自动创建一个decoration。

Container 大小

• 如果小部件没有子级、没有高度、没有宽度、没有约束，并且父级提供了无界约束，那么 Container 会尝试尽可能小。

• 如果小部件没有子元素且没有对齐，但提供了高度、宽度或约束，则容器会在这些约束和父约束的组合下尝试尽可能小。

• 如果小部件没有子级、没有高度、没有宽度、没有约束、没有对齐，但父级提供有界约束，则 Container 会扩展以适应父级提供的约束。

• 如果小部件具有对齐方式，并且父级提供无界约束，则容器会尝试围绕子级调整自身大小。

• 如果小部件具有对齐方式，并且父级提供有界约束，则 Container 会尝试扩展以适应父级，然后根据对齐方式将子级定位在自身内部。

• 否则，小部件有一个孩子，但没有高度、宽度、约束和对齐方式，并且容器将约束从父级传递给子级，并调整自身的大小以匹配子级。

       assert(color == null || decoration == null,
         'Cannot provide both a color and a decoration\n'
         'To provide both, use "decoration: BoxDecoration(color: color)".',
       ),

2. 示例

class ContainerDemo1 extends StatelessWidget {
  const ContainerDemo1({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.red,
      width: 200,
      height: 200,
      // 对齐方式
      alignment: Alignment(0, 0),
      // 内边距
      // padding: EdgeInsets.all(50),
      // 外边距
      // margin: EdgeInsets.all(20),
      // 旋转
      // transform: Matrix4.rotationZ(50),
      decoration: BoxDecoration(
        color: Colors.red,
        // 边框
        border: Border.all(
          width: 5,
          color: Colors.purple,
        ),
        // 圆角
        // borderRadius: BorderRadius.circular(100),
        // 阴影
        boxShadow: [
          BoxShadow(
              color: Colors.orange, offset: Offset(10, 20), blurRadius: 10),
          BoxShadow(
              color: Colors.blue, offset: Offset(-10, 10), blurRadius: 10),
        ],
      ),
      // child: Icon(
      //   Icons.pets,
      //   size: 50,
      // ),

      child: Text(
        "Hello World",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}

image.png

3. Padding和Margin

...
Container(
  margin: EdgeInsets.all(20.0), //容器外补白
  color: Colors.orange,
  child: Text("Hello world!"),
),
Container(
  padding: EdgeInsets.all(20.0), //容器内补白
  color: Colors.orange,
  child: Text("Hello world!"),
),
...

image.png

可以发现，直观的感觉就是margin的留白是在容器外部，而padding的留白是在容器内部，读者需要记住这个差异。事实上，Container内margin和padding都是通过Padding 组件来实现的，上面的示例代码实际上等价于：

...
Padding(
  padding: EdgeInsets.all(20.0),
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.orange),
    child: Text("Hello world!"),
  ),
),
DecoratedBox(
  decoration: BoxDecoration(color: Colors.orange),
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text("Hello world!"),
  ),
),
...    

4. 圆角图片

class ContainerDemo3 extends StatelessWidget {
  const ContainerDemo3({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: FractionalOffset(0.5, 0.2),
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          image: DecorationImage(
            image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
          ),
        ),
      ),
    );
  }
}

image.png

参考：https://book.flutterchina.club/chapter5/container.html