HarmonyOS鸿蒙Next中有人做过只有时和分的时间选择器吗

HarmonyOS鸿蒙Next中有人做过只有时和分的时间选择器吗 cke_148.png

可以上下滑动，然后在下面显示多少时间就行，并不是日期，只是时间


更多关于HarmonyOS鸿蒙Next中有人做过只有时和分的时间选择器吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

去看看官网的TimePicker或者TextPicker

更多关于HarmonyOS鸿蒙Next中有人做过只有时和分的时间选择器吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


做过，不过用UniApp做的

UniApp是怎么做的

UniApp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

核心原理

UniApp 的核心原理主要基于以下几个方面：

  1. 跨平台编译：UniApp 在编译阶段，将 Vue 单文件组件（.vue 文件）和 JavaScript 代码，通过条件编译和特定平台的编译器，转换成目标平台（如小程序、App、H5）所能识别的代码。例如，Vue 模板会被转换成小程序的 WXML 或 App 的 Native 视图。

  2. 统一的 API：UniApp 提供了一套统一的 JavaScript API（uni.xxx），这些 API 在运行时或编译时，会被映射到不同平台的原生 API 上。例如，调用 uni.request 在微信小程序中会转换为 wx.request，在 H5 中会转换为 fetch 或 XMLHttpRequest。

  3. 运行时框架：在 App 端，UniApp 通过集成 Weex 运行时或自研的渲染引擎，将 Vue 代码渲染为原生组件，从而获得接近原生的性能和体验。

  4. 条件编译：开发者可以在代码中使用特殊的注释语法（// #ifdef、// #endif），为不同的平台编写差异代码，实现“一套代码，多端发布”的同时，也能灵活处理各平台的特性差异。

开发流程

  1. 环境搭建：安装 HBuilderX（官方 IDE）或使用 Vue CLI 插件。
  2. 创建项目：使用 IDE 模板或命令行工具初始化一个 UniApp 项目。
  3. 页面开发：使用 Vue 语法编写页面组件（.vue 文件），包括模板、脚本和样式。
  4. 调用 API：使用 uni 对象调用跨端 API，如路由跳转、网络请求、数据存储等。
  5. 组件使用：使用内置的跨端 UI 组件（如 view, text, button）或扩展组件。
  6. 条件编译：在需要区分平台的地方使用条件编译语法。
  7. 调试运行：在 IDE 中选择目标平台（如微信小程序、Chrome 浏览器）进行真机或模拟器调试。
  8. 发行打包：通过 IDE 或命令行工具，将项目编译打包成对应平台的产物（如小程序代码包、Android APK、iOS IPA、H5 网站）。

优势与特点

  • 开发效率高：一次开发，多端覆盖，极大减少重复工作。
  • 学习成本低：对于熟悉 Vue.js 的开发者非常友好，上手快。
  • 性能体验好：在 App 端通过原生渲染保障性能，在小程序端生成优化后的代码。
  • 生态丰富：拥有插件市场，可以方便地集成第三方功能。
  • 社区活跃：由 DCloud 团队维护，拥有庞大的开发者社区和丰富的学习资源。

适用场景

  • 需要快速覆盖多个平台（尤其是小程序和 App）的产品。
  • 团队技术栈以 Vue 为主，希望降低多端开发成本。
  • 对原生性能要求不是极端苛刻的中大型应用。

总结

UniApp 通过“编译时 + 运行时”结合的策略，以及统一的 API 和组件规范，巧妙地平衡了开发效率与多端体验。它让前端开发者能够利用熟悉的 Vue 技术栈，高效地构建跨平台应用，是目前市面上主流的跨端解决方案之一。

自定义呗，

HarmonyOS Next中可通过TimePicker组件实现仅显示时和分的时间选择器。设置TimePicker的type属性为TimePickerType.HOUR_MINS即可，示例代码：

TimePicker({ type: TimePickerType.HOUR_MINS })
  .selectedTextStyle(...)
  .onChange(...)

该组件会隐藏秒级选择，仅展示小时和分钟选项。

在HarmonyOS Next中，实现一个仅包含时和分的时间选择器是可行的，并且有多种方式可以实现类似图中滑动选择的效果。

1. 使用系统组件 TimePicker

HarmonyOS Next 的 ArkUI 框架提供了 TimePicker 组件，它默认支持选择时、分、秒。你可以通过设置其属性来隐藏“秒”的选项，使其专注于“时”和“分”。

TimePicker({
  selected: this.selectedTime // 例如：{ hour: 12, minute: 30 }
})
.hours({ start: 0, end: 23 }) // 设置小时范围
.minutes({ start: 0, end: 59 }) // 设置分钟范围
.useMilitaryTime(false) // 设置是否使用24小时制

通过调整样式，你可以让 TimePicker 的滚动选择器视觉上更接近你图中的效果。

2. 自定义滚动选择器（Picker）

如果系统 TimePicker 的样式不符合你的需求，你可以使用更基础的 Picker 组件来完全自定义。

  • 创建两个 Picker，一个用于小时（0-23），一个用于分钟（0-59）。
  • 将它们水平排列，并自定义其文本样式、背景和滚动动画，以模拟图中上下滑动的效果。
  • 通过 @State 装饰器绑定选中的值，并在下方显示结果。

3. 使用 Swiper 或 List 模拟滑动

对于高度定制化的UI（如图中这种每个选项都清晰可见的滚动列表），你可以考虑使用 Swiper（轮播）或 List（列表）组件来模拟滑动选择的行为。

  • 构建两个垂直的列表，分别代表小时和分钟。
  • 通过手势事件和滚动控制，计算出当前选中的中心项。
  • 这种方法开发量较大，但能实现最灵活的视觉效果。

关键点

  • 数据绑定：无论使用哪种组件，都需要通过 @State 或 @Link 装饰器来管理选中的时间值（一个包含 hour 和 minute 的对象）。
  • 显示结果：在组件下方，你可以直接使用 Text 组件来显示格式化后的时间，例如：Text(${this.selectedHour}:${this.selectedMinute})。

你提供的图片效果，最直接的实现路径是使用 TimePicker 组件并深度定制其样式。如果系统组件样式无法满足，则可以采用自定义 Picker 的方案。

回到顶部