Container(容器控件)在Flutter是经常使用的控件,它就相当于我们HTML里的<div>标签,每个页面或者说每个视图都离不开它。其实容器的作用就是方便我们进行布局的。
Alignment属性
这个属性针对的是Container内child的对齐方式,也就是容器子内容的对齐方式,并不是容器本身的对齐方式。
建立一个容器,然后容器内加入一段文字 "Hello World", 并让它居中对齐。
body: Center(
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40),
),
alignment:Alignment.center,
),
),
我们从上图可以看到alignment的属性:
- bottomCenter:下部居中对齐。
- botomLeft: 下部左对齐。
- bottomRight:下部右对齐。
- center:纵横双向居中对齐。
- centerLeft:纵向居中横向居左对齐。
- centerRight:纵向居中横向居右对齐。
- topLeft:顶部左侧对齐。
- topCenter:顶部居中对齐。
- topRight: 顶部居左对齐。
设置宽、高和颜色属性
设置宽高只需要在属性名称后面加入浮点型数字就可以了,颜色设置和之前一样。
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40.0,color: Colors.purple),
),
alignment:Alignment.center,
width: 400.0,
height: 500.0,
color: Colors.blueAccent,
),
padding属性
padding的属性就是一个内边距,指的是Container边缘和child内容的距离。
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40.0,color: Colors.purple),
),
alignment:Alignment.topLeft,
width: 400.0,
height: 500.0,
color: Colors.blueAccent,
padding: const EdgeInsets.all(20),
),
或者使用
EdgeInsets.fromLTRB(left, top, right, bottom),
可以为左上右下设置不同的数值:
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40.0,color: Colors.purple),
),
alignment:Alignment.topLeft,
width: 400.0,
height: 500.0,
color: Colors.blueAccent,
// padding: const EdgeInsets.all(20),
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
),
margin属性
margin是外边距,指的是container和外部元素的距离。用法与padding相同:
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40.0, color: Colors.purple),
),
alignment: Alignment.topLeft,
width: 400.0,
height: 500.0,
color: Colors.blueAccent,
// padding: const EdgeInsets.all(20),
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
margin: const EdgeInsets.all(20),
// margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
),
decoration属性
decoration是 container 的修饰器,主要的功能是设置背景和边框。
需要注意的是,当使用decoration设置背景时,就不能使用color属性了。
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40.0, color: Colors.purple),
),
alignment: Alignment.topLeft,
width: 400.0,
height: 500.0,
// color: Colors.blueAccent,
// padding: const EdgeInsets.all(20),
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
margin: const EdgeInsets.all(20),
// margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
decoration: BoxDecoration(color: Colors.amber,),
),
下面把背景色设置为渐变色,代码如下:
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40.0, color: Colors.purple),
),
alignment: Alignment.topLeft,
width: 400.0,
height: 500.0,
// color: Colors.blueAccent,
// padding: const EdgeInsets.all(20),
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
margin: const EdgeInsets.all(20),
// margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
decoration: BoxDecoration(
color: const Color(0xFF00FFFF),
// color: Color.fromRGBO(0, 255, 255, 0.1)
gradient: LinearGradient(
colors: [Colors.blueAccent, Colors.amber, Colors.purpleAccent],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
tileMode: TileMode.mirror,
stops: [0.1, 0.5, 0.8])
// gradient: RadialGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple])
// gradient: SweepGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple],
// center: Alignment.centerLeft)
),
),
设置边框
设置边框可以在decoration里设置border属性:
child: Container(
child: Text(
"Hello World",
style: TextStyle(fontSize: 40.0, color: Colors.purple),
),
alignment: Alignment.topLeft,
width: 400.0,
height: 500.0,
// color: Colors.blueAccent,
// padding: const EdgeInsets.all(20),
padding: const EdgeInsets.fromLTRB(20, 50, 0, 0),
margin: const EdgeInsets.all(20),
// margin: const EdgeInsets.fromLTRB(20, 0, 0, 0),
// color: const Color(0xFF00FFFF),
decoration: BoxDecoration(
// color: Color.fromRGBO(0, 255, 255, 0.1)
gradient: LinearGradient(
colors: [
Colors.blueAccent,
Colors.purpleAccent,
Colors.amber,
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
tileMode: TileMode.mirror,
stops: [0.1, 0.5, 0.8]),
// gradient: RadialGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple])
// gradient: SweepGradient(colors: [Colors.blueAccent,Colors.amber,Colors.purple],
// center: Alignment.centerLeft)
// border: Border.all(width: 2.0, color: Colors.red),
border: Border(
left: BorderSide(color: Colors.red, width: 3.0),
top: BorderSide(color: Colors.black, width: 3.0),
right: BorderSide(color: Colors.green, width: 3.0),
bottom: BorderSide(color: Colors.deepPurpleAccent, width: 5.0),
)),
),
从代码中可以看出,设置边界可以用Border.all(),或者分别设置左上右下的边界。