Flutter中的div——Container
将Container
比做成Flutter
中的div
并不恰当,但这并不妨碍前端同学用Container
做为起点来学习Flutter
。Flutter
官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container
的基础用法开始。
Container基础用法
通过color
属性生成一个黄色的Container
Container(
color: Colors.yellow,
);
复制代码
通过margin
属性设置这个Container
的外边距
Container(
color: Colors.yellow,
margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
)
复制代码
通过decoration
属性来将这个Container
设置成圆形,注意Container
的color
属性和decoration
属性只能存其一,不能同时提供
Container(
margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.yellow,
),
)
复制代码
为Container
加一个绿色的child Container
,此时child会充满父widget的空间
Container(
color: Colors.yellow,
child: Container(
color: Colors.green,
),
);
复制代码
为子Container
设置宽高并通过alignment
属性使其居中:
Container(
color: Colors.yellow,
alignment: Alignment.center,
child: Container(
color: Colors.green,
width: 200,
height: 100,
),
);
复制代码
通过margin
来使其居中
Container(
color: Colors.yellow,
child: Container(
color: Colors.green,
margin: EdgeInsets.fromLTRB(100, 300, 100, 300),
),
);
复制代码
加入一个文本做为其child,能看到左上角的文本吗?
Container(
color: Colors.yellow,
child: Text(
"快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
);
复制代码
使用alignment
属性来设置child
widget的对齐方式,通常使用Alignment
类来设置对其方式
Container(
color: Colors.yellow,
child: Text(
"快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
alignment: Alignment.centerLeft, // Alignment.bottomRight ...
);
复制代码
通过另一个Container
来包住这个Text
,并设置居中
Container(
color: Colors.yellow,
alignment: Alignment.center,
child: Container(
color: Colors.green,
child: Text(
"快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
),
);
复制代码
使用padding
属性设置一下子Container
的内边距
Container(
color: Colors.yellow,
alignment: Alignment.center,
child: Container(
color: Colors.green,
padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
child: Text(
"快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
),
);
复制代码
使用transform
属性可以进行矩阵转换相关的设置, 通常我们都是用它来做旋转
Container(
color: Colors.yellow,
child: Container(
color: Colors.green,
margin: EdgeInsets.fromLTRB(100, 200, 100, 300),
transform: Matrix4.rotationZ(0.2),
),
);
复制代码
使用decoration
属性还可以设置Container
的内边距、圆角、背景图、边框和阴影等,主要是用于装饰背景
Container(
color: Colors.yellow,
alignment: Alignment.center,
child: Container(
padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
decoration: BoxDecoration(
// 背景色
color: Colors.green,
// 圆角
borderRadius: BorderRadius.circular(10),
// 边框
border: Border.all(
color: Colors.black54,
width: 2,
),
// 阴影
boxShadow: [
BoxShadow(
color: Colors.pink,
blurRadius: 5.0,
),
],
// 背景图片
image: DecorationImage(
image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
alignment: Alignment.centerLeft,
),
),
child: Text(
"快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
),
);
复制代码
decoration
与 foregroundDecoration
有点像css中::before
和::after
,区别是绘制顺序不同,foregroundDecoration
可以用来装饰前景
// 使用decoration去设置
Container(
color: Colors.yellow,
alignment: Alignment.center,
margin: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
transform: Matrix4.rotationZ(0.2),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
alignment: Alignment.center,
),
),
child: Text(
"快狗打车快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
),
)
复制代码
// 使用foregroundDecoration去设置
Container(
color: Colors.yellow,
alignment: Alignment.center,
margin: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.fromLTRB(100, 20, 100, 20),
transform: Matrix4.rotationZ(0.2),
foregroundDecoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
alignment: Alignment.center,
),
),
child: Text(
"快狗打车快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
),
)
复制代码
效果对比:
可以看到,使用
foregroundDecoration
设置背景图时,背景图图片会盖在文字上方,使用decoration
则相反
使用constraints
来设置约束,用来约束自身,描述当前widget所允许占用的空间大小,通常使用BoxConstraint
来设置约束条件。这里约束了子Container
的最大和最小宽高
child Container无child的情况下,子Container
会使用约束允许的最大高度和最大宽度,
Container(
color: Colors.yellow,
alignment: Alignment.centerLeft,
child: Container(
color: Colors.green,
constraints: BoxConstraints(
maxHeight: 300,
maxWidth: 300,
minHeight: 100,
minWidth: 100
),
),
);
复制代码
child Container有child的情况,子Container
会根据它的child的大小和约束来布局,本例中由于Text
文本widget所占用的空间并未达到约束规定的最小空间,即最小宽高,这里直接按照约束中的最小宽高进行布局
Container(
color: Colors.yellow,
alignment: Alignment.centerLeft,
child: Container(
color: Colors.green,
constraints: BoxConstraints(
maxHeight: 300,
maxWidth: 300,
minHeight: 50,
minWidth: 100
),
child: Text(
"快狗打车",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.black),
),
),
);
复制代码
如果将上面例子中Text
widget所需要占用的空间变大,例如将字体变大,则Text
的父Container
按最大约束空间进行布局
Container(
color: Colors.yellow,
alignment: Alignment.centerLeft,
child: Container(
color: Colors.green,
constraints: BoxConstraints(
maxHeight: 300,
maxWidth: 300,
minHeight: 50,
minWidth: 100
),
child: Text(
"快狗打车",
textDirection: TextDirection.ltr,
fontSize: 300,
style: TextStyle(color: Colors.black),
),
),
);
复制代码
以上就是Container
的基本用法
作者:快狗打车前端团队
链接:https://juejin.im/post/5ebcddcdf265da7c030dc7e7
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。