共计 3991 个字符,预计需要花费 10 分钟才能阅读完成。
构造函数
首先我们来看一下 Container 的构造函数
Container({
this.alignment, // 设置子元素的对齐方式
this.padding, // 容器内边距,属于 decoration 的装饰范围
Color color, // 背景色
Decoration decoration, // 背景装饰
Decoration foregroundDecoration, // 前景装饰
double width,// 容器的宽度
double height, // 容器的高度
BoxConstraints constraints, // 容器大小的限制条件
this.margin,// 容器外补白,不属于 decoration 的装饰范围
this.transform, // 变换
this.child,
})
-
alignment:设置子
widget
的在container
中的对齐方式,其对齐方式有:-
alignment:Alignment.bottomCenter;
// 居中下对齐 -
alignment:Alignment.bottomLeft;
// 左下角对齐 -
alignment:Alignment.bottomRight;
// 右下角对齐 -
alignment:Alignment.center;
// 居中对齐 -
alignment:Alignment.centerLeft;
// 居中左对齐 -
alignment:Alignment.centerRight;
// 居中有对齐 -
alignment:Alignment.topCenter;
// 居中上对齐 -
alignment:Alignment.topRight;
// 右上角对齐 -
alignment:Alignment.topLeft;
// 左上角对齐
-
-
padding: 设置 container 的内边距
- 分别设置内边距:
padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0),
, 这里的top
,bottom
,left
,right
可以根据自己需求设置,不一定每个都要设置,不设置的就是0.0
。 - 转圈设置:
padding:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0),
LTRB 分别代表left
,top
,right
,bottom
。 - 水平垂直方向设置:
padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0),
当你的上下,左右的内边距是堆成的,那么这时候可以用这个属性来设置vertical
代表垂直方向,horizontal
代表水平方向.
- 分别设置内边距:
- margin: 设置 container 的外边距,其值的设置方式和 padding 一样
-
color: 设置
container
的背景颜色- 十六进制表示方法:
color: Color(0xffFFFFFF),
这里的0x
是固定的,ff
代表颜色的透明度,后面的六位代表颜色的值 -
ARGB 表示方法:
color: Color.fromARGB(2, 29, 30, 10),
-
A
透明度,取值范围是 0~255; -
R
红色,取值范围是 0~255; -
G
绿色,取值范围是 0~255; -
B
蓝色,取值范围是 0~255。
-
-
RGBO 表示方法:
color: Color.fromRGBO(20, 30, 100, .9),
-
R
红色,取值范围是 0~255; -
G
绿色,取值范围是 0~255; -
B
蓝色,取值范围是 0~255; -
O
透明度,取值范围是 0~1;
-
- 十六进制表示方法:
-
width:container 的宽,用
double
类型的数字表示 -
height:container 的高,用
double
类型的数字表示 -
child:container 的子
widget
练习
练习一:container 的宽高背景色
- 设置一个正方形,宽 200.0,高 200.0,背景颜色为黑色
import 'package:flutter/material.dart';
class Teach extends StatefulWidget {
@override
_TeachState createState() => _TeachState();
}
class _TeachState extends State<Teach> {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text('Container'),),
body: Container(
width: 200.0,// 设置宽
height: 200.0,// 设置高
color: Color(0xff000000),// 设置颜色
),
);
}
}
练习二:container 的透明度
- 设置一个正方形,宽 200.0,高 200.0,背景色为黑色,透明度为 0.3
import 'package:flutter/material.dart';
class Teach extends StatefulWidget {
@override
_TeachState createState() => _TeachState();
}
class _TeachState extends State<Teach> {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text('Container'),),
body: Container(
width: 200.0,// 设置宽
height: 200.0,// 设置高
color: Color.fromRGBO(0, 0, 0, .3),// 设置颜色,.3 代表透明度,也可以写成 0.3
),
);
}
}
练习三:container 的外边距 margin
- 这是一个正方形,宽高自定义,距离顶部 300.0,距离左边 100.0
import 'package:flutter/material.dart';
class Teach extends StatefulWidget {
@override
_TeachState createState() => _TeachState();
}
class _TeachState extends State<Teach> {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text('Container'),),
body: Container(margin: EdgeInsets.only(top: 300.0,left: 100.0),
width: 200.0,// 设置宽
height: 200.0,// 设置高
// 这里的颜色可以用单词的形式来设置
color: Colors.red,
),
);
}
}
练习四:container 的子 widget
-
container
不设置宽高的时候,默认是撑满父widget
的
import 'package:flutter/material.dart';
class Teach extends StatefulWidget {
@override
_TeachState createState() => _TeachState();
}
class _TeachState extends State<Teach> {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text('Container'),),
body: Container(color: Colors.red,)
);
}
}
- 当给
container
一个设置了宽高的widget
以后,container
的大小就跟子container
的宽高一样
import 'package:flutter/material.dart';
class Teach extends StatefulWidget {
@override
_TeachState createState() => _TeachState();
}
class _TeachState extends State<Teach> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container'),
),
body: Container(
color: Colors.red,
child: Container(
width: 200.0,
height: 200.0,
color: Color.fromRGBO(0, 0, 0, .2), // 设置一个透明色的背景,方便看到父 container
),
));
}
}
- 当父
container
设置了宽高以后,子container
的宽高就会失效
import 'package:flutter/material.dart';
class Teach extends StatefulWidget {
@override
_TeachState createState() => _TeachState();
}
class _TeachState extends State<Teach> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Container'),
),
body: Container(
width: 400.0,
height: 400.0,
color: Colors.red,
child: Container(
width: 200.0,
height: 200.0,
color: Color.fromRGBO(0, 0, 0, .5), // 设置一个透明色的背景,方便看到父 container
),
));
}
}
正文完