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 中封装了的颜色。
鸣谢Name is
flutter Color和colors的更多相关文章
- 编写第一个Flutter App(翻译)
博客搬迁至http://blog.wangjiegulu.com RSS订阅:http://blog.wangjiegulu.com/feed.xml 以下代码 Github 地址:https://g ...
- Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
- 转:Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
- Flutter学习笔记(三)-- 事件交互和State管理
先来看看准备界面: image.png 目标是修改图中红色实线框中的喜欢和不喜欢的五角星的修改,以及数字的修改. 在修改之前,有必要先了解一些相关的信息. 知识点 前面简单的提到过,有些Widget是 ...
- 基于 Flutter 以两种方式实现App主题切换
概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一 ...
- Flutter实战视频-移动电商-34.列表页_小BUG的修复
34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...
- Flutter实战视频-移动电商-26.列表页_使用Provide控制子类-2
26.列表页_使用Provide控制子类-2 主要实现功能,点击一级分类,二级分类跟着变.这里主要用哦我们的provide 新建provide provide文件夹下创建:child_category ...
- Flutter实战视频-移动电商-32.列表页_小类高亮交互效果制作
32.列表页_小类高亮交互效果制作 点击大类右侧的横向的小类红色显示当前的小类别 解决之前溢出的问题: 先解决一个bug,之前右侧的这里设置的高度是1000,但是有不同的虚拟机和手机设别的问题造成了溢 ...
- Flutter实战视频-移动电商-33.列表页_子类和商品列表交互效果
33.列表页_子类和商品列表交互效果 主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口 ...
- Flutter实战视频-移动电商-35.列表页_上拉加载更多制作
35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...
随机推荐
- cmd数字雨原代码
转自:https://www.xitongtiandi.net/wenzhang/xp/29290.html
- 跳板攻击之:EarthWorm代理转发
跳板攻击之:EarthWorm代理转发 目录 跳板攻击之:EarthWorm代理转发 1 EarthWorm官方介绍 2 官方使用方法: 2.1 环境 2.2 正向 SOCKS v5 服务器 2.3 ...
- redis服务创建失败:Could not create server TCP listening socket 127.0.0.1:6379: bind
1. redis-cli.exe 2.shutdown 如果出现 (error) NOAUTH Authentication required.,则需要验证之前设置的密码(没出现请忽略第三步) 3 ...
- kotlin学习-Coroutines(协程)
协程(又名纤程),轻量级线程(建立在线程基础上,属于用户态调用),非阻塞式编程(像同步编写一样),在用户态内进行任务调度,避免与内核态过多交互问题,提高程序快速响应.协程使用挂起当前上下文替代阻塞,被 ...
- Telnet 连接smtp协议手动发邮件
下面实验以QQ邮箱为例(比较多人用,其它邮箱也一样) Step1.打开CMD 输入:telnet SMTP服务器 SMTP端口地址 连接smtp服务器 Step2. 输入:helo 内容 (向它( ...
- linux下yum安装时出现Loaded plugins: fastestmirror
linux使用yum安装软件时出现报错Loaded plugins:fastestmirror,是提示这个插件不能使用了,fastestmirror是yum的一个加速插件, 解决的办法是:将这个插件禁 ...
- 安全测试-WEB安全渗透测试基础知识(二)
1.2. 计算机网络 1.2.1. 计算机通信网的组成 计算机网络由通信子网和资源子网组成. 其中通信子网负责数据的无差错和有序传递,其处理功能包括差错控制.流量控制.路由选择.网络互连等. 其中资源 ...
- SAR成像(一):线性调频信号(LFM)和脉冲压缩
文章仅为个人理解,如有不妥之处欢迎指正. 1.脉冲压缩目的和意义 在雷达系统中,距离分辨率是很重要的一项性能指标,它决定了雷达能分辨两个单元之间的最小距离,更通俗的,即雷达分辨相离较近物体的能力.而决 ...
- Windows 11 调整工具 TweakNow WinSecret for Windows 11 3.2.0 中文汉化版
Windows 11 调整工具 TweakNow WinSecret for Windows 11 中文版由大眼仔旭(www.dayanzai.me)发布.适用于 Windows 11 的 Tweak ...
- React.CreateContext
跨组件传递的内容组件,该组件导出两个对象Provider 提供数据, Consumer, 消费数据 Context被翻译为上下文,在React的官方文档中归类于高级部分,属于React的高级API,但 ...