文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Flutter 专题】133 图解自定义 ACEWaterButton 水波纹按钮

和尚想自定义一个水波纹按钮，即默认向外扩散的水波样式；实现方式有很多种，和尚尝试最基本的 AnimationController 逐层绘制来处理，和尚简单记录一下尝试过程； ACEWaterButton...和尚画了一个简单的图如下，预期的水波纹按钮包括两层，以中心圆(蓝色)为基础逐步向外围扩散至(绿色)，并循环重复； 1....和尚在通过 ACEWaterPainter 绘制水波纹过程中，起始位置从内置圆开始，那是否可以省略第一步的内置圆呢？...暂时先不缺省，因为和尚在设置水波纹扩散过程中，同时设置了透明度的渐变，若缺省内置圆会影响 innerIcon 的展示效果；但内置圆绘制位置可以调整，也可以在 ACEWaterPainter 中进行绘制；...，和尚默认设置为 true 进行重绘； ---- ACEWaterButton 案例源码 ---- 和尚对 ACEWaterButton 水波纹按钮的简单效果已满足，但还不够完善，对于重绘的机制还需要优化

80330
您找到你想要的搜索结果了吗？
是的
没有找到

BIM+IDC智造更好运维V2.0

V2.0 基于大数据根因分析 1.3 提出影响因子模型 V2.0版本不再局限于设备关系，深入探索到单个设备内各个测点参数；研究设备输入和输出参数对内和对外影响关系，深挖测点与测点影响因子，搭建一套辅助于根因分析的影响因子模型...V2.0 MDC模型页面 1.5 告警系统升级 不仅在告警二维页面弹出告警内容，点击定位按钮跳转到模型页面可快速聚焦到告警设备，帮助工程师确认现场告警的实际物理位置。...同时V2.0版本增加了告警分析按钮，转入智能分析页面后，可根据系统运算的根因分析结果，快速判断造成该告警产生的根本原因。 ?...但是该指标在正负样本不平衡的情况下表现的效果不理想。...图3.3 测点预测页面及真实值与预测值对比曲线 3.4 案例解析 回到文章开篇提到的2020年6月11日上午09：46：01的故障，现场运维人员发现一条列间空调送风温度高的告警故障后，点击根因分析按钮

1.3K20

Android 5.0 Button 按钮水纹效果的适配问题

indigo @color/pink 但是这样在5.0以下的系统,这样就没有效果,按钮会变成默认的灰色状态...,点击按钮也不会有颜色的状态区别 为了兼容5.0以下的设备,我们可以利用seletor(勘误:button用theme在5.0以下也是有按压变色的,虽然没有水波纹,下面的方法仍然适用其他控件的适配)...mask" android:drawable="@color/white" />里面的色值可以任选一个 android:id=”@android:id/mask”会让系统并不会真的绘制...,并告知波纹的绘制边界 如果写成下面,波纹的绘制范围会超出控件的边界 如上,这样设置后5.0以下的设备具有按钮按下变色的效果,5.0以上就具有水波纹效果.其他控件同理 后续: Material Design Button 的 disable 效果

1.2K30

手撕一个让人「欲罢不能」的水波纹选中控件

水波纹控件 有了这些之后，你会发现，整个点击选中的体验大幅提升，会让人有一个丝丝顺滑的感觉，如果体验足够好，甚至会让人点上瘾，你会不自觉地在不同的按钮来回点击，体验这种舒服的过渡感。...绘制水波纹 动画参数有了，剩下的就是绘制了。可以有两个选择，一个是在 onDraw 方法中绘制，一个是在 dispatchDraw 中绘制。...绘制子View super.dispatchDraw(canvas) } // ...... } 绘制其实很简单，就是在绘制子 View 之前，把背景色和水波纹绘制上去就完成了...，绘制的时候，水波纹同心圆 和 圆角矩形 交汇的地方就会显示 水波纹的颜色，其余透明的地方不显示。...先绘制底部 SRC (圆角矩形)，然后设置水波纹画笔的 xfermode ，接着绘制 DST (水波纹)，最后取消混合模式。 这样，一个带圆角的水波纹就实现了。

1.1K40

实战 | 在应用中使用 Compose Material 3

让我们看看前后有何不同: △ Material 2 中的 Surface △ Material 3 中的 Surface 组件更新 Material 3 对许多组件进行了更新，比如按钮、应用栏、对话框...现在，波纹效果会在按下时使用细微的闪光照亮表面，滚动效果则会在滚动容器的边缘使用拉伸效果。...MDC-AndroidCompose Theme Adapter 库 是一款支持重用 Android XML 主题的 Material 组件，以方便我们在 Jetpack Compose 中设置主题。...现有的 MdcTheme 可组合项与 Material 2 XML 主题兼容，我们还引入了一个新的 Mdc3Theme 可组合项，它与 Material 3 XML 主题兼容。...此外，我们还更新了 Compose 中的主题设置 指南，以及在前面看到的 Jetchat 示例和 Compose Material Catalog 应用，以及 MDC-Android ComposeTheme

