使用QML Tumbler 实现时间日期选择器

引言

在现代应用程序开发中，时间与日期选择是常见的用户界面需求。无论是在日程安排、预约系统还是任何需要时间录入的场景，一个直观易用的选择器组件可以大大提升用户体验。本文将详细介绍如何使用 QML 技术实现两种常用的选择器组件：时间选择器和日期时间选择器。

项目结构

示例实现与代码解析

本项目实现了两个实用的选择器组件：时间选择器（TimePicker）和日期时间选择器（DateTimePicker）。下面将对这些组件进行详细解析。

示例一：时间选择器（TimePicker）

时间选择器允许用户通过滚动选择特定的小时和分钟值。这种交互方式类似于传统的模拟时钟调整，但提供了更为精确和直观的数字选择。

核心代码：

Rectangle {id: rootwidth: 280height: 400color: "#ffffff"radius: 10border.color: "#e0e0e0"border.width: 1property int hours: hoursTumbler.currentIndexproperty int minutes: minutesTumbler.currentIndexColumnLayout {anchors.fill: parentspacing: 10Text {Layout.alignment: Qt.AlignHCentertext: "选择时间"font.pixelSize: 20color: "#333333"Layout.topMargin: 20}Rectangle {Layout.alignment: Qt.AlignHCenterLayout.preferredWidth: parent.width - 40Layout.preferredHeight: 200color: "transparent"Row {anchors.centerIn: parentspacing: 10Tumbler {id: hoursTumblermodel: 24height: 200width: 80delegate: Text {text: modelData.toString().padStart(2, '0')color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenteropacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)}}Text {text: ":"font.pixelSize: 24anchors.verticalCenter: parent.verticalCentercolor: "#333333"}Tumbler {id: minutesTumblermodel: 60height: 200width: 80delegate: Text {text: modelData.toString().padStart(2, '0')color: Tumbler.tumbler.currentIndex === index ? "#1976D2" : "#666666"font.pixelSize: Tumbler.tumbler.currentIndex === index ? 22 : 18horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenteropacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)}}}}Text {Layout.alignment: Qt.AlignHCentertext: hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0')font.pixelSize: 24color: "#1976D2"}}
}

代码解析：

外观设计：

使用 Rectangle 作为容器，设置圆角和边框，营造现代化的界面风格
采用简洁的配色方案，主色调为蓝色（#1976D2），与灰色搭配形成对比
整体布局采用垂直方向的 ColumnLayout 排列元素

时间选择逻辑：

使用两个 Tumbler 组件分别控制小时（0-23）和分钟（0-59）
通过属性绑定 property int hours: hoursTumbler.currentIndex 直接获取选择的值
实时显示当前选择的时间，方便用户确认

视觉反馈：

当前选中项使用突出的蓝色和更大的字体
通过 opacity 属性实现滚轮效果，让远离中心的项逐渐变淡
使用 padStart(2, '0') 确保时间始终以两位数显示（如 “01” 而非 “1”）

示例二：日期时间选择器（DateTimePicker）

日期时间选择器扩展了时间选择的功能，增加了年、月、日的选择，提供了完整的日期时间设置能力。

核心代码：

Rectangle {id: rootwidth: 320height: 480color: "#ffffff"radius: 10border.color: "#e0e0e0"border.width: 1property date selectedDateTime: new Date()function updateDateTime() {if (!yearTumbler.currentItem || !dayTumbler.currentItem) return;let newDate = new Date(selectedDateTime)let year = parseInt(yearTumbler.currentItem.text)let month = monthTumbler.currentIndexlet day = parseInt(dayTumbler.currentItem.text)let hours = hoursTumbler.currentIndexlet minutes = minutesTumbler.currentIndex// 验证日期是否有效if (isNaN(year) || isNaN(day)) return;newDate.setFullYear(year)newDate.setMonth(month)newDate.setDate(day)newDate.setHours(hours)newDate.setMinutes(minutes)if (newDate.getTime() === selectedDateTime.getTime()) return;selectedDateTime = newDate}// 计算指定年月的天数function getDaysInMonth(year, month) {return new Date(year, month + 1, 0).getDate()}Component.onCompleted: {let currentDate = new Date()yearTumbler.currentIndex = yearTumbler.model.indexOf(currentDate.getFullYear().toString())monthTumbler.currentIndex = currentDate.getMonth()dayTumbler.currentIndex = currentDate.getDate() - 1hoursTumbler.currentIndex = currentDate.getHours()minutesTumbler.currentIndex = currentDate.getMinutes()}// ... Tumbler 组件实现 ...Text {Layout.alignment: Qt.AlignHCentertext: selectedDateTime.toLocaleString(Qt.locale(), "yyyy年MM月dd日 hh:mm")font.pixelSize: 18color: "#1976D2"}
}

代码解析：

日期时间管理：