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