Flutter Widget之Container

Flutter跨平台方案的横空出世, 其接近原生的体验, 吸引了一大批的开发者纷纷入坑; 某些知名大厂也已经在原有项目中引入了Flutter; 再不学习就晚了(可能现在已经晚了); 那就让我们开始吧

对于Flutter来说 万物皆Widget, 让我想起来那句经典的万物皆对象 今天就来聊聊一个基础的Widget --- Container

源码中可以看到Container中包含以下属性, 是时候揭开它神秘的面纱了

Container({
  this.alignment,
  this.padding, 
  Color color, 
  Decoration decoration, 
  Decoration foregroundDecoration, 
  double width,
  double height,
  BoxConstraints constraints, 
  this.margin,
  this.transform, 
  this.child,
})

1. alignment
   alignment是用来控制Container中子组件的排列方式, 常用的值
   • Alignment.topLeft 左上
   • Alignment.topCenter 上中
   • Alignment.topRight 右上
   • Alignment.centerLeft 左中
   • Alignment.center 居中
   • Alignment.centerRight 右中
   • Alignment.bottomLeft 左下
   • Alignment.bottomCenter 下中
   • Alignment.bottomRight 右下

//示例代码
 Container(
      alignment: Alignment.center,
      color: Colors.red,
      width: 100.0,
      height: 100.0,
      child: Container(
        width: 30.0,
        height: 30.0,
        color: Colors.green,
      ) 
      )

2. margin padding 设置内外边距

• EdgeInsets.all(value) 用于设置四个方向上一样的值
• EdgeInsets.only(left:leftV, right: rightV, top: topV, bottom: bottomV) 可以单独设置某个方向的值
• EdgeInsets.symmetric(horizontal: horV, vertical: verV) 用于设置水平/垂直方向上的值
• EdgeInsets.fromLTRB(left, top, right, bottom) 按照左上右下的顺序设置4个方向的值

//示例代码
Container(
        margin: EdgeInsets.only(top: 10.0, left: 10.0),
        padding: EdgeInsets.only(left: 10,top: 10),
        width: 30.0,
        height: 30.0,
        color: Colors.green,
      ) 

3. color 用来设置Container的背景颜色, 设置颜色用到Color类,
   color属性和decoration属性不能同时存在, 如果同时存在会报错
   The following assertion was thrown building HomeController(dirty): Cannot provide both a color and a decoration The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".
   在使用decoration属性的时候想设置Container的背景颜色, 可以设置decoration的color属性

   • Colors.red
   • Color(0xFFFF0000)

4. decoration 背景装饰 decoration的功能非常强大, 可以设置边框 阴影 渐变 圆角 通常会用BoxDecoration示例来设置这些属性

   • 边框 Border

Container(
      decoration: BoxDecoration(
        color: Colors.red,
        border: Border.all(width: 2, color: Colors.blue, style: BorderStyle.solid),
        borderRadius: BorderRadius.all(new Radius.circular(4.0)),
      )
      )
    )
//同时设置4条边框
border: Border.all(color: Colors.orange, width: 2, style: BorderStyle.solid)
// 设置单边框
border:Border(
        top: BorderSide(color: Colors.red, width: 2, style: BorderStyle.solid),
        bottom: BorderSide(color: Colors.blue, width: 2, style: BorderStyle.solid)
      )

• 阴影 BoxShadow
  • Offset(double dx, double dy) dx 阴影水平偏移量,如果为正值,则阴影在对象右边, 反之在对象左边. dy 阴影的垂直偏移量, 如果为正值,则阴影在对象底部, 反之在对象顶部
  • blurRadius 阴影模糊半径, 只能是正数, 其值为0时,表示阴影不具有模糊效果, 值越大阴影的边缘就越模糊
  • spreadRadius 阴影扩展半径, 其值可正可负, 如果是正值, 则整个阴影都延展扩大, 反之则缩小
  • color 阴影颜色

Container(
      decoration: BoxDecoration(
        color: Colors.red,
        boxShadow: [
           BoxShadow(
            color: Colors.black45,
             offset: Offset(2.0, 2.0),
             blurRadius: 4.0
           )
         ],
      ),
      )

  BoxShadow(
          offset: Offset(-10, -10),
          blurRadius: 6,
          spreadRadius: 10,
          color: Colors.purple
        )

• 渐变 flutter支持线性渐变和径向渐变

Container(
      decoration: BoxDecoration(
        color: Colors.red,
        gradient: RadialGradient(
          colors: [Colors.red, Colors.green],
          center: Alignment.topLeft,
          radius: .98
        ),
      ),
      width: 100.0,
      height: 100.0,
      )
//线性渐变
    gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [Colors.red, Colors.green]
      )
//从中心向四周扩散
   gradient: RadialGradient(
        center: Alignment.center,
        colors: [Colors.green, Colors.red]
      )

• 圆角 BorderRadius类用来设置圆角

//同时设置四个角的圆角
borderRadius: BorderRadius.circular(10)

//设置单个角的圆角
 borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10),
        bottomLeft: Radius.circular(20)
      )

5. foregroundDecoration
   前景装饰, 用法和decoration 一样

6. constraints
   constraints可以用来限制容器的宽高 minWidth maxWidth minHeight maxHeight 使用如下

容器的大小可以通过width、height属性来指定，也可以通过constraints来指定，
如果同时存在时，width、height优先。实际上Container内部会根据width、height来生成一个constraints。
 constraints: BoxConstraints(
       minHeight: 100,
       maxHeight: 200,
       minWidth: 100,
       maxWidth: 200
     ),

7. transform
   transform主要包括 平移 缩放 旋转 倾斜, 使用矩阵变换类Matrix4来实现变换
   • Matrix4.translationValues(x, y, z), 平移x y z
   • Matrix4.rotationZ(radians), z轴旋转radians弧度
   • Matrix4.rotationX(radians), x轴旋转radians弧度
   • Matrix4.rotationY(radians), y轴旋转radians弧度
   • Matrix4.skew(alpha, beta) x轴倾斜alpha度, y轴倾斜beta度
   • skewX(alpha) x轴倾斜alpha度
   • skewY(alpha) Y轴倾斜alpha度

Container(
        color: Colors.red,
        width: 200,
        height: 200,
        constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
        transform: Matrix4.rotationZ(.2),
      )