美文网首页
Flutter 颜色使用2022-06-13 周一

Flutter 颜色使用2022-06-13 周一

作者: 勇往直前888 | 来源:发表于2022-06-13 19:49 被阅读0次

    特殊颜色

    特殊颜色方便方法非常好,比如红色

    Colors.red;
    

    16进制表示的int值

    这个有点绕,不过颜色值用16进制表示确实比RGB或者RGBA要来的方便。

    • 设计图的颜色切换要改一下,改成AHEX模式
    AHEX模式
    • 代码中就用下面的方法,前两位的FF代表透明度
    Color(0xFF11BA66);
    

    字符串表示的16进制

    • 一般没有开头的FF;就比如“#11BA66”;加上开头的#,一共7个字符。这种格式用得很多,后台返回的字段往往就是这种。设计图的HEX模式就是这样的。
    HEX模式
    • 这种模式Flutter没有对应的颜色构造方法,不得不说非常失败。

    • 一般可以自己写一个工具方法,把这种模式利用起来。字符串转Color对象。有很多种写法,感觉下面这种比较好。

    Color hexToColor(String s) {
    // 如果传入的十六进制颜色值不符合要求,返回默认值
    if (s == null || s.length != 7 || int.tryParse(s.substring(1, 7), radix: 16) == null) {
    s = '#999999';
    }
    return new Color(int.parse(s.substring(1, 7), radix: 16) + 0xFF000000);
    }
    

    关于透明度

    UI给8为的16进制是最好的。如果给6为和透明度怎么办呢?这里有人做了一份对应表。

    16进制色值前两位的透明值(不透明度)
    
    
    0% (00)
    1% (03) 2% (05) 3% (08) 4% (0A) 5% (0D)
    6% (0F) 7% (12) 8% (14) 9% (17) 10% (1A)
    11% (1C) 12% (1F) 13% (21) 14% (24) 15% (26)
    16% (29) 17% (2B) 18% (2E) 19% (30) 20% (33)
    21% (36) 22% (38) 23% (3B) 24% (3D) 25% (40)
    26% (42) 27% (45) 28% (47) 29% (4A) 30% (4D)
    31% (4F) 32% (52) 33% (54) 34% (57) 35% (59)
    36% (5C) 37% (5E) 38% (61) 39% (63) 40% (66)
    41% (69) 42% (6B) 43% (6E) 44% (70) 45% (73)
    46% (75) 47% (78) 48% (7A) 49% (7D) 50% (80)
    51% (82) 52% (85) 53% (87) 54% (8A) 55% (8C)
    56% (8F) 57% (91) 58% (94) 59% (96) 60% (99)
    61% (9C) 62% (9E) 63% (A1) 64% (A3) 65% (A6)
    66% (A8) 67% (AB) 68% (AD) 69% (B0) 70% (B3)
    71% (B5) 72% (B8) 73% (BA) 74% (BD) 75% (BF)
    76% (C2) 77% (C4) 78% (C7) 79% (C9) 80% (CC)
    81% (CF) 82% (D1) 83% (D4) 84% (D6) 85% (D9)
    86% (DB) 87% (DE) 88% (E0) 89% (E3) 90% (E6)
    91% (E8) 92% (EB) 93% (ED) 94% (F0) 95% (F2)
    96% (F5) 97% (F7) 98% (FA) 99% (FC) 100%(FF)
    

    “透明度”还是“不透明度”这个要看清楚啊,灵活做一下转换。实际试验下来发现对应的是“蓝湖”上的“不透明度”

    参考文章

    Flutter十六进制颜色转换成颜色对象

    相关文章

      网友评论

          本文标题:Flutter 颜色使用2022-06-13 周一

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