开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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 入门

PrimeVue在npm可用，如果您有现有应用程序，请运行以下命令以将PrimeVue和PrimeIcons下载到您的项目

03

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

Material You 是下一代 Material Design 的发展方向，也是一种全新的设计愿景: 方便您打造个性化的样式设计、满足各种需求并自适应各种屏幕；Jetpack Compose 是用于构建原生 Android 界面的新款现代工具包，可以帮助您更快地构建更出色的应用。

02

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

和尚前两天刚学习了 ButtonBar 按钮容器，今天顺便学习一下 ToggleButtons 按钮切换容器组，其切换效果可以应用在日常 TabBar 切换位置；

03

再不迁移到Material Design Components 就out啦

我们最近宣布了 Material Design Components（MDC）1.1.0 ，这是一个库更新，为您的 Android 应用程序带来了 Material Theming 、新的组件、深色主题和其他令人兴奋的功能。

03

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

和尚想自定义一个水波纹按钮，即默认向外扩散的水波样式；实现方式有很多种，和尚尝试最基本的 AnimationController 逐层绘制来处理，和尚简单记录一下尝试过程；

03

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

但是这样在5.0以下的系统,这样就没有效果,按钮会变成默认的灰色状态,点击按钮也不会有颜色的状态区别为了兼容5.0以下的设备,我们可以利用seletor(勘误:button用theme在5.0以下也是有按压变色的,虽然没有水波纹,下面的方法仍然适用其他控件的适配)

03

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

我们需要在xml中使用自定义属性来控制初始值，如内圆半径，扩散颜色，内圆颜色等

01

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

Button 在日常中是必不可少的，和尚尝试过不同类型的 Button，也根据需求自定义过，今天和尚系统的学习一下最基本的 Button；

02

打造 Material 字体样式主题 | 实现篇

使用 Material 主题 (Theming) 自定义 Material 组件，目的是让组件观感与品牌保持一致。Material 主题包括颜色、字体和形状参数，您可以对这些参数进行调整来获得近乎无限的组件变体，同时保持其核心结构和易用性。

02

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

导语 BIM+IDC从2017年1.0版本,历经一次1.1版本更新，迭代至2020年2.0版本。从基于设备父子关系定位数据中心配电设备故障的根因，到探索全设备拓扑关系及IDC仿真模拟，并最终在2020年实现了基于数据中心全生命周期内各项数据的采集清洗，训练出一套基于大数据分析、专家判断、物理关系搭建的根因分析模型。历时3年，我们逐步完成了7D-BIM概念的现场落地。基于数据中心系统图、设备属性与告警信息构建BIM数据库；在此基础上构建拓扑结构，实现三级分层（物理层[配电、空调系统]、管控层[告警]、能

02

Material Design Compoents 1.1.0

Material Components for Android（MDC）是从以前的 Design Support Library 库演变而来，是与 AndroidX 来搭配的。考虑到版本兼容和过渡，一开始的 1.0.0 版本与 design 库 28.0.0 是等价的。命名发生了改变从 com.android.support.design到 com.google.android.material 。不过后续更新 design 库就不再更新了，也就是说 design 库就永远的停留在了 1.0.0 这个版本了。

01

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

在 Android 5.0 以后，随着 Material Design 的提出，Android UI 设计语言可谓是提升了一大步，但是在国内其实并没有得到很大的推广应用。

04

Android：RippleDrawable 水波纹/涟漪效果

RippleDrawable可以实现上面效果图中的水波纹效果，它是在API 21 中添加的，所以，低于21的版本中不可使用。它的继承关系如下：

02

Android实现水波纹控件的方法

利用贝塞尔曲线绘制圆弧（也就是水波的波纹）通过动画改变绘制的起始点使水波纹平移

03

Flutter 组件集录 | 新一代 Button 按钮参上

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 2 天，点击查看活动详情

01

android自定义WaveView水波纹控件

本文实例为大家分享了android自定义WaveView水波纹控件的使用方法，供大家参考，具体内容如下

02

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

和尚在学习 Flutter过程中遇到很多有趣的小知识点，平时可能不太注意或一些简单直接的小功能点，准备整理一个小系列，方便日后的查找使用。

03

自己做个 Material Ripple 效果的按钮

我第一次发现 Material Design 是几年前玩 Android（当时还不会开发 Android 应用程序）时候看到的些贴文。那时候我就超级喜欢它的按钮组件。它有着波纹效果，以简单，优雅的方式为用户提供反馈，Q 弹爆汁儿～

03

【Flutter 组件集录】Card | 8 月更文挑战

