【数字孪生实战案例】怎样实现点击一个按钮后,其他按钮自动恢复为默认样式?~山海鲸可视化

在可视化界面与大屏交互设计中,按钮组的状态统一管理是提升体验的关键。如何实现点击一个按钮时自动重置其他按钮为默认样式,让选中状态清晰唯一,本文将简要介绍这一实用交互的实现思路。

1.在左侧组件库添加两个**"按钮"**组件至项目中

接着选中左侧的图层按钮,右键选择**"重命名"**,便于后续添加交互时快速识别并勾选对应组件。

2.选中按钮 1,在右侧**"样式"** 面板中进入**"样式设置"** ,在**"选中后"** 选项下开启**"启用选中"** ;并在**"文字样式"** 中调整**"字体"**大小与颜色,以便清晰区分状态。

3.选中按钮 2,在右侧配置栏选择**"交互"** 设置,触发**"点击"** 事件并执行**"自定义"** 动作;将目标组件设为 "按钮 1" ,自定义动作选择 **"取消按钮选中"**即可。

展示效果如下:

相关推荐
航鑫光电9 小时前
Canvas 手写实时波形图:一套通用的传感器数据可视化方案
数据可视化
尘中远14 小时前
【Qwt 7.0 系列】快速入门与核心新特性概览 —— 更现代的 Qt 数据可视化库
qt·数据可视化·绘图·qwt·科学绘图
柳杉19 小时前
别再手写大屏了!用这套「3D 地图 + 拖拽脚手架」示例源码,交付效率提升 80%
前端·three.js·数据可视化
黎阳之光19 小时前
黎阳之光实时三维重构:重构智慧铁路全新管控范式
大数据·人工智能·物联网·算法·数字孪生
尘中远1 天前
【Qwt 7.0 系列】坐标轴与刻度系统 —— 刻度引擎、网格、图例与刻度朝内
qt·数据可视化·qcustomplot·qwt·工业软件·科学绘图
尘中远2 天前
【Qwt 7.0 系列】交互功能详解 —— 平移、缩放、坐标轴交互与数据拾取
qt·数据可视化·绘图·qcustomplot·qwt·科学绘图
尘中远2 天前
【Qwt 7.0 系列】高级科学图表 —— 光谱图、向量场、K线图与极坐标绘图
qt·数据可视化·qwt·工业软件·科学绘图·云图·向量场
江华森2 天前
数据可视化实战:从 seaborn 到 pyecharts 的 7 个动手实验
python·数据可视化
weixin_424813753 天前
2026-07-03-05-职业发展-数字孪生开发者2026下半年生存指南从执行者到价值创造者
职业发展·开发者·数字孪生·ai时代·技能提升
柳杉6 天前
可视化大屏设计器脚手架:从设计到交付的一站式方案
前端·three.js·数据可视化