容器组件（Container）
容器组件（Container）包含一个子 Widget，自身具备如 alignment、padding 等基础属性，方便布局过程中摆放 child。
Container 组件常用属性见下表：
| 属性名 | 类型 | 说明 |
|---|---|---|
| key | Key | Container 唯一标识符，用于查找更新 |
| alignment | AlignmentGeometry | 控制 child 的对齐方式，如果 Container 或者 Container 父节点尺寸大于 child 的尺寸，这个属性设置会起作用，有很多种对齐方式 |
| padding | EdgelnsetsGeometry | Decoration 内部的空白区域，如果有 child 的话， child 位于 padding 内部 |
| color | Color | 用来设置 Container 背景色，如果 foregroundDecoration 设置的话，可能会遮盖 color 效果 |
| decoration | Decoration | 绘制在 child 后面的装饰，设置了 Decoration 的话，就不能设 置 color 属性，否则会报错，此时应该在 Decoration 中进行颜色的设置 |
| foregroundDecoration | Decoration | 绘制在 child前面的装饰 |
| width | double | Container 的宽度，设置为 double.infinity 可以强制在宽度上撑满，不设置， 则根据 child 和父节点两者一起布局 |
| height | double | Container 的高度，设置为 double.infinity 即可以强制在高度上撑满 |
| constraints | BoxConstraints | 添加到 child 上额外的约束条件 |
| margin | EdgelnsetsGeometry | 围绕在 Decoration 和 child 之外的空白区域，不属于内容区域 |
| transform | Matrix4 | 设置 Container 的变换矩阵，类型为 Matrix4 |
| child | Widget | Container 中的内容 Widget |
padding 与 margin 的不同之处在于， padding 是包含在 Content 内 ，而 margin 是外部边界。设置点击事件的话 ， padding 区域会响应 ， 而 margin 区域不会响应 。
有两点需要说明：
- 容器的大小可以通过 width、height 属性来指定，也可以通过 constraints 来指定，如果同时存在时，width、height 优先。实际上 Container 内部会根据width、height 来生成一个constraints。
- color 和 decoration 是互斥的，实际上，当指定 color 时，Container 内会自动创建一个 decoration。
接下来我们编写一个带有装饰效果的 Container容器组件示例，示例代码 如下:
import ’package:flutter/material.dart ’;
void main() => runApp(ContainerTest());
class ContainerTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 我们想使用 material 风格的应用，所以这里用 MaterialApp
return MaterialApp(
// 移动设备使用这个 title 来表示我们的应用。具体一点说，在 Android 设备里，我们点击
// recent 按钮打开最近应用列表的时候，显示的就是这个 title。
title: '容器组件示例',
home: Scaffold(
appBar: AppBar(
title: Text('容器组件示例'),
centerTitle: true,
),
body: Column(
children: <Widget>[
//添加容器
Container(
margin: EdgeInsets.only(top: 20, left: 120),
width: 200,
height: 200,
//添加边框装饰效果
decoration: BoxDecoration(
color: Colors.white,
//设置上下左右四个边框样式
border: Border.all(
//边框颜色
color: Colors.grey,
//边框粗细
width: 8,
),
//边框弧度
borderRadius: const BorderRadius.all(const Radius.circular(8)),
),
//容器内文字居中
alignment: Alignment.center,
child: Text(
'Flutter',
//textAlign: TextAlign.center,
style: TextStyle(fontSize: 28),
),
),
Container(
//容器外补白
margin: EdgeInsets.only(top: 50, left: 120),
//卡片大小
constraints: BoxConstraints.tightFor(width: 200, height: 150),
decoration: BoxDecoration(
//背景径向渐变
gradient: RadialGradient(
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98,
),
//卡片阴影
boxShadow: [
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4,
),
],
),
//卡片倾斜变换
transform: Matrix4.rotationZ(.2),
//卡片内文字居中
alignment: Alignment.center,
//卡片文字
child: Text(
'5.20',
style: TextStyle(color: Colors.white, fontSize: 40),
),
)
],
),
),
);
}
}
上述示例代码视图展现大致如下图所示。
接下来我们看一个用 Container进行容器布局的综合小例子，完整的示例代码如下 :
import 'package:flutter/material.dart';
import 'ContainerTest.dart';
void main() => runApp(MyApp());
// 这个 widget 作用这个应用的顶层 widget.
//这个 widget 是无状态的，所以我们继承的是 [StatelessWidget].
//对应的，有状态的 widget 可以继承 [StatefulWidget]
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 我们想使用 material 风格的应用，所以这里用 MaterialApp
return MaterialApp(
// 移动设备使用这个 title 来表示我们的应用。具体一点说，在 Android 设备里，我们点击
// recent 按钮打开最近应用列表的时候，显示的就是这个 title。
title: 'Welcome to Flutter',
// 应用的“主页”
home: ContainerTest(),
);
}
}
class ContainerTest extends StatelessWidget {
@override
Widget build(BuildContext context) {
//返回一个Container 对象
Widget container = Container(
//添加装饰效果
decoration: BoxDecoration(
color: Colors.grey,
),
//子元素指定为一个垂直水平嵌套布局的组件
child: Column(
children: <Widget>[
Row(
children: <Widget>[
//使用Expanded防止内容溢出
Expanded(
child: Container(
width: 150,
height: 150,
//添加边框样式
decoration: BoxDecoration(
//上下左右边框设置为宽度 10，颜色为蓝灰色
border: Border.all(width: 10, color: Colors.blueGrey),
//上下左右边框弧度设置为 8.0
borderRadius:
const BorderRadius.all(const Radius.circular(8)),
),
//上下左右增加边距
margin: const EdgeInsets.all(4),
//添加图片
child: Image.asset("images/avator.png"),
),
),
Expanded(
child: Container(
width: 150,
height: 150,
//添加边框样式
decoration: BoxDecoration(
//上下左右边框设置为宽度 10，颜色为蓝灰色
border: Border.all(width: 10, color: Colors.blueGrey),
//上下左右边框弧度设置为 8.0
borderRadius:
const BorderRadius.all(const Radius.circular(8)),
),
//上下左右增加边距
margin: const EdgeInsets.all(4),
//添加图片
child: Image.asset("images/avator.png"),
),
),
],
),
Row(
children: <Widget>[
//使用Expanded防止内容溢出
Expanded(
child: Container(
width: 150,
height: 150,
//添加边框样式
decoration: BoxDecoration(
//上下左右边框设置为宽度 10，颜色为蓝灰色
border: Border.all(width: 10, color: Colors.blueGrey),
//上下左右边框弧度设置为 8.0
borderRadius:
const BorderRadius.all(const Radius.circular(8)),
),
//上下左右增加边距
margin: const EdgeInsets.all(4),
//添加图片
child: Image.asset("images/avator.png"),
),
),
Expanded(
child: Container(
width: 150,
height: 150,
//添加边框样式
decoration: BoxDecoration(
//上下左右边框设置为宽度 10，颜色为蓝灰色
border: Border.all(width: 10, color: Colors.blueGrey),
//上下左右边框弧度设置为 8.0
borderRadius:
const BorderRadius.all(const Radius.circular(8)),
),
//上下左右增加边距
margin: const EdgeInsets.all(4),
//添加图片
child: Image.asset("images/avator.png"),
),
),
],
),
],
),
);
return Scaffold(
appBar: AppBar(
title: Text('Container 布局容器示例'),
centerTitle: true,
),
body: container,
);
}
}
上述示例代码的视图展现大致如下图所示。
网友评论