卡片效果作为 Material Design 中的一员，Flutter 中 Card 组件自然是要有的。源码注释中是这么描述它的：带有轻微圆角和立面阴影的面板。本文将从源码的角度看一下 Card 组件的构成，并讲述一下 Card 在使用中的一些细小的注意点。

04

Ng-Matero v15 正式发布

前言 Angular 按照既定的发版计划在 11 月中旬发布了 v15 版本。推迟了一个月（几乎每个版本都是这个节奏😳），Ng-Matero 也终于更新到了 v15。其实 Ng-Matero 本身的更新非常简单，但是同步维护的 Material Extensions 这个库要先于 Ng-Matero 发布，所以大部分精力都耗费在组件库上面了。我已经很久没有写关于 Ng-Matero 的发版文章了。上次介绍发版还是 v10 版本，竟然已经是两年前的事情了。在这两年的开源生涯中，主要精力都在 Materi

04

Windows 下窗口画图---十天教会你俄罗斯方块

接上篇：https://blog.csdn.net/qq_41603898/article/details/80968333

01

Android 水波纹效果的探究

水波纹效果从Android5.0就已经出来了，基本的使用相信大家都知道了，这里多谈一些相对深层次的使用：

02

Flutter中GridTile中图像上方的InkVell波纹

使用Stack，我们可以将Material和InkWell带到图像上。要拉伸材质，我们将使用Positioned.fill小部件。

03

Flutter 组件集录 | 从图标按钮看组件封装

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 4 天，点击查看活动详情

01

Android 贝塞尔曲线实现水纹波动效果

最近工作上比较忙碌，很久没有更新文章了，难得国庆小长假，现在是2019年10月2日凌晨00：49，写一篇简单且实用的贝塞尔曲线应用，许多技术点的文章很多前辈都已经写的很好了，所以如有纰漏之处，欢迎留言指正，同时也欢迎各位留言需要的技术点类型，争取奉献更优质的技术文章。

01

Flutter - 处理手势

参考： https://flutter.io/cookbook/gestures/handling-taps/

02

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

和尚继续尝试 Flutter 的基本按钮；今天和尚学习 MaterialButton 系列相关 Button；该系列以 MaterialButton 为父类，衍生出 RaisedButton 凸起按钮，FlatButton 扁平按钮和 OutlineButton 边框按钮；可根据不同场景灵活运用；

04

Flutter lesson 7: Flutter组件之基础组件（三）

上一节我们介绍了Row, Column, Image, Text四个基础组件，这一节我们来看看下面几个组件。

05

你知道吗，Flutter内置了10多种Button控件

Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度。

03

你知道吗，Flutter内置了10多种Button控件

Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度。

00

Flutter | 如何实现一个水波纹扩散效果的 Widget

1.首先要有一个圆2.这个圆会边扩散边消失3.当这个圆扩散到一定程度的时候再绘制一个圆4.有限循环 / 无限循环5.可以有 / 无 Child

03

俄罗斯方块修复BUG版

//*********************************************// //************** 头文件 *********************// //*********************************************// #include <windows.h> #include <time.h> #include "stdafx.h" //*********************************************// //************** 宏定义 *********************// //*********************************************// #define WND_POS_X 10 //窗口左上角点的横坐标 #define WND_POS_Y 10 //窗口左上角点的纵坐标 #define WND_WIDTH 500 //窗口的宽度 #define WND_HEIGHT 600 //窗口的高度 #define RECT_UPPER_X 0 //背景矩形框的左上角点的横坐标 #define RECT_UPPER_Y 0 //背景矩形框的左上角点的纵坐标 #define RECT_LOWER_X 300 //背景矩形框的右下角点的横坐标 #define RECT_LOWER_Y 620 //背景矩形框的右下角点的纵坐标 #define SIDE_LEN 30 //游戏小方块的边长 #define G_ARR_ROW (RECT_LOWER_Y/SIDE_LEN) // 背景矩形框的行数 600/30=20行 #define G_ARR_RANK (RECT_LOWER_X/SIDE_LEN)// 背景矩形框的列数 300/30=10列 #define COMB_ROW 2 //随机方块的组合使用2行4列矩阵存储 #define COMB_RANK 4 #define CHANGE_SIZE 3 //3*3矩阵作为旋转矩阵 #define N_TIMER 1 //定时器的ID #define T_TIMER 500 //定时器的时间，单位为毫秒 #define IDR_MENU1 130 #define IDR_MENU3 133 #define IDI_ICON2 134 #define N_TIMER 1 //*********************************************// //************** 全局变量 *********************// //*********************************************// int g_arrBackGround[G_ARR_ROW][G_ARR_RANK] = { 0 };//背景矩阵 int g_arrRandomSquare[COMB_ROW][COMB_RANK] = { 0 };//随机块组合 int g_nIndex = 0;//随机块组合对应的序号 int G_ROW = 0;//实时记录3*3矩阵的行位置，即需要变形的矩阵位置 int G_RANK = 0;//实时记录3*3矩阵的列位置，即需要变形的矩阵位置 int gScore = 0; //*********************************************// //************** 函数声明 *********************// //*********************************************// //回调函数 LRESULT CALLBACK WndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam); //消息响应函数 void OnCreate();//创建窗口时用作初始化随机数种子 void OnPaint(HDC hDC);//窗口变化时重绘函数 void OnReturn(HWND hWnd);//按键处理--回车键 void OnTimer(HWND hWnd);//定时器响应函数 void OnDown(HWND hWnd);//向下加速 void OnLeft(HWND hWnd);//左移响应函数 void OnRight(HWND hWnd);//右移响应函数 void OnU

