认识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组件差不多就这些常用的属性 还有一些鄙人不熟悉也没用过望大佬给予补充~

转载于:https://juejin.im/post/5c4ed014f265da613c0a2ac9