zoukankan      html  css  js  c++  java
  • Flutter 中渐变的高级用法

    https://www.jianshu.com/p/169b565c1b88

    lutter 中渐变有三种:

    • LinearGradient:线性渐变
    • RadialGradient:放射状渐变
    • SweepGradient:扇形渐变

    看下原图,下面的渐变都是在此图基础上完成。

     
     

    LinearGradient

    给一张图片添加从上到下的线性渐变:

    ShaderMask(
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.red,Colors.blue,Colors.green],
        ).createShader(bounds);
      },
      blendMode: BlendMode.color,
      child: Image.asset(
        'assets/images/b.jpg',
        fit: BoxFit.cover,
      ),
    )
    
     
     

    begin 和 end 表示渐变的方向,上面设置的方向是从顶部中间到底部中间。

    color 表示渐变的颜色。

    设置各个渐变色的结束点:

    Color color = Colors.orange;
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [color,color,Colors.transparent,Colors.transparent,color,color],
            stops: [0,.4,.41,.6,.61,1]
        ).createShader(bounds);
      },
      blendMode: BlendMode.color,
      child: Image.asset(
        'assets/images/b.jpg',
        fit: BoxFit.cover,
      ),
    );
    

    stops 的个数要对应 color

     
     

    由于中间设置的渐变色为透明,所以中间是原图。

    RadialGradient

    RadialGradient 是放射状渐变。

    ShaderMask(
          shaderCallback: (Rect bounds) {
            return RadialGradient(
              radius: .5,
              colors: <Color>[Colors.red, Colors.blue],
            ).createShader(bounds);
          },
          blendMode: BlendMode.color,
          child: Image.asset(
            'assets/images/b.jpg',
            fit: BoxFit.cover,
          ),
        )
    
     
     

    实现中间显示圆形原图,其他地方有灰色蒙板:

    ShaderMask(
      shaderCallback: (Rect bounds) {
        return RadialGradient(
          radius: .6,
          colors: <Color>[
            Colors.transparent,
            Colors.transparent,
            Colors.grey.withOpacity(.7),
            Colors.grey.withOpacity(.7)
          ],
          stops: [0, .5, .5, 1],
        ).createShader(bounds);
      },
      blendMode: BlendMode.srcATop,
      child: Image.asset(
        'assets/images/b.jpg',
        fit: BoxFit.cover,
      ),
    )
    
     
     

    SweepGradient

    SweepGradient 扇形渐变效果。

    ShaderMask(
      shaderCallback: (Rect bounds) {
        return SweepGradient(
          colors: <Color>[
            Colors.red,
            Colors.blue
          ],
        ).createShader(bounds);
      },
      child: Image.asset(
        'assets/images/b.jpg',
        fit: BoxFit.cover,
      ),
    )
    
     
     

    startAngle 和 endAngle 表示开始和结束角度。

    绘制渐变圆环:

    Container(
            width: 200,
            height: 200,
            child: CustomPaint(
              painter: _CircleProgressPaint(.5),
            ),
          )
    
    class _CircleProgressPaint extends CustomPainter {
      final double progress;
    
      _CircleProgressPaint(this.progress);
    
      Paint _paint = Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 20;
    
      
     
     

    除了图片,可以给任何组件加入渐变效果,比如文字:

    ShaderMask(
      shaderCallback: (Rect bounds) {
        return LinearGradient(
          colors: <Color>[Colors.blue, Colors.red],
          tileMode: TileMode.mirror,
        ).createShader(bounds);
      },
      blendMode: BlendMode.srcATop,
      child: Center(
        child: Text(
          '老孟,一枚有态度的程序员',
          style: TextStyle(fontSize: 24),
        ),
      ),
    )
    
     
     

    交流

    老孟Flutter博客地址(330个控件用法):http://laomengit.com

    欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:



    作者:老孟程序员
    链接:https://www.jianshu.com/p/169b565c1b88
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    windows蓝屏错误小全
    大数据量下高并发同步的讲解(不看,保证你后悔)
    本地或者服务器同时启动2个或多个tomcat
    如何在同一系统里同时启动多个Tomcat
    Java配置----JDK开发环境搭建及环境变量配置
    Tomcat8内置jdk8运行环境发布web项目
    Tomcat 部署项目的三种方法
    Java Web(五) JSP详解(四大作用域九大内置对象等)
    Java 四大作用域总结
    JSP九大隐式对象
  • 原文地址:https://www.cnblogs.com/sundaysme/p/13581521.html
Copyright © 2011-2022 走看看