02

Android OpenGL ES 实现动态（水波纹）涟漪效果

最近一个做视频滤镜的朋友，让我给他做一个动态水波纹效果，具体就是：点击屏幕上的某一位置，然后波纹以该位置为中心向周围扩散。

02

Android5.0中多种水波纹效果的实现代码

水波纹效果已经不是什么稀罕的东西了，用过5.0新控件的小伙伴都知道这个效果，可是如果使用一个TextView或者Button或者其它普通控件的话，你是否知道如何给它设置水波纹效果呢？OK，我们今天就来看看这个水波纹效果的实现。水波纹效果的实现有系统自带属性可以实现，我们也可以自定义实现效果。

02

俄罗斯方块

//*********************************************// //************** 头文件 *********************// //*********************************************// #include <windows.h> #include <time.h> #include "stdafx.h" //*********************************************// //************** 宏定义 *********************// //*********************************************// #define WND_POS_X 10 //窗口左上角点的横坐标 #define WND_POS_Y 10 //窗口左上角点的纵坐标 #define WND_WIDTH 500 //窗口的宽度 #define WND_HEIGHT 600 //窗口的高度 #define RECT_UPPER_X 0 //背景矩形框的左上角点的横坐标 #define RECT_UPPER_Y 0 //背景矩形框的左上角点的纵坐标 #define RECT_LOWER_X 300 //背景矩形框的右下角点的横坐标 #define RECT_LOWER_Y 620 //背景矩形框的右下角点的纵坐标 #define SIDE_LEN 30 //游戏小方块的边长 #define G_ARR_ROW (RECT_LOWER_Y/SIDE_LEN) // 背景矩形框的行数 600/30=20行 #define G_ARR_RANK (RECT_LOWER_X/SIDE_LEN)// 背景矩形框的列数 300/30=10列 #define COMB_ROW 2 //随机方块的组合使用2行4列矩阵存储 #define COMB_RANK 4 #define CHANGE_SIZE 3 //3*3矩阵作为旋转矩阵 #define N_TIMER 1 //定时器的ID #define T_TIMER 500 //定时器的时间，单位为毫秒 #define IDR_MENU1 130 #define IDR_MENU3 133 #define IDI_ICON2 134 #define N_TIMER 1 //*********************************************// //************** 全局变量 *********************// //*********************************************// int g_arrBackGround[G_ARR_ROW][G_ARR_RANK] = { 0 };//背景矩阵 int g_arrRandomSquare[COMB_ROW][COMB_RANK] = { 0 };//随机块组合 int g_nIndex = 0;//随机块组合对应的序号 int G_ROW = 0;//实时记录3*3矩阵的行位置，即需要变形的矩阵位置 int G_RANK = 0;//实时记录3*3矩阵的列位置，即需要变形的矩阵位置 int gScore = 0; //*********************************************// //************** 函数声明 *********************// //*********************************************// //回调函数 LRESULT CALLBACK WndProc(HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam); //消息响应函数 void OnCreate();//创建窗口时用作初始化随机数种子 void OnPaint(HDC hDC);//窗口变化时重绘函数 void OnReturn(HWND hWnd);//按键处理--回车键 void OnTimer(HWND hWnd);//定时器响应函数 void OnDown(HWND hWnd);//向下加速 void OnLeft(HWND hWnd);//左移响应函数 void OnRight(HWND hWnd);//右移响应函数 void OnUp(

01

推荐一款强大的 Android OpenGL ES 调试工具

GAPID (Graphics API Debugger)是 Google 的一款开源且跨平台的图形开发调试工具，用于记录和检查应用程序对图形驱动程序的调用，支持 OpenGL ES 和 Vulkan 调试。

04

Flutter中的按钮组件Button

1. onPressed 按下按钮时触发的回调方法，为必填参数，如果值为 null 表示禁用按钮，会显示禁用相关样式；