2.7K20

1、创建RippleView.class, 继承与View

PS:自定义view篇-水波纹实现 效果：水波纹扩散 场景：雷达、按钮点击效果、搜索等 实现：先上效果图，之前记得支付宝有一个咻一咻，当时就是水波纹效果，实现起来一共两步，第一画内圆，第二画多个外圆...开工 1、创建RippleView.class, 继承与View RippleView主要初始化一些数据， onSizeChanged主要获取位置坐标 onDraw主要绘制图像，关键...super.onSizeChanged(w, h, oldw, oldh); 　　//圆心位置 　　centerX = w / 2; 　　 centerY = h / 2; 　　}  2、开始绘制...onDraw（） 　　我们已经做了好前奏，剩下的就开始绘制了，首先我们要确定几个圆才能形成水波纹效果，1,2还是3，不确定那就先从一个开始，spreadRadius我们在创建画笔时已经添加了一个圆，那我们就遍历...int width = spreadRadius.get(i); spreadPaint.setAlpha(alpha); //绘制扩散的圆

58110

【Flutter 专题】129 图解 ToggleButtons 按钮切换容器组

和尚前两天刚学习了 ButtonBar 按钮容器，今天顺便学习一下 ToggleButtons 按钮切换容器组，其切换效果可以应用在日常 TabBar 切换位置； ToggleButtons 源码分析...// 有输入焦点时颜色 this.highlightColor, // 选中时高亮颜色 this.hoverColor, // 初始水波纹颜色...this.splashColor, // 选中时水波纹颜色 this.focusNodes, // 接受对应于每个切换按钮焦点列表 this.renderBorder...= true, // 是否绘制边框 this.borderColor, // 未选中边框颜色 this.selectedBorderColor, // 选中边框颜色...6. renderBorder renderBorder 用于是否绘制边框，默认是 true；若为 false 则不进行边框绘制； _toggleWid06(index, isPressed, isBorder

1.3K30

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

InkWell 水波纹效果 和尚在 Android的项目中很多需要水波纹的点击效果，Flutter当然也提供了类似的效果，除了 FlatButton按钮系列外，Flutter还提供了 InkWell...水波纹效果，使用很方便，在需要的地方嵌套即可；例如：用在 ListView的 item中整体效果会好很多。...注意事项： 使用 InkWell时内外层均不建议添加背景色，InkWell默认的水波纹颜色很浅，背景色会遮挡波纹效果； 通过修改 splashColor: Colors.greenAccent,属性可以动态修改水波纹的波纹颜色...Table 表格布局 和尚有个小需求是绘制各个边框，偷懒想到了 Table布局，用法与 Android的基本相同，设置每一行的 TableRow并添加相应的 item，很方便的添加 border

1.1K31

自己做个 Material Ripple 效果的按钮

它有着波纹效果，以简单，优雅的方式为用户提供反馈，Q 弹爆汁儿～ 那时候的我也只会使用固定的 :hover :focus 样式，效果固定而死板，那是我这种一班人用的，Google 那群二班的真的太强了！...stateDiagram-v2 [*] --> 按钮事件 按钮事件 --> 未绑定 按钮事件 --> 已绑定 未绑定 --> 绑定按钮 绑定按钮 --> 动效 已绑定 --> 动效 动效 --> 添加&...因此我们先来绘制一个标准圆： span.ripple { position: absolute; /* 上文中我们提到过的相对绝对位置 */ border-radius: 50%;...scale(0); animation: ripple 600ms linear; background-color: rgba(255, 255, 255, 0.2); } 为了使波纹变圆...这个大小应基于按钮的大小，而位置应基于按钮和光标的位置。

1.5K30

视频剪辑片头设计理念是什么？有 2023年会声会影片头设计与制作

制作文字穿过人物片头 首先，将“沙滩僧侣”素材插入会声会影，点击右侧“轨道管理器”按钮，将覆叠轨的数量设置为2。右击视频轨插入素材后，点击工具栏上的“遮罩创建器”按钮。...图5：插入素材打开遮罩创建器 在遮罩创建器的设置界面中，点击“遮罩刷”绘制遮罩覆盖人物主体，激活遮罩移动工具。...图12：新增轨道并插入素材 选中白底视频后，点击工具栏上的“遮罩创建器”按钮。 图13：打开遮罩创建器 在“遮罩创建器”的设置界面中，使用“矩形”绘制工具在画面中随便画一个长方形。...图14：遮罩设置详细参数 完成以上操作后，点击“确定”按钮回到视频编辑界面。点击“标题”按钮，在预览窗口中输入“永无止境”四个大字。...图21：添加波纹和微风滤镜 双击标题素材，点击“效果”功能界面中的“自定义滤镜”按钮。 在“波纹滤镜”的自定义界面里，在时间轴中部添加一个关键帧。

1K10

Android Material UI控件之MaterialButton

