Flutter 组件装饰和视觉效果

作者: StevenHu_Sir | 来源:发表于2020-03-24 15:39 被阅读0次

1.Opacity 不透明度处理

效果图

.Opacity 不透明度处理

代码

Center(
    child: Opacity(
      opacity: 0.3, //不透明度设置为0.3
      child: Container(
        width: 250.0,
        height: 100.0,
        //添加装饰器
        decoration: BoxDecoration(
          color: Colors.black, //背景色设置为纯黑
        ),
        child: Text(
          '不透明度为0.3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 28.0,
          ),
        ),
      ),
    ),
  )

2.DecoratedBox装饰盒子

2.1 背景图效果

效果图

背景图效果

代码

Center(
      child: Container(
        width: 300.0,
        height: 300.0,
        //装饰器
        decoration: BoxDecoration(
          //背景色
          color: Colors.grey,
          //图片装饰器
          image: DecorationImage(
            image: ExactAssetImage('images/1.jpeg'),//添加image属性
            fit: BoxFit.cover,//填充类型
          ),
        ),
      )
  )

2.2 边框阴影处理

效果图

边框阴影处理

代码

Center(
    child: Container(
      width: 300.0,
      height: 300.0,
      decoration: BoxDecoration(
        color: Colors.white,
        //边框阴影效果 可添加多个BoxShadow 是一种组合效果
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.grey, //阴影颜色
            blurRadius: 8.0, //模糊值
            spreadRadius: 8.0, //扩展阴影半径
            offset: Offset(-1.0, 1.0), //x/y方向偏移量
          ),
        ],
      ),
      child: Text(
        'BoxShadow阴影效果',
        style: TextStyle(
          color: Colors.black,
          fontSize: 28.0,
        ),
      ),
    ),
  )

2.3 边框圆角处理

效果图

边框圆角处理

代码

Center(
    child: Container(
      width: 260.0,
      height: 260.0,
      //装饰器
      decoration: BoxDecoration(
        //背景色
        color: Colors.white,
        //添加所有的边框,颜色为灰色，宽度为4.0
        border: Border.all(color: Colors.grey, width: 4.0),
        //添加边框弧度，这样会有一个圆角效果
        borderRadius: BorderRadius.circular(36.0),
        //添加背景图片
        image: DecorationImage(
          image: ExactAssetImage('images/1.jpeg'), //添加image属性
          fit: BoxFit.cover, //填充类型
        ),
      ),
    ),
  )

2.4 渐变处理

① LinearGradient线性渐变

效果图

LinearGradient线性渐变

代码

Center(
    child: DecoratedBox(
      decoration: BoxDecoration(
        //线性渐变
        gradient: LinearGradient(
          begin: const FractionalOffset(0.5, 0.0),//起始偏移量
          end: const FractionalOffset(1.0, 1.0),//终止偏移量
          //渐变颜色数据集
          colors: <Color>[
            Colors.red,
            Colors.green,
            Colors.blue,
            Colors.grey,
          ],
        ),
      ),
      child: Container(
        width: 280.0,
        height: 280.0,
        child: Center(
          child: Text(
            'LinearGradient线性渐变效果',
            style: TextStyle(
              color: Colors.black,
              fontSize: 28.0,
            ),
          ),
        ),
      ),
    ),
  )

② RadialGradient环形渐变

效果图

RadialGradient环形渐变

代码

Center(
    child: DecoratedBox(
      decoration: BoxDecoration(
        //环形渐变
        gradient: RadialGradient(
          //中心点偏移量,x和y均为0.0表示在正中心位置
          center: const Alignment(-0.0, -0.0),
          //圆形半径
          radius: 0.50,
          //渐变颜色数据集
          colors: <Color>[
            Colors.red,
            Colors.green,
            Colors.blue,
            Colors.grey,
          ],
        ),
      ),
      child: Container(
        width: 280.0,
        height: 280.0,
        child: new Center(
          child: Text(
            'RadialGradient环形渐变效果',
            style: TextStyle(
              color: Colors.black,
              fontSize: 28.0,
            ),
          ),
        ),
      ),
    ),
  )

3.RotatedBox旋转盒子

效果图

RotatedBox旋转盒子

代码

Center(
  child: RotatedBox(
    quarterTurns: 3,//旋转次数，一次为90度
    child: Text(
      'RotatedBox旋转盒子',
      style: TextStyle(fontSize: 28.0),
    ),
  ),
)

4.Clip剪裁处理

4.1ClipOval圆形剪裁

效果图

ClipOval圆形剪裁

代码

Center(
  //圆形剪裁
  child: ClipOval(
    //固定大小
    child: SizedBox(
      width: 300.0,
      height: 300.0,
      //添加图片
      child: Image.asset(
        "images/8.jpeg",
        fit: BoxFit.fill,
      ),
    ),
  ),
)

4.2ClipPath路径剪裁

效果图

