当前位置: 首页 > news >正文

「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现

本篇将带你实现一个滑动选择器应用,用户可以通过滑动条选择不同的数值,并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。

在这里插入图片描述


关键词
  • UI互动应用
  • Slider 组件
  • 状态管理
  • 动态数值更新
  • 用户交互

一、功能说明

在这个滑动选择器应用中,用户通过滑动条选择值,应用实时更新并显示当前选择的值。根据不同的数值范围,文本提示会变化,增加交互效果。


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Text 组件用于显示文本
  • Slider 组件用于滑动选择
  • @State 修饰符用于状态管理
项目结构
  • 项目名称SliderSelectorApp
  • 自定义组件名称SliderSelectorPage
  • 代码文件SliderSelectorPage.etsIndex.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 返回不同的提示文本和颜色,实现动态反馈。

五、优化建议
  1. 自定义滑动条样式:通过 blockColortrackColor 自定义滑动条的外观,提升视觉效果。
  2. 添加最小和最大值标签:在滑动条的两端添加文本标签,如“0”和“100”。
  3. 滑动动画:为滑动条添加动画过渡,使用户体验更流畅。
  4. 多语言支持:根据用户的语言环境显示不同语言的提示文本。

六、相关知识点
  • 「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 - 滑动选择器实现

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

【嵌入式】STM32中的SPI通信

SPI是由摩托罗拉公司开发的一种通用数据总线&#xff0c;其中由四根通信线&#xff0c;支持总线挂载多设备&#xff08;一主多从&#xff09;&#xff0c;是一种同步全双工的协议。主要是实现主控芯片和外挂芯片之间的交流。这样可以使得STM32可以访问并控制各种外部芯片。本文…...

后端:Spring、Spring Boot-配置、定义bean

文章目录 1. 什么是Bean&#xff0c;如何配置2. 如何配置bean2.1 使用注解Bean2.2 使用注解Import 1. 什么是Bean&#xff0c;如何配置 被spring容器所管理的对象被称为bean&#xff0c;管理方式可以有纯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&#xff0c;无图片&#xff0c;没用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简介&#xff1a; Java是由Sun Microsystems公司于1995年推出的一门面向对象的高级程序设计语言&#xff0c;可以运行于多个平台&#xff0c;其…...

JVM基本结构和垃圾回收机制

一、JVM基本结构 Java虚拟机&#xff08;JVM, Java Virtual Machine&#xff09;是Java程序执行的环境&#xff0c;其基本结构可以分为以下几个主要部分&#xff1a; 类加载器子系统&#xff08;Class Loader Subsystem&#xff09;&#xff1a; 负责加载Java类文件到内存中。…...

CentOS 7 安装 ntp,自动校准系统时间

1、安装 ntp yum install ntp 安装好后&#xff0c;ntp 会自动注册成为服务&#xff0c;服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…...

Spring Boot 配置文件启动加载顺序

前言 Spring Boot的启动加载顺序是一个涉及多个步骤和组件的过程。Spring Boot通过一系列默认设置简化了应用程序的配置&#xff0c;使得开发者能够快速地搭建和部署应用。为了实现这一目标&#xff0c;Spring Boot采用了一种分层和优先级机制来加载配置文件。 一、Spring Bo…...

webrtc agc2实现原理

WebRTC的AGC2&#xff08;自适应增益控制器&#xff09;是一种用于音频处理的算法&#xff0c;可以根据输入信号的强度自动调整增益&#xff0c;使输出信号的音量保持稳定。其详细原理如下&#xff1a; 噪声估计 首先&#xff0c;AGC2需要对输入信号中的噪声进行估计&#xff…...

2024.11.03 周报

一 实时超分音频同步问题: 处理方向&#xff1a; 按照胡学长的办法尝试: 前面处理视频, 将视频中音频提取出来, 将音频每隔 1-2 秒保存为一段 (这样将音频缓存在内存中) , 然后依次播放, 但是音频是44.1KHz采样率&#xff0c;每秒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 是一款高效的矢量数据库管理系统&#xff0c;支持在高并发和高调用场景下加速相似度搜索。Milvus 的 GPU 支持由 NvidiaRAPIDS 团队提供&#xff0c;可以借助各种 GPU 索引类型来优化性能。本篇将重点解析 Milvus 支持的 GPU 索引类型、适用场景及各自的性…...

Webserver(2.8)守护进程

目录 守护进程案例 守护进程案例 每隔2s获取系统时间&#xff0c;将这个时间写入到磁盘文件中 #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&#xff1f;&#xff1a; 官方解释&#xff1a;HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 鸿蒙操作系统在传统的单设备系统能力的基础上&#xff0c;提出了基于同一套系统能力、适配多种终端形态的分布式理念&#…...

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

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

硬件测试工程师之EMC项目-辐射抗扰度试验(RS)测试标准解析思维导图

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

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. 背景 我们经常需要编辑文件内容&#xff0c;windows上这个工作可以用记事本来做。 linux上对应的&#xff0c;我们可以使用nano或者emacs编辑…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...