Container组件

一、介绍

container类似前端中的 div,语法:container(child:组件),意思就是容器,里面只能放一个组件。

二、属性:

1. alignment对齐方式:

topCenter:顶部居中对齐

topLeft:顶部左对齐

topRight:顶部右对齐

center:水平垂直居中对齐

centerLeft:垂直居中水平居左对齐

centerRight:垂直居中水平居右对齐

bottomCenter 底部居中对齐

bottomLeft:底部居左对齐

bottomRight:底部居右对齐

2.decoration装饰:

color颜色 

语法  color: Colors.blue [颜色为蓝色]

border边框

语法  border: Border.all(color: Colors.red,width: 2.0) [全部边框颜色为红色,粗细为2]

margin 外边距

 margin 属性是表示 Container 与外部其他组件的距离。                                            语法  margin:EdgeInsets.all(20.0) [上下左右边距为20]

padding内边距

padding 就 是 Container 的 内 边 距 , 指Container 边缘与 Child 之间的距离          语法  padding: EdgeInsets.all(10.0) [上下左右内边距为10]

transform变换,可以让container旋转等等

语法  transform: Matrix4.rotationZ(0.2)

width、height 宽、高

语法  width:120.0, height: 30.0 [容器宽120,高30]

child 容器子元素

语法 child:Text("你好")[容器的子元素为“你好”的文本,child后边也可以跟Row和Column,但只能跟一个哦;]

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容