ClipPath路径剪裁

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipPath路径剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'ClipPath路径剪裁示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
          child: ClipPath(
            clipper: TriangleCliper(),//指定自定义三角形Clipper
            child: SizedBox(
              width: 100.0,
              height:100.0,
              child: Image.asset("images/8.jpeg",fit: BoxFit.fill,),
            ) ,
          ),
        ),
      ),
    );
  }
}

//自定义三角形Clipper,类型为Path
class TriangleCliper extends CustomClipper<Path>{
  //重写获取剪裁范围
  @override
  Path getClip(Size size) {
    Path path = Path();
    //移动至起始点(50.0,50.0)
    path.moveTo(50.0,50.0);
    //开始画线 起始点(50.0,50.0) 终止点(50.0,10.0)
    path.lineTo(50.0,10.0);
    //开始画线 起始点(50.0,10.0) 终止点(100.0,50.0)
    path.lineTo(100.0,50.0);
    path.close();//使这些点构成三角形
    return path;
  }
  //重写是否重新剪裁
  @override
  bool shouldReclip(TriangleCliper oldClipper) {
    return true;
  }
}

4.3ClipRect矩形剪裁

效果图

ClipRect矩形剪裁

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipRect矩形剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'ClipRect矩形剪裁示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
          child: ClipRect(
            //指定自定义Clipper
            clipper: RectClipper(),
            child: SizedBox(
              width: 300.0,
              height:300.0,
              child: Image.asset("images/8.jpeg",fit: BoxFit.fill,),
            ) ,
          ),
        ),
      ),
    );
  }
}

//自定义Clipper,类型为Rect
class RectClipper extends CustomClipper<Rect>{

  //重写获取剪裁范围
  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(100.0, 100.0, size.width - 100.0,  size.height- 100.0);
  }

  //重写是否重新剪裁
  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }

}

4.4ClipRRect圆角矩形剪裁

效果图

ClipRRect圆角矩形剪裁

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ClipRRect圆角矩形剪裁示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'ClipRRect圆角矩形剪裁示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
          //圆角矩形
          child: ClipRRect(
            borderRadius: BorderRadius.all(
              //圆角弧度，值越大弧度越大
                Radius.circular(30.0)),
            //固定大小
            child: SizedBox(
              width: 300.0,
              height: 300.0,
              child: Image.asset(
                "images/8.jpeg",
                fit: BoxFit.fill,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

5.CustomPainer自定义面板

可以画任意图形，如：点、线、路径、矩形、圆形以及添加图像。

画直线：drawLine()
画圆：drawCircle()
画椭圆：drawOval()
画矩形：drawRect()
画点：drawPoints()
画圆弧：drawArc()

常见用法

//定义画笔
  Paint _paint = Paint()
// 画笔颜色
..color = Colors.black
// 画笔笔触类型
..strokeCap = StrokeCap.square
// 是否启动抗锯齿
..isAntiAlias = true
// 颜色混合模式
..blendMode = BlendMode.exclusion
// 绘画风格，默认为填充
..style = PaintingStyle.stroke
// 颜色渲染模式
..colorFilter = ColorFilter.mode(Colors.blueAccent, BlendMode.exclusion)
// 模糊遮罩效果
..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0)
// 颜色渲染模式的质量
..filterQuality = FilterQuality.high
// 画笔的宽度
..strokeWidth = 3.0 ;

1.绘制直线

效果图

绘制直线

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomPaint绘制直线示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'CustomPaint绘制直线示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: LinePainter(),
                child: Center(
                  child: Text(
                    '绘制直线',
                    style: const TextStyle(
                      fontSize: 38.0,
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            )
        ),
      ),
    );
  }
}

//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class LinePainter extends CustomPainter {

  //定义画笔
  Paint _paint = Paint()
    ..color = Colors.black
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;

  //重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {
    //绘制直线
    canvas.drawLine(Offset(20.0, 20.0), Offset(300.0, 20.0), _paint);
  }

  //重写是否需要重绘的
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

2.绘制圆

效果图

绘制圆

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomPaint绘制圆示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'CustomPaint绘制圆示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: CirclePainter(),
                child: Center(
                  child: Text(
                    '绘制圆',
                    style: const TextStyle(
                      fontSize: 38.0,
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            )
        ),
      ),
    );
  }
}

//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class CirclePainter extends CustomPainter {

  //定义画笔
  Paint _paint = Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;//画笔样式有填充PaintingStyle.fill及没有填充PaintingStyle.stroke两种

  //重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {
    //绘制圆 参数为中心点，半径，画笔
    canvas.drawCircle(Offset(200.0, 150.0), 150.0, _paint);
  }

  //重写是否需要重绘的
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

3.绘制椭圆

效果图

绘制椭圆

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomPaint绘制椭圆示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'CustomPaint绘制椭圆示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: LinePainter(),
                child: Center(
                  child: Text(
                    '绘制椭圆',
                    style: const TextStyle(
                      fontSize: 38.0,
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            )
        ),
      ),
    );
  }
}

