Flutter深入浅出组件篇---Container、AnimatedContainer

Container介绍

如果组件需要一些背景样式、形状、尺寸限制就可以用Container来进行包裹子组件用于装饰和定位，所以Container 是一个组合类容器。它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器。

示例代码

本文中很多效果都没有截图，可下载源代码运行项目 源代码地址，或者通过视频教程查看 视频教程地址

什么情况下使用Container？

当你需要对一个组件需要有多个限制时就用Container，比如需要通过对一个盒子同时进行固定大小、背景颜色、圆角设置等。

Container构造函数

Container({
  Key? key,
  this.alignment,
  this.padding,
  this.color,
  this.decoration,
  this.foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  this.margin,
  this.transform,
  this.transformAlignment,
  this.child,
  this.clipBehavior = Clip.none,
}) : assert(margin == null || margin.isNonNegative),
     assert(padding == null || padding.isNonNegative),
     assert(decoration == null || decoration.debugAssertIsValid()),
     assert(constraints == null || constraints.debugAssertIsValid()),
     assert(clipBehavior != null),
     assert(decoration != null || clipBehavior == Clip.none),
     assert(color == null || decoration == null,
       'Cannot provide both a color and a decoration\n'
       'To provide both, use "decoration: BoxDecoration(color: color)".',
     ),
     constraints =
      (width != null || height != null)
        ? constraints?.tighten(width: width, height: height)
          ?? BoxConstraints.tightFor(width: width, height: height)
        : constraints,
     super(key: key);

Container属性和说明

字段	属性	描述
color	Color	盒子的背景颜色
child	Widget	子组件
width	double	盒子的宽度
height	double	盒子的高度
alignment	AlignmentGeometry	子组件的对齐方式
padding	EdgeInsetsGeometry	盒子的内边距
margin	EdgeInsetsGeometry	盒子的外边距
decoration	Decoration	盒子的背景装饰
foregroundDecoration	Decoration	盒子的前景装饰
constraints	BoxConstraints	盒子的额外约束
transform	Matrix4	矩阵变化，类型为Matrix4，即四阶矩阵
transformAlignment	AlignmentGeometry	变换锚点的方向
clipBehavior	Clip	组件内容边缘的裁剪方式

Container详细使用

1、color、child

Container(
  color: Colors.pink,
  child: Text("Jimi",
     style: TextStyle(
         color: Colors.white,
         fontSize: 30
     ),
   ),
)

效果展示

2、width、height

Container(
  color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
),

效果展示

3、alignment

Container(
  color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
),

效果展示

4、padding、margin

Container(
  color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
),

效果展示

5、decoration

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
),

效果展示

6、foregroundDecoration

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  foregroundDecoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.orange,
        Colors.purple
      ]
    ),
  ),
),

效果展示

7、Constraints

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
  constraints: BoxConstraints(
    maxWidth: 100
  ),
),

效果展示

8、transform

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
  transform: Matrix4.rotationZ(0.3),
),

效果展示

9、transformAlignment

Container(
  // color: Colors.pink,
  child: Text(
    "Jimi",
    style: TextStyle(color: Colors.white, fontSize: 30),
  ),
  width: 200,
  height: 200,
  alignment: Alignment.center,
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.greenAccent,
    // borderRadius: BorderRadius.circular(100),
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.blue
      ]
    ),
  ),
  transform: Matrix4.rotationZ(0.3),
  transformAlignment: Alignment.center,
),

效果展示

AnimatedContainer

它是Container的动画版本，比如我们需要在改变宽高、颜色、矩阵边换等需要增加动画效果时，那我们就使用AnimatedContainer

AnimatedContainer基本使用

import 'package:flutter/material.dart';

class ContainerExample extends StatefulWidget {
  @override
  _ContainerExampleState createState() => _ContainerExampleState();
}

class _ContainerExampleState extends State<ContainerExample> {

  var color = Colors.orange;
  var width = 200.0;
  var height = 200.0;
  var matrix4Value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ContainerExample"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            AnimatedContainer(
              width: width,
              height: height,
              color: color,
              duration: Duration(milliseconds: 1000),
              transform: Matrix4.rotationZ(matrix4Value),
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: ElevatedButton(
                onPressed: (){
                  setState(() {
                    color = Colors.blue;
                  });
                },
                child: Text("改变颜色"),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: ElevatedButton(
                onPressed: (){
                  setState(() {
                    width = 100;
                    height = 400;
                  });
                },
                child: Text("改变宽高"),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: ElevatedButton(
                onPressed: (){
                  setState(() {
                    matrix4Value = 0.3;
                  });
                },
                child: Text("矩阵转换"),
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果展示

总结

Container 是一个组合型容器，当你需要对一个组件需要有多个限制时就用Container，上面介绍了Container的大小、位置、间距、装饰、限制、转换 等介绍。

AnimatedContainer则是在Container的基础上增加了动画效果。