Container(容器)
属性 | 作用 |
---|
child | 配置容器内部的布局 |
padding | 设置容器内部的距离 |
alignment | 设置容器内容的对齐方式 |
color | 设置容器背景颜色 |
margin | 设置容器外部的距离 |
decoration | 配置容器的外部的样式 |
constraints | 配置容器的外部的约束,最大小宽、最大小高度 |
width | 设置容器的宽 |
height | 设置容器的高 |
import 'package:flutter/material.dart';
class CustomContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topLeft,
width: 200,
height: 200,
color: Colors.red,
);
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5c00e005dde64c4c9395fee951d48b5d.jpeg#pic_center)
import 'package:flutter/material.dart';
class ContainerWithChild extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topLeft,
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
width: 200,
height: 200,
color: Colors.grey,
child: Icon(Icons.android),
);
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5ff9bd3ea5903d500dd250324d501e98.jpeg#pic_center)
import 'package:flutter/material.dart';
class ContainerAlignment extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.bottomRight,
width: 200,
height: 200,
color: Colors.grey,
child: Icon(
Icons.android,
color: Colors.green,
),
);
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c1db6c30a9ab51ccbf75ab87a221d71d.jpeg#pic_center)
- 添加一个装饰容器的布局
需要注意的是,当装饰器里面设置了Color背景颜色,则Container的Color属性不能使用,二者只取其一
import 'package:flutter/material.dart';
class ContainerDecoration extends StatelessWidget {
final List<int> rainbow = [
0xffff0000,
0xffFF7F00,
0xffFFFF00,
0xff00FF00,
0xff00FFFF,
0xff0000FF,
0xff8B00FF
];
final List<double> stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0];
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
width: 200,
height: 200,
margin: EdgeInsets.all(20),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
stops: stops,
colors: rainbow.map((e) => Color(e)).toList()),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
bottomRight: Radius.circular(50)),
boxShadow: [
BoxShadow(
color: Colors.grey,
offset: Offset(1, 1),
blurRadius: 10,
spreadRadius: 1),
]),
child: Text(
"Container",
style: TextStyle(fontSize: 20),
),
);
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f88213086859286a46c92832e65d0571.jpeg#pic_center)
import 'package:flutter/material.dart';
class ContainerConstraints extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
width: 200,
height: 200,
constraints: BoxConstraints(
minWidth: 100, maxWidth: 150,
minHeight: 20, maxHeight: 100),
);
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/348eec4052628eca25d1e4890838bafb.jpeg#pic_center)