「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
本篇将带你实现一个滑动选择器应用,用户可以通过滑动条选择不同的数值,并实时查看选定的值和提示。这是一个学习如何使用 Slider
组件、状态管理和动态文本更新的良好实践。
关键词
- UI互动应用
Slider
组件- 状态管理
- 动态数值更新
- 用户交互
一、功能说明
在这个滑动选择器应用中,用户通过滑动条选择值,应用实时更新并显示当前选择的值。根据不同的数值范围,文本提示会变化,增加交互效果。
二、所需组件
@Entry
和@Component
装饰器Column
和Row
布局组件Text
组件用于显示文本Slider
组件用于滑动选择@State
修饰符用于状态管理
项目结构
- 项目名称:
SliderSelectorApp
- 自定义组件名称:
SliderSelectorPage
- 代码文件:
SliderSelectorPage.ets
、Index.ets
三、代码实现
// 文件名:SliderSelectorPage.ets// 定义滑动选择器页面组件
@Component
export struct SliderSelectorPage {// 定义一个状态变量 selectedValue,用 @State 修饰符管理其状态变化@State selectedValue: number = 50; // 初始值设为 50// build() 方法构建页面布局和组件build() {Column({ space: 20 }) { // 创建垂直布局容器,子组件之间的间距为 20// 显示当前选择的数值Row() {Text(`当前选择的值: ${this.selectedValue}`) // 显示选定的值.fontSize(24) // 设置字体大小.fontWeight(FontWeight.Bold) // 设置字体为粗体.alignSelf(ItemAlign.Center) // 水平居中对齐.fontColor(Color.Black); // 设置文本颜色为黑色}// 滑动选择器组件Slider({ min: 0, max: 100, value: this.selectedValue }) // 创建滑动选择器,范围为 0-100.onChange((value: number) => { // 滑动时触发事件this.selectedValue = value; // 更新选定的值}).blockColor(Color.Blue) // 设置滑块颜色.trackColor(Color.Gray) // 设置滑动条背景颜色.width('80%') // 设置宽度为 80%.alignSelf(ItemAlign.Center); // 水平居中对齐// 动态显示提示文本,根据选定的值显示不同的提示和颜色Row() {Text(this.getFeedbackMessage()) // 获取反馈文本.fontSize(18) // 设置字体大小.alignSelf(ItemAlign.Center) // 水平居中对齐.fontColor(this.getFeedbackColor()); // 设置文本颜色}}.padding(20) // 设置内边距.width('100%') // 设置容器宽度为 100%.height('100%') // 设置容器高度为 100%.alignItems(HorizontalAlign.Center); // 垂直居中对齐}// 根据当前值返回不同的提示信息private getFeedbackMessage(): string {if (this.selectedValue > 75) {return '高值选择';} else if (this.selectedValue < 25) {return '低值选择';} else {return '中间值';}}// 根据当前值返回不同的文本颜色private getFeedbackColor(): Color {if (this.selectedValue > 75) {return Color.Red; // 返回红色} else if (this.selectedValue < 25) {return Color.Blue; // 返回蓝色} else {return Color.Green; // 返回绿色}}
}
// 文件名:Index.ets// 导入滑动选择器页面组件
import { SliderSelectorPage } from './SliderSelectorPage'// 定义应用入口组件
@Entry
@Component
struct Index {// build() 方法构建页面布局和组件build() {Column() {SliderSelectorPage() // 引用自定义的滑动选择器组件}.padding(20) // 设置页面内边距}
}
效果示例:用户拖动滑动条时,选定的值会实时更新并显示。根据值的范围,文本提示内容和颜色会动态变化。
四、代码解读
@State selectedValue
:
定义一个状态变量,用于保存当前滑动条的值。状态变化时,UI 会自动刷新。Slider
组件:
实现滑动选择功能,并通过onChange
事件更新selectedValue
。getFeedbackMessage()
和getFeedbackColor()
方法:
根据selectedValue
返回不同的提示文本和颜色,实现动态反馈。
五、优化建议
- 自定义滑动条样式:通过
blockColor
和trackColor
自定义滑动条的外观,提升视觉效果。 - 添加最小和最大值标签:在滑动条的两端添加文本标签,如“0”和“100”。
- 滑动动画:为滑动条添加动画过渡,使用户体验更流畅。
- 多语言支持:根据用户的语言环境显示不同语言的提示文本。
六、相关知识点
- 「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
- 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
小结
本篇教程通过滑动选择器应用的实现,你学会了如何使用 Slider
组件来实现动态数值选择和显示。这为开发更复杂的交互式应用打下了基础。
下一篇预告
下一篇「UI互动应用篇6 - 多选问卷小应用」将展示如何实现用户多选问卷功能,并显示提交后的结果。
上一篇:「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
下一篇:「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用
相关文章:

「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
本篇将带你实现一个滑动选择器应用,用户可以通过滑动条选择不同的数值,并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。 关键词 UI互动应用Slider 组件状态管理动态数值更新用户交互 一、功能说明 在…...

【嵌入式】STM32中的SPI通信
SPI是由摩托罗拉公司开发的一种通用数据总线,其中由四根通信线,支持总线挂载多设备(一主多从),是一种同步全双工的协议。主要是实现主控芯片和外挂芯片之间的交流。这样可以使得STM32可以访问并控制各种外部芯片。本文…...
后端:Spring、Spring Boot-配置、定义bean
文章目录 1. 什么是Bean,如何配置2. 如何配置bean2.1 使用注解Bean2.2 使用注解Import 1. 什么是Bean,如何配置 被spring容器所管理的对象被称为bean,管理方式可以有纯xml文件方式、注解方式进行管理(比如注解Component)。 在Spring Boot中&…...
【Git】Git 远程仓库命令详解
目录 引言1. Git Fetch、Git Pull 和 Git Push 简介1.1 概念总结1.2 图示概念 2. 分支的概念2.1 分支定义2.2 分支的特点2.3 分支示例2.4 基本操作命令2.5 分支的使用场景 3. Git Fetch 用法3.1 基本命令3.2 获取特定分支3.3 查看更新内容3.4 使用示例3.5 适用场景 4. Git Pull…...

