乐趣区

关于flutter:Flutter深入浅出组件篇ContainerAnimatedContainer

jiezi

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 的根底上减少了动画成果。

退出移动版