Flutter之Container
1、Container介绍
我们先看它的构造方法
Container({
Key key,
this.alignment,
this.padding, //容器内补白,属于decoration的装饰范围
Color color, // 背景色
Decoration decoration, // 背景装饰
Decoration foregroundDecoration, //前景装饰
double width,//容器的宽度
double height, //容器的高度
BoxConstraints constraints, //容器大小的限制条件
this.margin,//容器外补白,不属于decoration的装饰范围
this.transform, //变换
this.child,
this.clipBehavior = Clip.none,
})
Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器,所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景
2、代码测试
代码测试1、
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
title: Text('hello flutter'),
),
body: Container(
margin: EdgeInsets.only(top: 50, left: 50),
constraints: BoxConstraints.tightFor(width: 200, height: 150),
decoration: BoxDecoration(
gradient: RadialGradient( //背景径向渐变
colors: [Colors.red, Colors.orange],
center: Alignment.topLeft,
radius: .98
),
borderRadius:BorderRadius.all(Radius.circular(5)),
boxShadow: [ //卡片阴影
BoxShadow(
color: Colors.black54,
offset: Offset(2.0, 2.0),
blurRadius: 4.0
)
]
),
alignment: Alignment.center,
child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
),
),
);
}
代码测试2、
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
title: Text('hello flutter'),
),
body: Padding(
padding: EdgeInsets.all(30),
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.blue
),
child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
),
)
),
);
}
代码测试3、
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
title: Text('hello flutter'),
),
body: DecoratedBox(
decoration: BoxDecoration(
color: Colors.blue
),
child: Padding(
padding: EdgeInsets.all(40),
child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
),
),
),
);
}
代码测试4、
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
title: Text('hello flutter'),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("chenyu1"),
Text("chenyu2"),
Container(
margin: EdgeInsets.all(20),
color: Colors.red,
child: Text("chenyu3", style: TextStyle(fontSize: 40, color: Colors.white)),
),
Container(
padding: EdgeInsets.all(20),
color: Colors.red,
child: Text("chenyu4", style: TextStyle(fontSize: 40, color: Colors.white)),
),
],
),
),
);
}
3、运行结果
4、总结
Container(
margin: EdgeInsets.all(20.0), //容器外补白
color: Colors.orange,
child: Text("Hello world!"),
),
Container(
padding: EdgeInsets.all(20.0), //容器内补白
color: Colors.orange,
child: Text("Hello world!"),
),
等价下面的代码
Padding(
padding: EdgeInsets.all(20.0),
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Text("Hello world!"),
),
),
DecoratedBox(
decoration: BoxDecoration(color: Colors.orange),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Text("Hello world!"),
),
),
赞 (0)