flutter Color和colors

“Color(颜色)”是我们在设置应用程序界面样式时最常用到的属性。

Flutter 中颜色设置的方式有很多种,其中最常用的有下列几种:

Color c1 = Color(0xFF0099ff);
Color c2 = Color.fromRGBO(60, 170, 250, 1);
Color c3 = Color.fromARGB(255, 60, 170, 250);
Color c4 = Colors.blue;
Color c5 = Colors.red[300];

这里面涉及到了两个类:Color 和 Colors。

1. Color

Color 是 Flutter 提供的一个颜色类。

1.1 Color()

调用 Color 构造函数时,传入一个颜色的 ARGB 值,即

Color c1 = Color(0xFF0099ff);

FF 是透明度的十六进制表示方式,取值范围是:00 ~ FF(透明 ~ 不透明);
0099ff 是颜色 RGB(red/green/blue) 值的十六进制表示方式,不同的颜色对应的值也不一样,建议通过取色器软件等进行取色。
1.2 Color.fromRGBO()

Color 类的身上有一个 fromRGBO() 的方法,该方法接受 4 个参数,分别与 RGBO 对应:red、green、blue、opacity。示例代码如下:

Color c2 = Color.fromRGBO(60, 170, 250, 1);

RGB 表示红绿蓝三种颜色,取值范围是:0 ~ 255;
O 表示颜色透明度,取值范围是:0 ~ 1(透明 ~ 不透明);
1.3 Color.fromARGB()

Color 类的身上还有一个 fromARGB() 的方法,该方法同样接收 4 个参数,与 ARGB 对应的也是:alpha、red、green、blue。示例代码如下:

Color c3 = Color.fromARGB(255, 60, 170, 250);

A 表示颜色透明度,取值范围是:0 ~ 255;
RGB 表示红绿蓝三种颜色,取值范围是:0 ~ 255(透明 ~ 不透明);
2. Colors

Colors 实际上就是 Material 库中对 Color 的进一步封装。它将一些常用颜色的十六进制值封装成了我们更熟悉的英文单词形式。示例代码如下:

Color c4 = Colors.red;
Color c5 = Colors.white;
 
Color c6 = Colors.red[50];
Color c6 = Colors.blue[900];

颜色后面的中括号是用来设置当前颜色的深浅度,可取的值有 10 种:50、100、200 ... 900,值越大,对应的颜色越深。500 就等同于当前颜色自身。

 注:并不是所有的颜色英文单词都能用,只能使用 Material 中封装了的颜色。
鸣谢

posted on   高彰  阅读(528)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
历史上的今天:
2022-01-26 Mac下更新Python3
2022-01-26 Mac 错误提示:zsh: command not found: brew解决方法
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示