容器组件Container
Container是一个组合类容器，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景。
Container({
super.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,
})
alignment
alignment属性将以 10 种不同的方式对齐容器的子项。
topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight
Container(
alignment: Alignment.bottomRight,
color: Colors.blue,
width: 150.0,
height: 100.0,
child: const Text("Hello Container")
)
constraints
容器扩展以填充给定的大小，constraints将 BoxConstraints 类作为输入。BoxModel 中有许多可用的构造函数。其中一些是tightForFinite, loose, tight,tightFor等。下面创建一个带有需要给定宽度或高度的约束的框。
Container(
//constraints: BoxConstraints.loose(Size(100.0,150.0)),//松约束
constraints: const BoxConstraints.tightForFinite(width: 200.0,height:100.0),//紧约束
alignment: Alignment.center,
color: Colors.blue,
child: const Text("Hello Container")
),
可以在构造函数中定义maxWidth, maxHeight, minWidth, minHeight。
BoxConstraints(
maxHeight: 100,
maxWidth: 100,
minHeight: 80,
minWidth: 80
),
transform
它可以帮助我们应用矩阵变换来根据我们的要求绘制我们的容器/盒子。
transform采用Matrix4类，它有许多有用的构造函数，如rotationX(), rotationY(), rotationZ(), skew(),translation()等。
Container(
transform: Matrix4.rotationZ(0.2),
width: 200,
height: 100,
color: Colors.green,
child: const Text('Hello Container'),
),
transformAlignment
原点对齐，对齐方式与容器的大小有关。只有使用transform的情况下才会生效。
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height:60.0,
width: 100.0,
color:Colors.green,
transform: Matrix4.rotationZ(0.5),
transformAlignment: Alignment.topLeft,
child:const Center(child:Text("topLeft")),
),
Container(
height:60.0,
width: 100.0,
color:Colors.blue,
transform: Matrix4.rotationZ(0.5),
transformAlignment: Alignment.topCenter,
child:const Center(child:Text("topCenter")),
),
Container(
height:60.0,
width: 100.0,
color:Colors.red,
transform: Matrix4.rotationZ(0.5),
transformAlignment: Alignment.topRight,
child:const Center(child:Text("topRight")),
),
],
),
foregroundDecoration
前景装饰。
Container(
foregroundDecoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: Colors.red),
boxShadow: const [
BoxShadow(
color: Colors.purple,
blurRadius: 5.0,
spreadRadius: 5.0
)
]
),
width: 200,
height: 100,
),
DecoratedBox
DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。其构造：
const DecoratedBox({
super.key,
required this.decoration,//类型为Decoration
this.position = DecorationPosition.background,//此属性决定在哪里绘制Decoration，它接收DecorationPosition的枚举类型,background：在子组件之后绘制，即背景装饰,foreground：在子组件之上绘制，即前景
super.child,
})
BoxDecoration
BoxDecoration类，它是一个Decoration的子类，实现了常用的装饰元素的绘制,其构造:
const BoxDecoration({
this.color,//颜色
this.image,//图片
this.border,//边框
this.borderRadius,//圆角
this.boxShadow,//阴影,可以指定多个
this.gradient,//渐变
this.backgroundBlendMode,//背景混合，负责将 BoxDecoration 中颜色/渐变，以及 BoxDecoration 上的任何内容混合一起
this.shape = BoxShape.rectangle,//形状
})
下划线 or 分隔线
Container(
padding: const EdgeInsets.only(left: 30,right: 30,top: 10,bottom: 10),
decoration: const BoxDecoration(
border: Border(
//下划线位置、线宽、颜色
bottom:BorderSide(width: 2.0,color: Colors.red),
)
),
child:const Text('我是下划线！'),
)
Container(
width: double.infinity,
height: 40,
alignment: Alignment.center,
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0,color: Colors.red),
)
),
child: const Text('我是分割线'),
)
圆角背景 or 圆角线框
Container(
height: 50,
width: 200,
alignment: Alignment.center,
decoration: const BoxDecoration(
//背景颜色
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(25.0)),
),
child: const Text('圆角背景',style: TextStyle(color: Colors.white),),
)
Container(
height: 50,
width: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(25.0)),
border: Border.all(
width: 1.0,
color: Colors.blue,
)
),
child: const Text('圆角线框',style: TextStyle(color: Colors.blue),),
)
圆形背景 or 圆形线框
Container(
width: 100,
height: 100,
alignment: Alignment.center,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue,
),
child: const Text('圆形背景',style: TextStyle(color: Colors.white),),
),
Container(
width: 100,
height: 100,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.blue),
),
child: const Text('圆形背景',style: TextStyle(color: Colors.blue),),
),
添加阴影
Container(
width: 80,
height: 80,
alignment: Alignment.center,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 6
)
]
),
child: const Text('阴影',style: TextStyle(color: Colors.blue),),
),
渐变
线性渐变
构造函数：
const LinearGradient({
this.begin = Alignment.centerLeft,//渐变开始的偏移量
this.end = Alignment.centerRight,//渐变结束的偏移量
required super.colors,//颜色列表
super.stops,//从 0.0 到 1.0 的值列表，表示沿梯度的分数
this.tileMode = TileMode.clamp,
super.transform,
})
Container(
width: 80,
height: 80,
alignment: Alignment.center,
decoration: const BoxDecoration(
shape: BoxShape.circle,
//线性变性
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.blue,Colors.purple],
)
),
child: const Text('线性渐变',style: TextStyle(color: Colors.white),),
)
弧形渐变
构造函数：
const SweepGradient({
this.center = Alignment.center,
this.startAngle = 0.0,//放置渐变的开始 0.0 的角度（以弧度表示）
this.endAngle = math.pi * 2,//放置渐变停止 1.0 的角度（以弧度表示）
required super.colors,
super.stops,
this.tileMode = TileMode.clamp,
super.transform,
})
Container(
width: 80,
height: 80,
alignment: Alignment.center,
decoration: const BoxDecoration(
shape: BoxShape.circle,
//弧形变性
gradient: SweepGradient(
colors: [
Colors.red,
Colors.blue,
Colors.yellow,
Colors.green,
Colors.red,
],
center: FractionalOffset.center,
startAngle: 0.0,
endAngle: math.pi * 2,
stops: [0,0.25,0.5,0.75,1],
)
),
child: const Text('弧形渐变',style: TextStyle(color: Colors.white),),
),
扩散性渐变
构造函数：
const RadialGradient({
this.center = Alignment.center,
this.radius = 0.5,//渐变的半径
required super.colors,//颜色列表
super.stops,//从 0.0 到 1.0 的值列表，表示沿梯度的分数。
this.tileMode = TileMode.clamp,
this.focal,//渐变的焦点。
this.focalRadius = 0.0,//渐变焦点的半径
super.transform,
})
Container(
width: 80,
height: 80,
alignment: Alignment.center,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
radius: 0.6,
colors: [Colors.red,Colors.blue],
stops: [0.2,0.9]
)
),
child: const Text('扩散渐变',style: TextStyle(color: Colors.white),),
)
设置背景图片DecorationImage
AssetImage
Container(
width: double.infinity,
height: 300,
decoration: const BoxDecoration(
color: Colors.blue,
//设置背景图
image: DecorationImage(
image: AssetImage('images/liu.webp'),
fit: BoxFit.cover,//图片填充方式
alignment: Alignment.center,//图片位置
repeat: ImageRepeat.noRepeat,//图片是否重复
)
),
child: const Center(child: Text('DecorationImage-AssetImage')),
)
ExactAssetImage
Container(
width: double.infinity,
height: 300,
decoration: const BoxDecoration(
color: Colors.blue,
//设置背景图
image: DecorationImage(
image: ExactAssetImage('images/liu.webp'),
fit: BoxFit.cover,//图片填充方式
alignment: Alignment.center,//图片位置
repeat: ImageRepeat.noRepeat,//图片是否重复
)
),
child: const Center(child: Text('DecorationImage-ExactAssetImage')),
)
NetworkImage
Container(
width: double.infinity,
height: 250,
decoration: const BoxDecoration(
color: Colors.blue,
//设置背景图
image: DecorationImage(
image: NetworkImage('https://cdn.tehub.com/uploads/9x1MQZaDYV/b/a2Y7VFyUxy/5b87afe9-66aa-4b41-85e0-d8ad514b9080.webp'),
fit: BoxFit.cover,//图片填充方式
alignment: Alignment.center,//图片位置
repeat: ImageRepeat.noRepeat,//图片是否重复
)
),
child: const Center(child: Text('DecorationImage-NetworkImage')),
),
设置背景图片模糊度colorFilter
要设置背景图像的透明度或不透明度，可以传递colorFilter参数，ColorFilter不透明度为 0.2 的 。混合模式设置为dstATop。
Container(
width: double.infinity,
height: 250,
decoration: BoxDecoration(
//设置背景图
image: DecorationImage(
image: const AssetImage('images/liu.webp'),
fit: BoxFit.cover,//图片填充方式
alignment: Alignment.center,//图片位置
repeat: ImageRepeat.noRepeat,//图片是否重复
colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
)
),
child: const Center(child: Text('DecorationImage-AssetImage')),
),
DecoratedBox(
decoration: BoxDecoration(
color: Colors.red,//背景颜色
// image: const DecorationImage(//背景图片
// image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
// fit: BoxFit.cover,
// ),
border:Border.all( //设置边框
width: 2,
color: Colors.green,
),
borderRadius:BorderRadius.circular(5.0),//设置圆角
boxShadow:const [//设置阴影
BoxShadow(
color: Colors.black54,
offset: Offset(2.0,2.0),
blurRadius: 4.0
),
],
//背景渐变
gradient:LinearGradient(colors:[Colors.red,Colors.orange.shade700]),
backgroundBlendMode: BlendMode.colorDodge,
//shape:BoxShape.circle,//形状
),
child: Text('装饰元素'),
),
美图一张
