开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

MDC按钮波纹根本不绘制

基础概念

MDC（Material Design Components）是谷歌推出的基于Material Design设计规范的组件库。MDC按钮波纹效果是一种视觉反馈机制，当用户触摸按钮时，按钮表面会出现一个扩散的波纹效果，以增强用户的交互体验。

相关优势

增强用户体验：波纹效果可以提供即时的视觉反馈，让用户知道他们的操作已被系统识别。
一致性：使用MDC组件库可以确保应用在不同平台上的UI一致性。
可定制性：MDC提供了丰富的配置选项，允许开发者根据需要自定义波纹效果。

类型

MDC按钮波纹效果主要有以下几种类型：

基础波纹：默认的波纹效果，从触摸点向外扩散。
中心波纹：波纹效果从按钮中心开始扩散。
动画波纹：可以自定义波纹的动画效果。

应用场景

MDC按钮波纹效果广泛应用于各种需要用户交互的界面，如按钮、卡片、列表项等。

问题原因及解决方法

如果你遇到MDC按钮波纹效果不绘制的问题，可能是以下几个原因导致的：

未正确引入MDC库：确保你已经正确引入了MDC的CSS和JavaScript文件。
未正确引入MDC库：确保你已经正确引入了MDC的CSS和JavaScript文件。
未初始化MDC组件：确保在页面加载完成后初始化MDC组件。
未初始化MDC组件：确保在页面加载完成后初始化MDC组件。
CSS冲突：检查是否有其他CSS样式影响了MDC波纹效果。
CSS冲突：检查是否有其他CSS样式影响了MDC波纹效果。
JavaScript错误：检查控制台是否有JavaScript错误，这些错误可能会阻止MDC组件的正常初始化。
JavaScript错误：检查控制台是否有JavaScript错误，这些错误可能会阻止MDC组件的正常初始化。

示例代码

以下是一个完整的示例，展示了如何使用MDC按钮波纹效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MDC Button Ripple Example</title>
    <link href="https://unpkg.com/@material/button@4.0.0/dist/mdc.button.min.css" rel="stylesheet">
</head>
<body>
    <button class="mdc-button mdc-ripple-surface">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__label">Click Me</span>
    </button>

    <script src="https://unpkg.com/@material/button@4.0.0/dist/mdc.button.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));
        });
    </script>
</body>
</html>

参考链接

通过以上步骤，你应该能够解决MDC按钮波纹效果不绘制的问题。如果问题仍然存在，请检查是否有其他特定的环境或配置问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

PrimeVue 入门

md-dark-indigo/theme.css primevue/resources/themes/md-dark-deeppurple/theme.css primevue/resources/themes/mdc-light-indigo.../theme.css primevue/resources/themes/mdc-light-deeppurple/theme.css primevue/resources/themes/mdc-dark-indigo.../theme.css primevue/resources/themes/mdc-dark-deeppurple/theme.css primevue/resources/themes/saga-blue...luna-green/theme.css primevue/resources/themes/luna-pink/theme.css primevue/resources/themes/rhea/theme.css 波纹...波纹是受支持的组件（例如按钮）的可选动画。

2.2K3 0

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

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

8443 0

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.3K2 0

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.2K3 0

实战 | 在应用中使用 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.9K2 0

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

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

1.1K4 0

【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.3K3 0

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); //绘制扩散的圆

6121 0

安卓软件开发：使用AndroidView（MDC）实现高级轮播图App-下篇

Jetpack Compose 完全基于声明式 UI编写代码，不需要写XML，UI 的更新和状态绑定，只需改变状态，Compose 会自动重新绘制界面。...UI 会根据状态的变化自动重新绘制。开发界面很直观，只需要改变状态，Compose 会自动处理 UI 更新。...举个例子，用 Compose 处理按钮点击事件后改变按钮文本，代码如下 var count by remember { mutableStateOf(0) } Button(onClick = { count...++ }) { Text("Nim已点击了$count times") } 在 Compose 中，状态的变化（count++）直接触发 UI 的更新，而不需要手动去找这个按钮再更新它的文本内容...MDC：手动更新视图在 MDC 中，需要自己管理 UI 和数据的同步。

4458 1

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

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

1.1K3 1

再不迁移到Material Design Components 就out啦

它使用AppCompat主题，设计支持库中的小部件（包括具有自定义背景的按钮）以及需要迁移的各种其他元素。...在上面的示例中，按钮发生了变化、文本和图标的颜色发生了变化。FAB 现在变成了蓝绿色，并且文本字段看起来完全不同。不用担心。...的颜色调色板直接从 Material Design color system 中绘制。...green_500 + @color/navy_900 @color对于包含的按钮文本颜色...默认情况下，所有的 MDC 控件都将此可绘制对象当做背景，我们也可以考虑将它用作自定义 View 的背景。它可以处理形状主题、阴影、黑色主题等等。因此。

3.2K3 0

Android：RippleDrawable 水波纹涟漪效果

其中id 为 mask 的item 在初始化界面时不会直接绘制出来，而是在发生触摸之后才会绘制。 mask 直译过来有遮罩的意思，它会限定水波纹的范围。...没有指定mask ，并且也没有指定radius 时，会以控件宽高中的较大值为直径绘制水波纹，这样就必然会超出控件的范围，所以，这种效果也叫做无界水波纹效果。...--无界水波纹效果，所谓无界，实际是以空间宽度或高度中的大值作为直径绘制一个园--> <TextView android:layout_width...--有界水波纹效果。...水波纹效果只在控件内绘制--> <TextView android:layout_width="match_parent"

2.6K2 0

【Flutter 专题】61 图解基本 Button 按钮小结 (一)

CloseButton / PopupMenuButton 继承自 IconButton；最终 RawMaterialButton 和 IconButton 都是由 ConstrainedBox 填充绘制...IconButton 系列 IconButton 系列属于图标按钮，使用相对简单；其核心是 InkResponse 水波纹效果； IconButton 源码分析 const IconButton({...this.color, // 图标颜色 this.highlightColor, // 点击高亮颜色 this.splashColor, // 水波纹颜色...duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM)); 和尚尝试其中几个属性；其中 icon 颜色为 cyan，点击高亮背景色为 deepPurple，水波纹颜色为...填充颜色 this.highlightColor, // 背景高亮颜色 this.splashColor, // 水波纹颜色

1.5K2 1

自己做个 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.5K3 0

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

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

1.1K1 0

Android Material UI控件之MaterialButton

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

3.3K2 0

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

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

6722 0

Flutter手势交互+自定义绘板组件v0.01

1.从RaisedButton看事件交互 Flutter的组件中有很多是有点击事件的，比如按钮，这里简单翻一下源码。...1.1：RaisedButton的使用下面是RaisedButton的简单使用,点击按钮会打印日志 var show = RaisedButton( child: Text("RaisedButton...(注:Container背景色会掩盖水波纹)。...条线，所以是点的集合的集合 _lines 2.组件为有状态组件,_lines为状态量,在移动时将点加入当前所画的线 3.当抬起时说明一条线完毕，应该拷贝入_lines,并清空当前线作为下一条 4.绘制单体类有颜色...} @override bool shouldRepaint(CustomPainter oldDelegate) { return true; } ///根据点位绘制线

1.4K1 0

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

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

4.1K7 0

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

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

8K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