Flutter color颜色的用法


系统自带color的使用和自定义color


系统的color

查看Color的源码:

  static const Color black = Color(0xFF000000);

可以看到,这里的black也是赋值封装好的,我们可以直接调用(Colors.black 即可)。

当然系统也封装了很多的color使用(查看源码轻松找到),
在这里插入图片描述

上面我们可以看到有很多不同程度的红色,默认就是原始的红色,我们加一个参数就可以调用其他的红色了

primaryColor: Colors.red[800],

在中括号后面加一个数值就行了

但是如果我想自定义怎么办呢,那源码就是学习的例子,我们可以向源码一样封装,然后调用


自定义color


import 'package:flutter/material.dart';

class YColors {
  static const Color colorPrimary = Color(0xff4caf50);
  static const Color colorPrimaryDark = Color(0xff388E3C);
  static const Color colorAccent = Color(0xff8BC34A);
  static const Color colorPrimaryLight = Color(0xffC8E6C9);

  static const Color primaryText = Color(0xff212121);
  static const Color secondaryText = Color(0xff757575);

  static const Color dividerColor = Color(0xffBDBDBD);
}

调用:

theme: ThemeData(
		...
        primaryColor: YColors.colorPrimary,
        primaryColorDark: YColors.colorPrimaryDark,
        accentColor: YColors.colorAccent,
        dividerColor: YColors.dividerColor,
      ),

不过这里注意color的值,不是#ff0000格式的了,是ARGB格式的

什么是ARGB

在flutter中,color使用的是ARGB,0x后面的就是ARGB,A就是FF表示透明度,RGB就是三原色了,

比如,RGB的红色是#ff0000

所以,ARGB红色我们就可以这样表示

0xffff0000

我们除了改主题的颜色之外,还有很多系统的控件颜色都可以修改的,查看源码ThemeData即可。


  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yechaoa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值