“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 中封装了的颜色。

鸣谢Name is

flutter Color和colors的更多相关文章

  1. 编写第一个Flutter App(翻译)

    博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...

  2. Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  3. 转:Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)

    1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

  4. Flutter学习笔记(三)-- 事件交互和State管理

    先来看看准备界面: image.png 目标是修改图中红色实线框中的喜欢和不喜欢的五角星的修改,以及数字的修改. 在修改之前,有必要先了解一些相关的信息. 知识点 前面简单的提到过,有些Widget是 ...

  5. 基于 Flutter 以两种方式实现App主题切换

    概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一 ...

  6. Flutter实战视频-移动电商-34.列表页_小BUG的修复

    34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...

  7. Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2

    26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category ...

  8. Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作

    32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...

  9. Flutter实战视频-移动电商-33.列表页_子类和商品列表交互效果

    33.列表页_子类和商品列表交互效果 主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口 ...

  10. Flutter实战视频-移动电商-35.列表页_上拉加载更多制作

    35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...

随机推荐

  1. map方法整理数据,接口返回值进行处理

    整理前: //map方法使thumb加上域名 --> var data =[ { id: "11", title: "新车小程序title1", thum ...

  2. GPIO 和中断控制 LED 的状态

    中断的概念 中断是 MCU 强行从正常的主任务切换到由某些内部或外部条件的紧急任务.中断的优先程度远远高于主任务,MCU 会暂时把主任务挂起,转而处理中断任务,之后再执行主任务. 引起中断的外部条件来 ...

  3. PostgreSQL处理膨胀与事务回卷

    一.表膨胀查询与处理 1.创建扩展 create extension pgstattuple; 2.表膨胀查询 pgstattuple提供了pgstatetuple()和pgstatindex()两个 ...

  4. script和template里可选链运算符?.报错Syntax Error: Unexpected token (64:2)

    前情:babel-core@6.2.3,  vue@2.7.14 试过的方法:1.安装@babel/plugin-proposal-optional-chaining,设置.babelrc文件如下,报 ...

  5. Eureka服务治理

    Eureka是由Netflix开发的一款服务治理开源框架,Spring-cloud对其进行了集成.Eureka既包含了服务端也包含了客户端,Eureka服务端是一个服务注册中心(Eureka Serv ...

  6. 看了这本基础教程的书籍你还担心你的python学不好吗?

    python基础教程(第二版)PDF高清版免费下载地址: 提取码:chcj 值得花时间阅读的一本书 内容简介  · · · · · · 本书是经典教程的全新改版,作者根据Python 3.0版本的种种 ...

  7. IO 多路复用 select/poll/epoll ---> Reactor ---> Netty

    什么是内核态和用户态 https://blog.csdn.net/qq_41709234/article/details/124320482 参考:https://www.cnblogs.com/lo ...

  8. xxl-job调度任务简单使用

    简介 XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. https://www.cnblogs.com/x ...

  9. XYZtoZXY

    Quaternion XYZtoZXY(Vector3 p) { Vector3 v = new Vector3(p.x, -p.y, -p.z); Quaternion qx = Quaternio ...

  10. 记maven打包加入外部jar后tomcat运行失败问题

    环境:maven 3.8.0 .tomcat 8.5.30 因为项目需要额外的引用外部jar,需要打包到war中. 所以在pom中加入了 <webResources> <resour ...