一、装饰容器

DecoratedBox

DecoratedBox 可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。DecoratedBox 定义如下：

  1. const DecoratedBox({
  2.   Decoration decoration,
  3.   DecorationPosition position = DecorationPosition.background,
  4.   Widget child
  5. })
  • decoration：代表将要绘制的装饰，它的类型为 Decoration。Decoration 是一个抽象类，它定义了一个接口 createBoxPainter()，子类的主要职责是需要通过实现它来创建一个画笔，该画笔用于绘制装饰。
  • position：此属性决定在哪里绘制 Decoration，它接收 DecorationPosition 的枚举类型，该枚举类有两个值：
    • background：在子组件之后绘制，即背景装饰。
    • foreground：在子组件之上绘制，即前景。

BoxDecoration

我们通常会直接使用 BoxDecoration 类，它是一个 Decoration 的子类，实现了常用的装饰元素的绘制。

  1. BoxDecoration({
  2.   Color color, // 颜色
  3.   DecorationImage image, // 图片
  4.   BoxBorder border, // 边框
  5.   BorderRadiusGeometry borderRadius, // 圆角
  6.   List<BoxShadow> boxShadow, // 阴影,可以指定多个
  7.   Gradient gradient, // 渐变
  8.   BlendMode backgroundBlendMode, // 背景混合模式
  9.   BoxShape shape = BoxShape.rectangle, // 形状
  10. })

示例：

  1. DecoratedBox(
  2.   decoration: BoxDecoration(
  3.     gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), // 背景渐变
  4.     borderRadius: BorderRadius.circular(3.0), // 3像素圆角
  5.     boxShadow: [ // 阴影
  6.       BoxShadow(
  7.         color: Colors.black54,
  8.         offset: Offset(2.0,2.0),
  9.         blurRadius: 4.0
  10.       )
  11.     ]
  12.   ),
  13.   child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
  14.     child: Text("Login", style: TextStyle(color: Colors.white),),
  15.   )
  16. )

二、形状

BoxShape 用于定义盒子形状

  • BoxShape.rectangle 矩形
  • BoxShape.circle 圆形

三、颜色

Colors 和 Color 类可以颜色

示例：

  1. Colors.transparent // 透明
  2. Colors.red // Colors.颜色名称, 同 Colors.red[500]
  3. Colors.red[100] // 色彩深度, 取值 100-900, 整数100的倍数
  4. Colors.grey.withOpacity(0.1) // 指定透明度
  5. Color(0xccff0000) // Color(0xAARRGGBB)
  6. Color.fromRGBO(255,0,0,.1) // Color.fromRGBO(R, G, B, O)
  7. Color.fromARGB(.1,255,0,0) // Color.fromARGB(O, R, G, B)

四、透明度

Opacity 组件可以让子元素都保持同样的透明度

示例：

  1. Opacity(
  2.   opacity: _visible ? 1.0 : 0.0, // 1 显示 0 隐藏
  3.   child: const Text('Now you see me, now you don\'t!'),
  4. )

五、边框

Border 定义了边框样式, 可以是多边也可以是单边, BorderSide 定义单边颜色, 参数与 Border.all 一致

示例：

  1. // 所有方向: Border.all(color, width, style)
  2. Border.all(color: Color(0xffff0000), width: 1.0, style: BorderStyle.solid)
  4. // 单方向
  5. Border(
  6.   top: BorderSide(
  7.     color: Color(0xffff0000),
  8.     style: BorderStyle.solid,
  9.     width: 1
  10.   )
  11. )

六、阴影

BoxShadow 的定义了阴影样式

示例：

  1. BoxShadow({
  2.   Color color = const Color(0xFF000000),
  3.   Offset offset = Offset.zero,
  4.   double blurRadius = 0.0,
  5.   this.spreadRadius = 0.0,
  6. })

示例：

  1. BoxShadow(
  2.   color: Colors.red,
  3.   offset: Offset(2.0,2.0),
  4.   blurRadius: 8.0,
  5.   spreadRadius: 4.0
  6. )

七、圆角

BorderRadius 定义了圆角样式, 常用方法有：

  • BorderRadius.circular(radius) 指定四个方向角的圆角值
  • BorderRadius.all(Radius.circular(10)) 指定四个方向角的圆角值
  • BorderRadius.horizontal({Radius right, Radius left}) 指定水平方向的圆角值
  • BorderRadius.vertical({Radius top, Radius bottom}) 指定垂直方向的圆角值
  • BorderRadius.only({Radius right, Radius left, Radius top, Radius bottom}) 指定四个方向的圆角值

示例：

  1. BorderRadius.circular(10)
  2. BorderRadius.all(Radius.circular(10))
  3. BorderRadius.horizontal(right: Radius.circular(10), left: Radius.circular(30))
  4. BorderRadius.vertical(top: Radius.circular(10), bottom: Radius.circular(30))
  5. BorderRadius.only(
  6.   topLeft: Radius.circular(10),
  7.   topRight: Radius.circular(20),
  8.   bottomLeft: Radius.circular(30),
  9.   bottomRight: Radius.circular(40)
  10. )

八、渐变

线性渐变

LinearGradient 的定义：

  1. LinearGradient({
  2.   this.begin = Alignment.centerLeft,
  3.   this.end = Alignment.centerRight,
  4.   @required List<Color> colors,
  5.   List<double> stops,
  6.   this.tileMode = TileMode.clamp,
  7. })

示例：

  1. LinearGradient(
  2.     colors: [Colors.red, Colors.lime],
  3.     begin: Alignment(-3, -3),
  4.     end: Alignment(2,2),
  5.     stops: [0.3, 1]
  6. )

其中 stops 的长度需要与 colors 的长度匹配, 否则报错

径向渐变

RadialGradient 的定义：

  1. RadialGradient({
  2.   this.center = Alignment.center,
  3.   this.radius = 0.5,
  4.   @required List<Color> colors,
  5.   List<double> stops,
  6.   this.tileMode = TileMode.clamp,
  7.   this.focal,
  8.   this.focalRadius = 0.0,
  9. })

示例：

  1. RadialGradient(
  2.   colors: [Colors.red, Colors.lime, Colors.green, Colors.amber],
  3.   stops: [0.1, 0.5, 1, 2],
  4.   radius: 2,
  5.   center: Alignment(0, 0),
  6. )

梯度渐变

SweepGradient 的定义：

  1. SweepGradient({
  2.   this.center = Alignment.center,
  3.   this.startAngle = 0.0,
  4.   this.endAngle = math.pi * 2,
  5.   @required List<Color> colors,
  6.   List<double> stops,
  7.   this.tileMode = TileMode.clamp,
  8. })

示例：

  1. SweepGradient(
  2.   colors: [Colors.red, Colors.green, Colors.blue],
  3.   stops: [.1, .4, 1],
  4.   startAngle: 0,
  5.   endAngle: 2 * pi
  6. )