，圆形按钮，或者立体按钮，这些都需要自己的设置样式，就拿圆角按钮来说，可能你会这是一个shape文件，然后设置背景和圆角的大小，最后在按钮的background属性中设置好，就是一个圆角的按钮了。...Image和Vector 默认是Vector，因为虽然你不一定能看到这些图标的绘制路径代码，但是它可以减少你的图片大小，进而减少你的应用大小，也相当于一个小优化，而至于Image,里面有五种类型的图标尺寸...“哪怕是一条内裤、一张卫生纸，都有它们的用处”（出自：《国产凌凌漆》） ⑥ 圆角图标按钮 ? 运行如下图所示： ? 当你点击的时候又会淡白色的水波纹效果。...如果你要问我什么是水波纹效果的话，请看下图： ? 注意到了吗？...其实一般的Button也有这个点击的效果，但是如果要修改这个水波纹的颜色会麻烦一些，需要通过样式来设置才行，但是MaterialButton可以直接修改这个水波纹的颜色。比如我这里改成绿色。

3.1K20

在 css 图层分析这方面，Chrome Devtools 属实不太行

其实什么样式会创建图层根本不用记，分享给大家一个图层分析的利器：Safari Devtools 的 Layers 工具。...右边的三个按钮分别是显示边框、绘制时显示红色背景，显示页面中所有的层，都勾选上。 显示边框就是会给每个图层加上绿色边框，可以直观地看到有哪些区域是在单独的图层渲染的。...显示页面中所有的层会在右边列出页面中所有图层的根元素，可以看到页面上有 7 个图层，这些图层占据了 47M 的内存。 绘制时显示红色背景就是在每帧渲染都会闪一下，让人能感觉出来做了新一帧的渲染。...比如 html，是因为是根元素创建的图层，这个没啥好说的。 侧边栏是因为有 z-index 为负值的子元素所以创建的图层。...、transform-style、perspective、filter、backdrop-filter 这 6 个之一 当然，这些根本不用记，用 Safari Devtools 可以直接把图层分析出来并给出原因

64920

React Native按钮详解|Touchable系列组件使用详解

Native中没有专门的按钮组件。...TouchableNativeFeedback：在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似水波纹的视觉效果。...提示：无论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只支持一个组件，如果你需要多个组件同时相应单击事件，可以用一个View将它们包裹着，它的这种根节点只支持一个组件的特性和...在上面例子中我们模拟了用户登录的效果，默认状态下按钮是可以响应用户点击事件的，在正在登录过程中我们通过disabled属性来禁用了按钮，这时无论是单击还是长按按钮都是没有任何响应的，在停隔2s后，我们又将按钮解除禁用...Native加入了TouchableNativeFeedback 组件，TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的属性的基础上增加了按下去的水波纹效果

4.1K70

Flutter 组件 | ValueListenableBuilder 局部刷新小能手

ValueListenableBuilder 引言 我们对初始项目非常熟悉，在 _MyHomePageState 中，通过点击按钮将状态量 _counter 自加，在使用 setState 让当前 State...注意，这里的很多帧是由于 FloatingActionButton 的水波纹效果。界面的变化是果，帧的刷新是 因。 ?...水波纹的效果也是在 RawMaterialButton 被点击时通过 setState 来刷新实现的。这也是另一种局部刷新实现的方式：组件分离，将状态变化的刷新封装在组件内部，向外界提供操作接口。...我们需要监听 PageView 的滑动，而这个滑动触发频率是非常高的，如果全局刷肯定不好，虽然视觉上体现不明显，但隐患往往就是一点点额外消耗所累加的结果,当最后一根稻草来临时，没有一片雪花是无辜的。...} Widget _buildWithPageChange(BuildContext context, int value, Widget child) { return Text( "绘制集录

7.7K41

探秘平衡阀

动态压差平衡阀 如图3所示为动态压差平衡阀，亦称自力式压差控制阀、差压控制器、压差平衡阀等，它是用压差作用来调节阀门的开度，利用阀芯的压降变化来弥补管路阻力的变化，从而使在工况变化时能保持压差基本不变...末端负载不变时，若主管路流量发生变化，阀门不会自动调节，环路1和环路2根据平衡阀设定的阻力大小分配流量。 动态流量平衡阀由自动调节阀瓣和手动调节阀瓣组成。...在每个MDC的水分配单元入口处，设置了动态平衡阀，用以维持MDC各空调盘管进出水之间的压力，减小各支路进行水力调节的过程中对其他支路的影响，同时缓冲系统水压变化对末端水力平衡的影响。...当同一个IT机房中某一MDC的负载变大时，水阀开大，流量变大，此时其他MDC由于受到动态压差控制阀的控制，其进出水的压差保持恒定，MDC内各空调盘管的水流量维持恒定。 ?...那么动态压差平衡阀是否可以替代呢，加设没有压差平衡阀，末端各MDC进出水的压差便是否受到内部及外部水压变化的影响呢？

1.3K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券