首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter 专题】22 易忽略的【小而巧】的技术点汇总 (二)

Opacity 透明度 和尚以前在处理 Widget 的显隐性时用的是设置 Widget 宽高均为0,方式不太好,偶然间了解到 Opacity,可以通过处理透明度来处理 Widget 的显隐性...Colors.redAccent, Colors.red[200], Colors.red, Colors.red[800], 还有一系列具有常见不透明度的黑色和白色。...例如:black54 是纯黑色,具有 54% 的不透明度。...: ARGB 16进制方式:0x 代表16进制,进行拆分,第一个参数为透明度; Color.fromARGB(0xFF, 0xEE, 0x50, 0x48) ARGB 10进制方式:与16进制使用相同...进制; Color(0xFFEE5048) Tips: 0x 后需要设置透明度 FF (完全不透明) 或其他透明度,如果不设置透明度,默认是全透明。

91441
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Flutter实战】图片组件及四大案例

    ,), 当Image的大小和图片大小不匹配时,需要设置填充模式fit,设置组件大小为150x150, Container( color: Colors.red.withOpacity(.3),...源的颜色通道将被忽略,只有不透明度才起作用。 dstOut:显示目标图像,但仅显示两个图像不重叠的位置。不渲染源图像,仅将其视为蒙版。源的颜色通道将被忽略,只有不透明度才起作用。...目标的颜色通道将被忽略,只有不透明度才起作用。 srcOut:显示源图像,但仅显示两个图像不重叠的位置。 srcOver:将源图像合成到目标图像上。 xor:将按位异或运算符应用于源图像和目标图像。...当加载图片的时候回调frameBuilder,当此参数为null时,此控件将会在图片加载完成后显示,未加载完成时显示空白,尤其在加载网络图片时会更明显。...'老孟,专注分享Flutter技术和应用实战。' '老孟,专注分享Flutter技术和应用实战。'

    2.8K10

    纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

    A 高程为 1dp 的卡片,叠加层不透明度为5% B 高程为 6dp 的浮动按钮,使用没有叠加层的次要色 C 底部菜单栏,高程为 8dp,叠加层不透明度为12% 值得注意的是,叠加层不应应用于使用主色和次要色的...在深色背景上的浅色文本 当浅色文本出现在深色背景上的时候(这里是白色文本置于黑色背景之上),它应该遵循下面的不透明度设置规则: 最重要的内容,白色文本不透明度设置为87% 中等重要的内容,白色文本的不透明度为...60% 被禁用的文本内容,白色文本的不透明度为38% ?...禁用状态 所有的被禁用的组件,都使用不透明度为 12% 的白色用来呈现外轮廓和填充色,并使用不透明度为 38% 的白色来显示文本和表层的内容。 ?...轮廓容器:不透明度为12%的白色 标签/图标:不透明度为38%的白色 色彩填充容器:不透明度为12%的白色 相关资源 Sticker sheet 是和 Sketch for Android 这套组件一起使用的

    9.8K10

    QQ隐藏图原理与C#实现(含源文件)

    QQ群聊的背景色为白色,而打开图片后的背景色为黑色,如果能巧妙修改图片各个像素的透明度,就可以达到在不同背景下显示出不同图片的功能。...透明度叠加算法 设有两张图A,B,A在B的上面,B的不透明度为255(0表示全透明,255表示不透明),A的不透明度为alpha,则实际看到的像素值为 灰度图算法 设白图在点(i,j)处像素值为G’,...设黑图在(i,j)处的灰度值为G,此时前景色为白色,背景色为黑色,列出表达式: 得到alpha = G。...所以对于白图,把它的不透明度设置为255 - G,对于黑图,把它的不透明度设置为G,就能做到在白色背景下能看到白图,在黑色背景下能看到黑图的效果。...原来之前的灰度图中,使用灰色像素来显示白图,在白色背景下通过不透明度让灰色像素显示,而在黑色背景下,灰色像素有颜色优势,无论不透明度是多少都不影响它在黑色背景下隐藏。

    1.7K10

    Adobe Photoshop,选择图像中的颜色范围

    6.若要在图像窗口中预览选区,请选取“选区预览”选项: 无显示原始图像。 灰度完全选定的像素显示为白色,部分选定的像素显示为灰色,未选定的像素显示为黑色。...黑色杂边对选定的像素显示原始图像,对未选定的像素显示黑色。此选项适用于明亮的图像。 白色杂边对选定的像素显示原始图像,对未选定的像素显示白色。此选项适用于暗图像。...在“载入”窗口中,选择所需的预设文件,然后单击“载入”。 文末教程彩蛋 调整蒙版不透明度和边缘 使用“属性”面板可以调整选定图层或矢量蒙版的不透明度。“浓度”滑块控制蒙版不透明度。...在“属性”面板中,拖动“浓度”滑块可调整蒙版不透明度。 到达 100% 的浓度时,蒙版将不透明并遮挡图层下面的所有区域。随着浓度的降低,蒙版下的更多区域变得可见。...羽化蒙版边缘 在“图层”面板中,选择包含要编辑的蒙版的图层。 在“图层”面板中,单击“蒙版”缩览图。缩览图周围会显示一个边框。 拖动“羽化”滑块为蒙版边缘应用羽化效果。

    11.3K50

    如何在 Flutter 中设置背景图像【Flutter专题16】

    本教程将向您展示如何在 Flutter 中设置背景图像。 在 Flutter 应用程序中设置背景图像的常用方法是使用DecorationImage..../不透明度 要设置背景图像的透明度或不透明度,您可以传递colorFilter参数。...在下面的示例中,我们创建了ColorFilter不透明度为 0.2 的 。混合模式设置为dstATop,将目标图像(透明滤镜)合成到源图像(背景图像)重叠的位置。...显示键盘时,应用程序内容的屏幕区域变小。它还会影响背景图像的渲染方式,因为图像必须适合较小的空间。...还可以定义图像应如何刻入可用空间并设置图像的不透明度。如果应用程序包含可能触发屏幕键盘的文本字段,您还需要处理如上所示的情况。 对于其他自定义,您可以阅读我们的教程,?

    12.1K21

    6详解AppBar小部件

    AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。...由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...工具栏高度和不透明度 最后,我们有工具栏属性。工具栏包含文字,图标,按钮,和其他任何公司的前景,除了小部件,如Container和Image。...关于 Flutter 的 AppBar 必须提供的所有内容的完整演练。我希望这篇文章能帮助你在未来所有的 Flutter 应用程序中创建漂亮的 AppBars。...key, this.leading,//左侧显示的图标 通常首页显示的为应用logo 在其他页面为返回按钮 this.automaticallyImplyLeading = true,/

    16.4K10

    如何为应用选择最合适的图像格式

    JPEG 的压缩可以用 Photoshop 里存储为 web 格式的时候可以直接选择压缩品质,一般用于 web 的 JPG 图片选择 50%-60% 质量的即可,因为它兼顾不错的图像质量和较小的文件尺寸...这里以 Photoshop 为例子,文件->存储为 Web 所用格式, 可以看到下拉这里只有 PNG-8 和 PNG-24,而没有 PNG-32 呢?是因为 Photoshop不支持这个格式嘛?...在 Photoshop 里导出 PNG-32 格式的图片是通过选择 PNG-24格式,并且勾选下面的透明度,这样生成的图片位数才是32位的,如果不勾选透明度的话就是 PNG-24 格式。...PNG 8透明度 从上面那个图里可以看出 PNG 8 是支持这三种不透明格式的。但是 Photoshop 只支持导出不透明和索引透明格式。...在Photoshop 中如果选择 PNG 8,且勾选了透明度,那么导出的图片就是 PNG 8 索引透明,否则就是 PNG 8 不透明。 ?

    1.2K30

    时至今日,浏览器色彩居然仍旧失真?

    你的浏览器色彩失真情况 post15image2.png CSS 渐变 post15image3.png SVG 渐变 正确的透明度 post15image4.png 绿色和白色为25%的不透明度...,黑色为75%的不透明度 在25%的透明度下叠加明亮的颜色,应该是为了正确地染上底层的黑暗区域,像灯光照在投影屏幕上一样洗掉它们。....png SVG填充不透明度 正确的缩放比例 post15image9.png 一个按2次方缩小的测试图像 灰色方块的外部和内部应该是相同的整体亮度,因为它们都发出了平均亮度为白色一半的光。...如果你有一个HiDPI显示器或正在使用缩放功能,你的浏览器已经在缩放了(不正确的),全尺寸的图像看起来会有问题。...在GIMP 2.10.30中创建的参考图像(这是少数几个真正能够正确进行混合和渐变的开源图像编辑应用程序之一)。GIMP 2.10是第一个把这个做对的版本,早在2018年。

    4.3K177

    python图像处理-个性化头像

    我们的处理过程其实就是将原来的图片变成RGBA格式,RGB是红绿蓝三种颜色,这里的A就是透明通道的意思,A的取值范围是从0-255之间变化,当A设置为0时,完全透明,255时完全不透明。...这里的putalpha正常里面是放入一个0-255的数字的,表示要将这整张图片设置为透明度为多少,这是方式对于整张图片都更改透明度非常方便,但是对于更改局部或者特定形状部分的透明度就不行了;这里使用另外一种方式...,传入一张灰度图模式的圆形图片(灰度图是黑白图片,灰度0是显示黑色的,灰度255是显示白色的),猫的圆形外的透明度就被设置成黑色所代表的数值0,而0在透明度中是表示完全透明的,最终猫的圆外就变成透明了,...里面白色部分不透明显示出一个圆形。...,白色数值是255,表示透明图是完全不透明,所以整个效果就是黑色部分会透明显示出下面一层的猫,而白色部分不透明也就保留原来效果。

    1.1K10

    使用Python给图片添加水印

    示例PNG和JPG图像的大小均为1100 x 1100像素。然而,shape属性中的最后一个数字不同:JPG是3,而PNG是4。让我们显示numpy数组以查看差异。 每个数组内的值表示每个像素的颜色。...例如,在PNG文件中,[255,255,255,255]表示白色但完全不透明。而在JPG文件中,[255,255,255]表示白色的像素。...如上图2所示,PNG支持透明度(即alpha通道),但JPG没有。 这里需要注意: 1.RGB的值为255表示每种颜色的最大值。将所有三个值设为最大值(255,255,255)基本上是白色。...2.alpha通道的值为255表示不透明;而alpha值为0表示完全透明。 Pillow库使JPG文件转换为PNG格式变得非常容易。...我们可以通过将图像上所有白色像素的alpha通道设置为0(透明)来“删除”白色背景。

    2.3K30

    20种常用的 Ps技术

    :白色(色调值=0)是最大负位移,即将要处理图象相应的象素向左和向上移动;黑色(色调值=255)是最大正位移,即把图象中相应的象素向右和向下移动;灰色(色调值=128)不产生位移) 照片底纹效果 1...玻璃(扭曲度7,平滑度3,纹理-画布,缩放50%). 6 新建一个图层,背景为黑色,另新建一图层,添充白色矩形. 7 在矩形所在的层上执行滤镜-扭曲-置换,选择默认的选项。...黑客帝国特效 1.新建一个大小为500X300,RGB模式,白色背景的文件. 2.用文字输入工具随意输入一窜01代码,并按CTRL+T把它垂直旋转过来放,并多复制几个拉成不等大小,随意摆放几个。...如果用在MM人像照片上,则会令弥漫着一种前卫甚至颓颓的色彩. 1 打开图象,并让右边显示“通道面板”. 2 在通道控制面板选蓝色通道,进入“图象”菜单,选“应用图象”,选中“反相”,混合模式用“正片叠底...”,不透明度为50%,确认. 3 在通道控制面板选绿色通道,进入“图象”菜单,选“应用图象”,选中“反相”,混合模式用“正片叠底”,不透明度为20%,确认. 4 在通道控制面板选红色通道,进入“图象

    2.6K10

    Flutter lesson 5: Flutter组件之基础组件(一)

    在Flutter中,这些常用颜色值以及用一个对象保存下来了,那就是Colors。所以我穿插的来讲讲Colors这个对象,看看他的用法。...下面我们使用这三种方式来表示一个完全不透明的白色 8位16进制表示:0xFFFFFFFF。或许你没有接触过这种表示方式,更多的是使用#FFF或者#FFFFFF的形式表示。...透明度分为256阶(0-255),计算机上面使用16进制表示为( 00 -ff )。透明就是0阶,完全不透明就是255阶。加入透明度是50%,那就是256阶的一半。....formRGBO() : 与第二个方法的区别就是透明度放在了最后一个参数,而且值是double类型的。取值范围是[0.0, 1.0]。 这就是Flutter中颜色的集中设置方法。...Child 顾名思义,就是设置他的子元素,可以设置也可以不设置,如果不设置,前面也已经说了结果了。

    2.1K30

    一篇文章带你了解SVG 蒙版(Mask)

    注:仅在可见蒙版圆的地方可见引用蒙版的矩形。 三、蒙版形状颜色定义蒙版不透明度 1. 如何去定义不透明度 ? 蒙版形状(圆形或矩形)的填充颜色设置为#ffffff。...蒙版形状的颜色定义使用蒙版的形状的不透明度。蒙版形状的颜色越接近#ffffff(白色),使用蒙版的形状将越不透明。蒙版形状的颜色越接近#000000(黑色),使用蒙版的形状将越透明。 2....四、在蒙版中使用渐变 如果对用作蒙版的形状应用渐变,则可以实现蒙版所应用的形状的渐变透明度。 使用渐变的蒙版,使用蒙版的矩形以及该矩形下的文本,因此可以看到其透明度如何随着蒙版的渐变而变化。...要显示的矩形如何引用其CSS属性中的fill填充图案,以及如何引用其CSS属性中的mask蒙版。 五、在蒙版中使用填充图案 也可以在蒙版中使用填充图案,从而使蒙版成为填充图案的形状。...定义不同形状的蒙版,设置蒙版的不透明度,蒙版中使用渐变,以及蒙版应用填充图案。都通过项目,进行详细的讲解。 希望能够帮助你更好的学习。

    2K10

    【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )

    插件 | Swiper 组件 ) 基础上进行开发 ; 一、移除顶部状态栏空白 ---- 在 Flutter 界面上方 , 默认有个状态栏 , 显示时间 , 电量 , 网络 , 信号强度等信息 , 这个状态栏是半透明的..., ); } 上述设置 , 实现了在 Swiper 组件上方显示了 Text 组件 , 并且 Text 组件覆盖了 Swiper 组件 ; 三、透明度组件 ---- Opacity 组件可以控制该组件的透明度改变..., 修改 opacity 属性 , 可以改变组件的透明度效果 , 0 是完全透明 , 1 是完全不透明 ; /// 透明度可变组件 Opacity(...获取滚动的距离 ; 滚动距离在 0 ~ 100 之间时 , 透明度组件透明度从 0 ~ 1 变化 , 如果滚动距离 >= 100 , 则透明度组件为 1 , 如果滚动距离小于 0 , 则透明度为 0.../material.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; /// 应用主界面 class HomePage extends

    1.1K10

    关于Adobe Photoshop调整选区介绍

    未选中的区域显示为该颜色。默认颜色为红色。...黑底 (A):将选区置于黑色背景上 白底 (T):将选区置于白色背景上 黑白 (K):将选区显示为黑白蒙版 图层 (Y):将选区周围变成透明区域 安 F 键可以在各个模式之间循环切换,按 X 键可以暂时禁用所有模式...显示边缘:显示调整区域. 显示原始选区:显示原始选区。 高品质预览:渲染更改的准确预览。此选项可能会影响性能。选择此选项后,在处理图像时,按住鼠标左键(向下滑动)可以查看更高分辨率的预览。...取消选择此选项后,即使向下滑动鼠标时,也会显示更低分辨率的预览。 透明度/不透明度:为“视图模式”设置透明度/不透明度。...注意: 单击 (复位工作区),可将设置恢复为您进入“选择并遮住”工作区时的原始状态。另外,此选项还可以将图像恢复为您在进入“选择并遮住”工作区时,它所应用的原始选区或蒙版。

    2.5K60

    苹果iOS 13 新设计规范全面解析

    例如,在浅色模式下,用RGB色(255.255.255)100%的不透明度来作为背景颜色,那么在深色模式会使用RGB色(255.255.255)100%的不透明作为背景颜色。...在填充色,分隔线和系统色中,建议大家使用各种透明度的颜色来处理,确保在黑暗模式和白色模式下,这些颜色都能很好的适配。 ? 当然,不是所有的颜色都可以用透明色,比如下面这种。...例如,交叉或重叠元素(例如网格中的线条或条形)在不透明度方面看起来更好。 通常,为UI元素使用语义定义的系统颜色。上下两图分别为默认颜色和无障碍颜色: ? ?...如果您必须在暗模式下使用白色背景作为内容,请选择稍暗的白色,以防止背景对周围的暗色内容太刺眼。比如可以为白色背景加一些透明度,这样舒适性更好。...(对于设计师来说,我们不需要完全严格遵循这些色值,只需要保证在不同厚度下的透明度能达到基本的对比度要求即可,比如右边的两个设计方案,可读性就非常差,不建议使用-静电注) ?

    4.6K40
    领券