我们在上一章回中介绍了Row和Column两种Widget,本章回中将介绍 Container这种Widget,闲话休提,让我们一起Talk Flutter吧。
概念介绍
Container
是一种布局类Widget,它主要用来存放其它的Widget,比如我们在上一章回中介绍的Row和Column。它相当于一种Widget容器,它提供了相关的成员变量来修改容器的属性,进而影响到容器中其它的Widget.常用的的属性有长度、宽度,背景颜色等。
常用功能
Container
类提供了相应的成员来控制自身的属性,我们只需要给成员赋值就可以修改它的属性,常用的成员如下:
width: 用来控制它的宽度
height: 用来控制它的长度
alignment: 用来控制被它包含widget的对齐方式
padding: 用来控制它的内边距
margin: 用来控制它的外边距
transform: 用来控制它的平移和旋转
decoration: 用来装饰它的外表,比如边框和背景图片或者背景颜色
示例代码
Widget wechatBottom = Container(
width: 900,
height: 100,
alignment: Alignment.center,
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(20),
transform: Matrix4.rotationZ(0.2),
transformAlignment: Alignment.bottomCenter,
decoration: BoxDecoration(
color: Colors.green[300],
border: Border.all(color: Colors.red,width: 3),
borderRadius:BorderRadius.all(Radius.circular(20)) ),
child: Row( //row中的代码复用上一章回中的代码,这里省略不写
),
);
在上面的代码中,我们设置了布局(container)的长度和宽度,以及内外边距,给布局在z方向上做了旋转,最后是在布局的外侧添加了一个红色边框,边框进行了圆角设计,同时在边框内使用咖啡色背景。编译并且运行上面的程序可以得到以下效果。
看官们,关于Container Widget的内容就介绍到这里,欢迎大家在评论区交流与讨论!