第三节 Container 组件的使用
目录
Container(容器控件)在Flutter是经常使用的控件之一,其作用是方便我们进行布局,对布局进行统一规划。
一、alignment属性
alignment是用来控制容器内子内容的对齐方式,对其方式有:
bottomCenter
:下部居中对齐。botomLeft
: 下部左对齐。bottomRight
:下部右对齐。center
:居中对齐。centerLeft
:纵向居中,横向居左对齐。centerRight
:纵向居中,横向居右对齐。topLeft
:顶部左侧对齐。topCenter
:顶部居中对齐。topRight
: 顶部居左对齐。
接下来看一下效果。
新建一个Container,并在容器内加入一段文字,然后让文字显示在页面右下角。
代码如下:
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "Hello world",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Hello world"),
),
body: new Center(
child: Container(
child: new Text(
"Hello World",
style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
),
alignment: AlignmentDirectional.bottomEnd,
),
),
),
);
}
}
效果图:
二、 设置容器的宽、高和颜色属性
这里我们进行width 、 height 、 color 属性的配置。设置宽为500.0,高是200.0,颜色为黑色。
代码如下:
child: Container(
width: 500.0,
height: 200.0,
color: Colors.black,
child: new Text(
"Hello World",
style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
),
alignment: AlignmentDirectional.bottomEnd,
),
效果图:
三、padding属性
padding:内边距,指的是Container边缘和child内容之间的距离。
我们设置左、上边距为0,右边距为20.0,下边距为50.0,代码如下:
child: Container(
width: 500.0,
height: 200.0,
color: Colors.black,
child: new Text(
"Hello World",
style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
),
alignment: AlignmentDirectional.bottomEnd,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 20.0, 50.0),
),
说明:EdgeInsets.fromLTRB(value1,value2,value3,value4) ,value1,value2,value3,value4分别代表左、上、右、下。
如果我们设置的上、下、左、右边距都是相同的,则可以使用
padding: EdgeInsets.all(20.0),
EdgeInsets.all(double value)来设置,源码如下:
const EdgeInsets.all(double value)
: left = value,
top = value,
right = value,
bottom = value;
四、margin属性
margin:外边距,指的是container和外部元素的距离。
我们设置左边距为20.0、上边距为20.0,右边距为20.0,下边距为20.0,代码如下:
child: Container(
width: 500.0,
height: 200.0,
color: Colors.black,
child: new Text(
"Hello World",
style: new TextStyle(fontSize: 20.0, color: Colors.lightBlue),
),
alignment: AlignmentDirectional.bottomEnd,
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
),
说明:EdgeInsets.fromLTRB(value1,value2,value3,value4) ,value1,value2,value3,value4分别代表左、上、右、下。
如果我们设置的上、下、左、右边距都是相同的,则可以使用
padding: EdgeInsets.all(20.0),
五、decoration属性
注:decoration和color不能同时使用,同时使用会发生冲突。
decoration:用来为container设置背景和边框。
实际项目中对效果的要求还是相当高的,有时需要设置渐变背景,不用美工切图,一样可以做出渐变效果。这时候就需要使用BoxDecoration这个类了。
代码如下:
child: Container(
width: 500.0,
height: 200.0,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.redAccent,
Colors.greenAccent,
Colors.blueAccent
])),
child: new Text(
"Hello World",
style: new TextStyle(fontSize: 20.0, color: Colors.white),
),
alignment: AlignmentDirectional.bottomEnd,
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
),
效果图:
通过decoration的border属性 ,可以为其添加边框。设置一个黑色边框,宽度为2。
代码如下:
child: Container(
width: 500.0,
height: 200.0,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Colors.redAccent,
Colors.greenAccent,
Colors.blueAccent
]),
border: Border.all(color: Colors.black, width: 2.0)),
child: new Text(
"Hello World",
style: new TextStyle(fontSize: 20.0, color: Colors.white),
),
alignment: AlignmentDirectional.bottomEnd,
padding: EdgeInsets.all(20.0),
margin: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
),
效果图: