Flutter Decoration 相关

Decoration 作为装饰器，是一个抽象类，可以对widget 进行各种修饰。

主要有三个子类：

1. UnderlineTabindicator:下划线

2. BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像

3. ShapeDecoration:实现四个边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场（竖向椭圆）、 角形（八边角）边色

UnderlineTabindicator

Center(
  child: Container(
  
    //下划线的宽度颜色
    decoration: UnderlineTabIndicator(  
        borderSide: BorderSide(width: 3.0, color: Colors.red),
        insets: EdgeInsets.zero),
        
    child: Text('下划线'),
  ),
);

BoxDecoration

Center(
  child: Container(
    width: 300,
    height: 100,
    padding: EdgeInsets.all(10),
    
    decoration: BoxDecoration(
    
        //底色
        color: Colors.green, 
        //边色与宽度
        border: Border.all(
            color: Colors.red, width: 2, style: BorderStyle.solid),
        //圆角
        borderRadius: BorderRadius.all(Radius.circular(10)),
        //阴影
        boxShadow: [BoxShadow(color: Colors.blue, offset: Offset(5, 5))],
        //渐变
        gradient: LinearGradient(colors: [Colors.blue, Colors.yellow]),
        
        //扫描式渐变
        // gradient: SweepGradient(
        //     colors: [Colors.blue, Colors.yellow],
        //     startAngle: 0.0,
        //     endAngle: 1 * 3.14),
        
        // 线性渐变
        // gradient: LinearGradient(
        //     colors: [Colors.blue, Colors.yellow],
        //     begin: FractionalOffset(1, 0),
        //     end: FractionalOffset(0, 1)),

        //背景混合模式
        backgroundBlendMode: BlendMode.srcATop,
        
        //形状
        shape: BoxShape.rectangle,
     ),
    child: const Text(
      "TextDirection.rtl topStart",
      textDirection: TextDirection.rtl,
    ),
  ),
);

ShapeDecoration

ShapeDecoration 其中shap 有多种类型且必选参数。 主要有下面类型： UnderlineInputBorder,OutlineInputBorder,StadiumBorder,RoundedRectangleBorder,ContinuousRectangleBorder,CircleBorder,BeveledRectangleBorder,Border.

Center(
  child: Container(
    width: 300,
    height: 100,
    padding: EdgeInsets.all(10),
    decoration: ShapeDecoration(
      color: Colors.green, //底色

      //形状
      //下划线边框
      shape: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.red),
      ),

      //带外边框
      // shape: OutlineInputBorder(
      //   borderSide: BorderSide(color: Colors.red),
      //   borderRadius: BorderRadius.circular(10),
      // ),

      //足球场形状
      // shape: StadiumBorder(
      //   side: BorderSide(color: Colors.red),
      // ),

      //圆角矩形
      // shape: RoundedRectangleBorder(
      //     side: BorderSide(color: Colors.red),
      //     borderRadius: BorderRadius.circular(10)),

      //连续的圆角矩形
      // shape: ContinuousRectangleBorder(
      //     side: BorderSide(color: Colors.red),
      //     borderRadius: BorderRadius.circular(20)),

      //圆形
      // shape: CircleBorder(side: BorderSide(color: Colors.red)),

      //斜角矩形边框
      // shape: BeveledRectangleBorder(
      //   side: BorderSide(width: 1, color: Colors.red),
      //   borderRadius: BorderRadius.circular(10),
      // ),

      //单独设置每一个边上的线条样式
      // shape: Border(
      //   top: BorderSide(color: Colors.red, width: 10),
      //   right: BorderSide(color: Colors.blue, width: 10),
      //   bottom: BorderSide(color: Colors.yellow, width: 10),
      //   left: BorderSide(color: Colors.black, width: 10),
      // ),
    ),
    child: const Text("TextDirection"),
  ),
);