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

Container介绍

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

示例代码

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

什么情况下使用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
     ),
   ),
)

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第1张图片

2、width、height

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

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第2张图片

3、alignment

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

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第3张图片

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),
),

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第4张图片

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
      ]
    ),
  ),
),

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第5张图片

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
      ]
    ),
  ),
),

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第6张图片

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
  ),
),

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第7张图片

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),
),

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第8张图片

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,
),

效果展示

Flutter深入浅出组件篇---Container、AnimatedContainer_第9张图片

AnimatedContainer

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

AnimatedContainer基本使用

import 'package:flutter/material.dart';

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

class _ContainerExampleState extends State {

  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的基础上增加了动画效果。

你可能感兴趣的