认识Flutter组件篇之Container组件

Container容器组件视图布局必不可少的组件,是一个能够绘制，定位，调整大小的组件，相似于html中的div

Container

它有几个经常使用属性:

1. alignment 用于定位子元素(child)的位置 Alignment.topLeft 顶部居左对齐

   Alignment.topCenter 顶部居中对齐

   Alignment.topRight 顶部居右对齐

   Alignment.center 横纵双向居中对齐

   Alignment.centerLeft 纵向居中横向居左对齐

   Alignment.centerRight 纵向居中横向居右对齐

   Alignment.bottomCenter 下部居中对齐

   Alignment.bottomLeft 下部左对齐

   Alignment.bottomRight 下部右对齐

2. constraints 约束

   constraints: new BoxConstraints(
       maxHeight: 123,
       maxWidth: 123,
       minHeight: 123,
       minWidth: 123
   ),
   复制代码

   用来限制最大宽高，最小宽高

3. padding 内边距 跟前端的padding差很少

   padding: const EdgeInsets.all(10.0) 上下左右内边距距离

   padding: const EdgeInsets.fromLTRB(left, top, right, bottom) 左上右下内边距距离

   padding: const EdgeInsets.only(
       left: 10.0, 
       top: 10.0,
       right: 10.0,
       bottom: 10.0
   ),
   复制代码

   左上右下内边距距离 能够想设置那边设置那边

   const EdgeInsets.symmetric(
       vertical = 0.0,
       horizontal = 0.0 
   )
    left = horizontal, top = vertical, right = horizontal, bottom = vertical;    
   复制代码

   设置水平 垂直的内边距距离

4. margin 外边距 参数跟padding内边距同样

5. decoration decoration是container的装饰器 能够设置边框，边框圆角，阴影，背景图，渐变色，形状，背景色等等举例几个其他望读者去看文档 thanks~

   decoration: new BoxDecoration(
       color: Colors.black,
   ),
   复制代码

   注意这块设置颜色外面container就不要设置color了否则会报错

   decoration: new BoxDecoration(
       border: Border.all(width: 2.0,color: Colors.green)
   )
   复制代码

   设置上下左右边的宽度跟颜色

   decoration: const BoxDecoration(
       border: Border(
           top: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
           left: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
           right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
           bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
       ),
   ),
   复制代码

   本身选择设置上下左右边的宽度颜色

   borderRadius:  new BorderRadius.all(Radius.circular(10))
   复制代码

   边框的四个角画一个圆

   borderRadius:  new BorderRadius.all(Radius.elliptical(10, 20))
   复制代码

   边框的四个角画一个椭圆

   borderRadius:  new BorderRadius.circular(10)
   复制代码

   边框的四个角画一个圆

   borderRadius:  new BorderRadius.horizontal(
       left: Radius.circular(10),
       right: Radius.circular(10)
   )
   topLeft: left,
   topRight: right,
   bottomLeft: left,
   bottomRight: right,
   复制代码

   边框的水平方向设置圆角

   borderRadius: new BorderRadius.only(
       topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
       bottomLeft: Radius.circular(10),
       bottomRight: Radius.circular(10)
   ),
   复制代码

   本身设置左上右上左下右下的圆角

   borderRadius: new BorderRadius.vertical(
       top: Radius.circular(10), 
       bottom: Radius.circular(10)
   ),
   topLeft: top,
   topRight: top,
   bottomLeft: bottom,
   bottomRight: bottom,
   复制代码

   边框的垂直方向设置圆角

6. transform 容器的转换 具体细节 看文档吧 transform

container组件差很少就这些经常使用的属性 还有一些鄙人不熟悉也没用过望大佬给予补充~