//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class LinePainter extends CustomPainter {

  //定义画笔
  Paint _paint = Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.fill;//画笔样式有填充PaintingStyle.fill及没有填充PaintingStyle.stroke两种

  ///重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {
    //绘制椭圆
    //使用一个矩形来确定绘制的范围,椭圆是在这个矩形之中内切的,第一个参数为左上角坐标,第二个参数为右下角坐标
    Rect rect = Rect.fromPoints(Offset(80.0, 200.0), Offset(300.0, 300.0));
    canvas.drawOval(rect, _paint);
  }

  ///重写是否需要重绘的
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

4.绘制圆角矩形

效果图

绘制圆角矩形

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomPaint绘制圆角矩形示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'CustomPaint绘制圆角矩形示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: LinePainter(),
                child: Center(
                  child: Text(
                    '绘制圆角矩形',
                    style: const TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w600,
                      color: Colors.black,
                    ),
                  ),
                ),
              ),
            )
        ),
      ),
    );
  }
}

//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class LinePainter extends CustomPainter {

  //定义画笔
  Paint _paint = Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;//画笔样式有填充PaintingStyle.fill及没有填充PaintingStyle.stroke两种

  ///重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {

    //中心点坐标为200,200 边长为100
    Rect rect = Rect.fromCircle(center: Offset(200.0, 200.0), radius: 100.0);
    //根据矩形创建一个角度为10的圆角矩形
    RRect rrect = RRect.fromRectAndRadius(rect, Radius.circular(20.0));
    //开始绘制圆角矩形
    canvas.drawRRect(rrect, _paint);
  }

  ///是否需要重绘
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

5.绘制嵌套矩形

效果图

绘制嵌套矩形

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomPaint绘制嵌套矩形示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'CustomPaint绘制嵌套矩形示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: LinePainter(),
              ),
            )
        ),
      ),
    );
  }
}

//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class LinePainter extends CustomPainter {

  //定义画笔
  Paint _paint = Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.square
    ..isAntiAlias = true
    ..strokeWidth = 3.0
    ..style = PaintingStyle.stroke;//画笔样式有填充PaintingStyle.fill及没有填充PaintingStyle.stroke两种

  ///重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {

    //初始化两个矩形
    Rect rect1 = Rect.fromCircle(center: Offset(150.0, 150.0), radius: 80.0);
    Rect rect2 = Rect.fromCircle(center: Offset(150.0, 150.0), radius: 40.0);
    //再把这两个矩形转化成圆角矩形
    RRect outer = RRect.fromRectAndRadius(rect1, Radius.circular(20.0));
    RRect inner = RRect.fromRectAndRadius(rect2, Radius.circular(10.0));
    canvas.drawDRRect(outer, inner, _paint);
  }

  //是否需要重绘
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

6.绘制多个点

效果图

绘制多个点

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomPaint绘制多个点示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'CustomPaint绘制多个点示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: LinePainter(),
              ),
            )),
      ),
    );
  }
}

//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class LinePainter extends CustomPainter {
  //定义画笔
  Paint _paint = Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.round//StrokeCap.round为圆点 StrokeCap.square为方形
    ..isAntiAlias = true
    ..strokeWidth = 20.0//画笔粗细 值调大点 这样点看起来明显一些
    ..style = PaintingStyle.fill; //用于绘制点时PaintingStyle值无效

  //重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {
    //绘制点
    canvas.drawPoints(

      //PointMode的枚举类型有三个，points点，lines隔点连接线，polygon相邻连接线
        PointMode.points,
        [
          Offset(50.0, 60.0),
          Offset(40.0, 90.0),
          Offset(100.0, 100.0),
          Offset(300.0, 350.0),
          Offset(400.0, 80.0),
          Offset(200.0, 200.0),
        ],
        _paint..color = Colors.grey);
  }

  //是否需要重绘
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

7.绘制圆弧

效果图

绘制圆弧

代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CustomPaint绘制圆弧示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'CustomPaint绘制圆弧示例',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body: Center(
            child: SizedBox(
              width: 500.0,
              height: 500.0,
              child: CustomPaint(
                painter: LinePainter(),
              ),
            )),
      ),
    );
  }
}

//继承于CustomPainter并且实现CustomPainter里面的paint和shouldRepaint方法
class LinePainter extends CustomPainter {
  //定义画笔
  Paint _paint = Paint()
    ..color = Colors.grey
    ..strokeCap = StrokeCap.round
    ..isAntiAlias = true
    ..strokeWidth = 2.0//画笔粗细
    ..style = PaintingStyle.stroke; //用于绘制点时PaintingStyle值无效

  //重写绘制内容方法
  @override
  void paint(Canvas canvas, Size size) {
    //绘制圆弧
    const PI = 3.1415926;
    //定义矩形
    Rect rect1 = Rect.fromCircle(center: Offset(100.0, 0.0), radius: 100.0);
    //画1/2PI弧度的圆弧
    canvas.drawArc(rect1, 0.0, PI / 2, true, _paint);
    //画PI弧度的圆弧
    Rect rect2 = Rect.fromCircle(center: Offset(200.0, 150.0), radius: 100.0);
    canvas.drawArc(rect2, 0.0, PI, true, _paint);
  }

  //是否需要重绘
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}