美文网首页flutter
Flutter自定义Color赋值方法

Flutter自定义Color赋值方法

作者: _安迪_ | 来源:发表于2019-05-28 11:42 被阅读0次

    先上自定义方法:

    /// 颜色创建方法
      /// - [colorString] 颜色值
      /// - [alpha] 透明度(默认1,0-1)
      /// 
      /// 可以输入多种格式的颜色代码,如: 0x000000,0xff000000,#000000
      static Color ADColor(String colorString, {double alpha = 1.0}) {
        String colorStr = colorString;
        // colorString未带0xff前缀并且长度为6
        if (!colorStr.startsWith('0xff') && colorStr.length == 6) {
          colorStr = '0xff' + colorStr;
        }
        // colorString为8位,如0x000000
        if(colorStr.startsWith('0x') && colorStr.length == 8) {
          colorStr = colorStr.replaceRange(0, 2, '0xff');
        }
        // colorString为7位,如#000000
        if(colorStr.startsWith('#') && colorStr.length == 7) {
          colorStr = colorStr.replaceRange(0, 1, '0xff');
        }
        // 先分别获取色值的RGB通道
        Color color = Color(int.parse(colorStr));
        int red = color.red;
        int green = color.green;
        int blue = color.blue;
        // 通过fromRGBO返回带透明度和RGB值的颜色
        return Color.fromRGBO(red, green, blue, alpha);
      }
    

    使用:

    Color myolor = 方法定义的类名.ADColor('0xfffa5956');
    

    =========================================
    以下是遇到的问题,感兴趣的朋友可以继续看看:

    最近学习Flutter开发,想根据后台返回的16进制颜色值来生成Color对象。
    Flutter提供的方法:

    Color(int value);
    

    可以看到,值必须是int类型, 如果拿到的色值是String,可以通过以下方法String转int:

    Color(int.parse(colorStr));
    

    这个方法可以满足简单的颜色需求,但是如果你要再加个透明度,就比较复杂了。
    官方方法提供了两个:

    Color.fromARGB(int a, int r, int g, int b)
    Color.fromRGBO(int r, int g, int b, double opacity)
    

    居然要我们把一个简单的色值去反推出他的RGB通道?
    在往下看,有没有单独设置透明度的方法呢?
    答案是有的,也有两个:

    withAlpha(int a)
    withOpacity(double opacity)
    

    测试了一下,比如这样写:

    //  1、先随便赋一个色值
    Color color = Color(int.parse('0xfffa5956'));
    // 2、设置他的透明度
    color.withOpacity(0.1);
    

    然而并没有什么效果,颜色还是不透明的,查了一下了解到,0x后面跟着前2个ff一般代表透明度,而ff本身就代表不透明,参照表:
    00%=FF(不透明)
    5%=F2
    10%=E5
    15%=D8
    20%=CC
    25%=BF
    30%=B2
    35%=A5
    40%=99
    45%=8c
    50%=7F
    55%=72
    60%=66
    65%=59
    70%=4c
    75%=3F
    80%=33
    85%=21
    90%=19
    95%=0c
    100%=00(全透明)

    可能是Flutter根据你的色值,就设定了他的透明度,于是你再单独设置透明度就没有了效果。

    那么我们要实现色值加透明度的控制的话,就必须要知道他的RGB通道了,然后再通过fromARGB或者fromRGBO方法去实现。
    而Color对象里是有RGB通道的get方法的:

    /// The red channel of this color in an 8 bit value.
      int get red => (0x00ff0000 & value) >> 16;
    
      /// The green channel of this color in an 8 bit value.
      int get green => (0x0000ff00 & value) >> 8;
    
      /// The blue channel of this color in an 8 bit value.
      int get blue => (0x000000ff & value) >> 0;
    

    于是就有了上面自定义的方法。

    相关文章

      网友评论

        本文标题:Flutter自定义Color赋值方法

        本文链接:https://www.haomeiwen.com/subject/xoprtctx.html