Container详解
Container是一个拥有绘制、定位、调整大小的widget。
padding和margin
padding和margin分别设置Container的内边距和外边距。可取值包括下面四个：
- EdgeInsets.all(50)：设置所有的padding为同一个值50。
- EdgeInsets.only(left: 50,right: 50)：只设置左边和右边。
- EdgeInsets.fromLTRB(50,10,50,10)：分别设置左上右下的值为50、10。
- EdgeInsets.symmetric(vertical: 10,horizontal: 50)：如果上下或者左右的padding值一样可以指定vertical的值为上下的padding值。horizontal指定左右的padding值。
Scaffold(
appBar: AppBar(title: Text('Container')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.only(left: 50,right: 50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.fromLTRB(50, 10, 50, 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"确定",
style: TextStyle(color: Colors.red),
),
),
],
),
)),
width和height
width和height指定宽高，如果不指定则为子widget的宽高。如果想要完全撑满父容器，可以将width和height设置为double.infinity。
decoration
decoration经常被用来改变一个Container的展示效果。其概念类似与android中的shape。一般实际场景中会使用他的子类BoxDecoration。BoxDecoration提供了对背景色，边框，圆角，阴影和渐变等功能的定制能力。
image: DecorationImage设置一张图片作为背景。border: Border设置边界。borderRadius: BorderRadius设置边界圆角。当shape是BoxShape.circle设置borderRadius将不起作用shape: BoxShape设置形状。gradient设置渐变。可选值包括三种类型的渐变LinearGradient、RadialGradient、SweepGradient。
Scaffold(
appBar: AppBar(title: Text('BorderRadius')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.yellow,
//设置图片
image: DecorationImage(
fit: BoxFit.fitWidth,
image: NetworkImage(
'https://flutter.io/images/catalog-widget-placeholder.png',
),
),
//设置边界
border: Border.all(color: Colors.deepOrange, width: 3),
//设置阴影
boxShadow: const [
BoxShadow(blurRadius: 10),
],
//设置边界圆角
borderRadius: BorderRadius.all(Radius.circular(18))),
),
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: RadialGradient(
//渐变
colors: const [
Colors.green,
Colors.deepOrange,
Colors.pinkAccent,
Colors.deepPurple
],
),
//设置边界圆角
shape: BoxShape.circle,
),
)
],
),
),
),
2.Column和Row
MainAxisAlignment
Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Column(
children: <Widget>[
Text("MainAxisAlignment.start",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.center",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceAround",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceBetween",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceEvenly",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.end",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
)
],
),
),
crossAxisAlignment
Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Column(
children: <Widget>[
Text("CrossAxisAlignment.start",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
),
Text("CrossAxisAlignment.center",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
),
Text(" CrossAxisAlignment.end",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
)
],
),
),
