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.png
我们从上图可以看到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),
),
padding_all.png
或者使用
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,),
),
decoration.png
下面把背景色设置为渐变色，代码如下：
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)
),
),
gradient.jpg
设置边框
设置边框可以在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.jpg
从代码中可以看出，设置边界可以用Border.all()，或者分别设置左上右下的边界。
网友评论