01

Spring Cloud Sleuth的MDC集成实现自定义跟踪

Spring Cloud Sleuth是一个基于Spring Cloud的分布式跟踪解决方案。它使用了Google Dapper的思想，通过在服务调用链路上添加唯一的traceId和spanId来追踪请求的流转情况。而MDC（Mapped Diagnostic Context）则是log4j和logback等日志框架中的一个功能，它可以在日志输出时动态添加一些关键信息，便于问题的定位和排查。

01

Android使用BottomNavigationBar实现导航栏功能

以上所述是小编给大家介绍的Android BottomNavigationBar导航栏功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持！

04

MDC是什么鬼？用法、源码一锅端

近期用到阿里的一款开源的数据同步工具 Canal，不经意之中看到了 MDC 的用法，而且平时项目中也多次用到 MDC，趁机科普一把。

04

我不是最后一个知道MDC的吧？

世上知识千千万，还好有我来相伴。大家好久不见，我是walking。今天给大家带来一个日志方面的知识——MDC，不知道大家认识不，反正我是最近刚知道的? 初见MDC 前两天看项目中的代码，无意中看到一

02

Android Material UI控件之MaterialButton

作为Android的开发者，常用控件肯定少不了按钮控件，常规的按钮控件，只能满足基本需求，而日常开发中，都会有渐变按钮，圆形按钮，或者立体按钮，这些都需要自己的设置样式，就拿圆角按钮来说，可能你会这是一个shape文件，然后设置背景和圆角的大小，最后在按钮的background属性中设置好，就是一个圆角的按钮了。这样就显得有些麻烦了，因为要你时碰到一个花里胡哨的UI和搞事情的产品，你就完犊子了。你会创建很多这样的drawable文件，并且每一个你还要命名规范，改起来是很费劲的。而MaterialButton就很好的帮你解决这些问题。让你的UI开发变得轻松一些。是骡子是马，牵出来溜溜，下面进入正文：

02

Flutter | 使用 InkResponse和 InkWell组件实现事件操作

InkResponse 和 InkWell 内部使用了Ink；可以包裹不具备事件处理的组件，实现水波纹等点击事件的效果； InkWell 水波纹限制在文本组件之内； InkResponse 水波

02

Spring Boot 之 MDC 实现全链路调用日志跟踪

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 、logback及log4j2 提供的一种方便在多线程条件下记录日志的功能。MDC 可以看成是一个与当前线程绑定的哈希表，可以往其中添加键值对。MDC 中包含的内容可以被同一线程中执行的代码所访问。当前线程的子线程会继承其父线程中的 MDC 的内容。当需要记录日志时，只需要从 MDC 中获取所需的信息即可。MDC 的内容则由程序在适当的时候保存进去。对于一个 Web 应用来说，通常是在请求被处理的最开始保存这些数据

02

logback自定义日志格式

然后在logback.xml配置文件中，定义自定义标签define name代表标签，class指向处理的类。在初始化时调用getPropertyValue()

02

实战！SpringBoot+MDC实现全链路调用日志跟踪~

前面有一篇文章简单的介绍过MDC，这次结合具体的案例、生产中的具体问题深入了解一下MDC。

03

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

终于把基本的组件扯完了,真的是多如牛毛。现在让我们来看一下控件如何实现交互最后会实现一个简单的有点笔触效果的画布,来说明如何使用手势交互。 1.从RaisedButton看事件交互 Flutte

01

操作日志追踪记录之MDC入门

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 和 logback 提供的一种方便在多线程条件下记录日志的功能。某些应用程序采用多线程的方式来处理多个用户的请求。在一个用户的使用过程中，可能有多个不同的线程来进行处理。典型的例子是 Web 应用服务器。当用户访问某个页面时，应用服务器可能会创建一个新的线程来处理该请求，也可能从线程池中复用已有的线程。在一个用户的会话存续期间，可能有多个线程处理过该用户的请求。这使得比较难以区分不同用户所对应的日志。当需要追踪某个用户在系统中的相关日志记录时，就会变得很麻烦。

03

SpringBoot + MDC 实现全链路调用日志跟踪

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 、logback及log4j2 提供的一种方便在多线程条件下记录日志的功能。MDC 可以看成是一个与当前线程绑定的哈希表，可以往其中添加键值对。MDC 中包含的内容可以被同一线程中执行的代码所访问。当前线程的子线程会继承其父线程中的 MDC 的内容。当需要记录日志时，只需要从 MDC 中获取所需的信息即可。MDC 的内容则由程序在适当的时候保存进去。对于一个 Web 应用来说，通常是在请求被处理的最开始保存这些数据。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