【QML】定时时间控制控件

代码：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 500
    height: 300
    visible: true
    title: "飞行时间设置"

    // 自定义时间选择组件
    Component {
        id: timeComponent
        Row {
            spacing: 15
            id: timeRow  // 添加根元素ID
            property int currentHour: 0
            property int currentMinute: 0
            property string selectedPart: "hour"

            // 时间显示区域
            Row {
                spacing: 5
                // 小时显示
                Rectangle {
                    width: 60
                    height: 50
                    color: mouseHour.containsMouse ? "#e0e0e0" : "transparent"
                    border.color: timeRow.selectedPart === "hour" ? "blue" : "transparent"

                    Text {
                        text: timeRow.currentHour.toString().padStart(2, '0')  // 使用ID访问
                        font.pixelSize: 28
                        anchors.centerIn: parent
                    }

                    MouseArea {
                        id: mouseHour
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: timeRow.selectedPart = "hour"
                    }
                }

                Text {
                    text: "时"
                    font.pixelSize: 24
                    anchors.verticalCenter: parent.verticalCenter
                }

                // 分钟显示
                Rectangle {
                    width: 60
                    height: 50
                    color: mouseMinute.containsMouse ? "#e0e0e0" : "transparent"
                    border.color: timeRow.selectedPart === "minute" ? "blue" : "transparent"

                    Text {
                        text: timeRow.currentMinute.toString().padStart(2, '0')  // 使用ID访问
                        font.pixelSize: 28
                        anchors.centerIn: parent
                    }

                    MouseArea {
                        id: mouseMinute
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: timeRow.selectedPart = "minute"
                    }
                }

                Text {
                    text: "分"
                    font.pixelSize: 24
                    anchors.verticalCenter: parent.verticalCenter
                }
            }

            // 共用控制按钮
            Column {
                spacing: 10
                anchors.verticalCenter: parent.verticalCenter

                Button {
                    width: 50
                    height: 40
                    text: "+"
                    font.pixelSize: 20
                    onClicked: {
                        if(timeRow.selectedPart === "hour") {
                            timeRow.currentHour = (timeRow.currentHour + 1) % 24
                        } else {
                            timeRow.currentMinute = (timeRow.currentMinute + 1) % 60
                        }
                    }
                }

                Button {
                    width: 50
                    height: 40
                    text: "-"
                    font.pixelSize: 20
                    onClicked: {
                        if(timeRow.selectedPart === "hour") {
                            timeRow.currentHour = (timeRow.currentHour - 1 + 24) % 24
                        } else {
                            timeRow.currentMinute = (timeRow.currentMinute - 1 + 60) % 60
                        }
                    }
                }
            }
        }
    }
    Column {
        anchors.centerIn: parent
        spacing: 30

        // 起始时间
        Column {
            spacing: 10
            Label {
                text: "起始飞行时间"
                font.bold: true
                font.pixelSize: 16
            }

            Loader {
                sourceComponent: timeComponent
                id: startTimeLoader
                onLoaded: {
                    item.currentHour = 13
                    item.currentMinute = 15
                }
            }
        }

        // 结束时间
        Column {
            spacing: 10
            Label {
                text: "结束飞行时间"
                font.bold: true
                font.pixelSize: 16
            }

            Loader {
                sourceComponent: timeComponent
                id: endTimeLoader
                onLoaded: {
                    item.currentHour = 15
                    item.currentMinute = 0
                }
            }
        }
    }

    // 时间校验逻辑
    Connections {
        target: startTimeLoader.item
        function onCurrentHourChanged() { validateTime() }
        function onCurrentMinuteChanged() { validateTime() }
    }

    Connections {
        target: endTimeLoader.item
        function onCurrentHourChanged() { validateTime() }
        function onCurrentMinuteChanged() { validateTime() }
    }

    function validateTime() {
        if (!startTimeLoader.item || !endTimeLoader.item) return;

        let start = startTimeLoader.item.currentHour * 60 + startTimeLoader.item.currentMinute
        let end = endTimeLoader.item.currentHour * 60 + endTimeLoader.item.currentMinute

        if (end < start) {
            endTimeLoader.item.currentHour = startTimeLoader.item.currentHour
            endTimeLoader.item.currentMinute = startTimeLoader.item.currentMinute
        }
    }
}

效果：

 功能：可增减、结束时间大于起始时间、可选择时分进行增减