html简易流程图
效果图 使用htmlcssjs,无图片,没用Canvas demo: <!DOCTYPE html> <html> <head><link href"draw.css" rel"stylesheet" /><script src"draw.js" type"text/javascript"></…...

Java 入门
目录 Java简介 Java JDK开发环境配置 第一个Java程序 Java标识符与关键字 Java注释 Java常量 Java变量的定义和使用 Java简介 Java简介: Java是由Sun Microsystems公司于1995年推出的一门面向对象的高级程序设计语言,可以运行于多个平台,其…...
JVM基本结构和垃圾回收机制
一、JVM基本结构 Java虚拟机(JVM, Java Virtual Machine)是Java程序执行的环境,其基本结构可以分为以下几个主要部分: 类加载器子系统(Class Loader Subsystem): 负责加载Java类文件到内存中。…...

CentOS 7 安装 ntp,自动校准系统时间
1、安装 ntp yum install ntp 安装好后,ntp 会自动注册成为服务,服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…...

Spring Boot 配置文件启动加载顺序
前言 Spring Boot的启动加载顺序是一个涉及多个步骤和组件的过程。Spring Boot通过一系列默认设置简化了应用程序的配置,使得开发者能够快速地搭建和部署应用。为了实现这一目标,Spring Boot采用了一种分层和优先级机制来加载配置文件。 一、Spring Bo…...
webrtc agc2实现原理
WebRTC的AGC2(自适应增益控制器)是一种用于音频处理的算法,可以根据输入信号的强度自动调整增益,使输出信号的音量保持稳定。其详细原理如下: 噪声估计 首先,AGC2需要对输入信号中的噪声进行估计ÿ…...
2024.11.03 周报
一 实时超分音频同步问题: 处理方向: 按照胡学长的办法尝试: 前面处理视频, 将视频中音频提取出来, 将音频每隔 1-2 秒保存为一段 (这样将音频缓存在内存中) , 然后依次播放, 但是音频是44.1KHz采样率,每秒44100次的频率. 每次间隔中程序处理的极短时间…...
Oceanbase学习之一迁移mysql数据到oceanbase
一、数据库环境 #mysql环境 root192.168.150.162 20:28: [(none)]> select version(); ---------- | version() | ---------- | 8.0.26 | ---------- 1 row in set (0.00 sec) root192.168.150.162 20:28: [(none)]> show variables like ‘%char%’; ---…...
Milvus - GPU 索引类型及其应用场景
1. 背景概述 Milvus 是一款高效的矢量数据库管理系统,支持在高并发和高调用场景下加速相似度搜索。Milvus 的 GPU 支持由 NvidiaRAPIDS 团队提供,可以借助各种 GPU 索引类型来优化性能。本篇将重点解析 Milvus 支持的 GPU 索引类型、适用场景及各自的性…...

Webserver(2.8)守护进程
目录 守护进程案例 守护进程案例 每隔2s获取系统时间,将这个时间写入到磁盘文件中 #include<stdio.h> #include<sys/stat.h> #include<sys/types.h> #include<unistd.h> #include<fcntl.h> #include<sys/time.h> #include<…...

HarmonyOS :
HarmonyOS 移动应用开发 什么是HarmonyOS?: 官方解释:HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 鸿蒙操作系统在传统的单设备系统能力的基础上,提出了基于同一套系统能力、适配多种终端形态的分布式理念&#…...
C# EF 使用
WPF EF MySQL - - -版本.NET Framework4.7.2EntityFramework6.5.1MySql.Data.EntityFramework9.1.0 创建数据库 ccApp.config <connectionStrings><add name"MyDbContext" providerName"MySql.Data.MySqlClient" connectionString"server…...

简介Voronoi图Voronoi Diagrams
这是计算机的经典算法。 问题引入 倘若一张大白纸上有很多三角点,掉进去一个五星点,问,哪个三角离着五星最近?简单,算距离呗,这个五星到其他所有三角点的距离,找到最小的那个就行。 若掉进去…...

硬件测试工程师之EMC项目-辐射抗扰度试验(RS)测试标准解析思维导图
1:链接上一篇文章 硬件测试工程师之EMC项目-电磁干扰-谐波测试标准解析 2:总结思维导图并进行深入解析EMC-辐射抗扰度测试项目 附上相关报告文档以及图片解析。 3:以下为思维导图大致展示,后续可可方便观看。如有需要也可以下载。 本期先…...

H265编码丢帧问题分析
问题 通过海思芯片编码后,将编码的数据通过UDP网口发送到UDP 服务端,UDP服务端收到后保存成文件。 保存的文件有时候用VLC软件可以打开。有时候不能打开,同时用Elecard HEVC Analyer工具打开,发现VLC不能打开时丢帧。如下图,实际为858帧,而此处只有846帧。 分析 UDP包…...
CentOS Linux教程(12)--常用编辑器
文章目录 1. 背景2. nano编辑器2.1 检查安装2.2 安装nano2.3 使用nano 3. emacs编辑器3.1 检查安装3.2 安装emacs 3.3 使用emacs 1. 背景 我们经常需要编辑文件内容,windows上这个工作可以用记事本来做。 linux上对应的,我们可以使用nano或者emacs编辑…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...

前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...

Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达,从日常对话到特定领域的文档(例如医学文档)(Heritage 2013;Landmark、Gulbrandsen 和 Svenevei…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...