qt - QML 中的时间选择器

Question

我需要让用户能够在 QML 应用程序中选择日期和时间。选择日期有 Calendar 在 QtQuick 控件中。
我还没有找到一个类似的控件来让用户选择一天中的时间。

在互联网上有几个例子，如 Grog或 Harmattan .
然而，我假设它们不像其他 QtQuick 控件那样与 native 外观和感觉集成。

是否有我不知道的标准方法，我没有遇到的好的替代方案或关于选择的建议？

Answer 1

从 Qt 5.5 开始，所谓的 Qt Quick Enterprise Controls也将在 Qt 的社区版中以 Qt Quick Extras 的名称提供。 .其中， Tumbler 似乎是满足您要求的可行解决方案:您可以轻松设置两列，一列用于小时，一列用于分钟。

如果您仍然对循环选择感兴趣(或想要实现自己的不倒翁)，您可以采取不同的路线，例如创建自己的组件，继承自 QQuickItem 或 QQuickPaintedItem 或利用 PathView 的自定义 View .后者是我将在此答案中介绍的情况。有关自定义组件创建的示例，请参阅提供的链接。

引用 PathView 的文档:

The view has a model, which defines the data to be displayed, and a delegate, which defines how the data should be displayed. The delegate is instantiated for each item on the path. The items may be flicked to move them along the path.

因此，路径定义了项目在屏幕上的布局方式，即使是以圆形方式。可以通过 Path 构建路径类型，即一系列不同类型的路径段。 PathArc 是我们感兴趣的，因为它提供了所需的圆形。

以下示例使用这些元素来定义循环时间选择器。每条路径都是通过利用 currentIndex 构建的。代表的:整数用作 PathView的模型小号 - 12对于小时 View 和 6分别用于分钟 View 。代表的文本是通过利用 index 生成的。附加属性并对其进行操作以生成小时和 10 分钟间隔值(参见代表 Text 项)。最后，当前元素的文本(即 currentItem )绑定(bind)到窗口中心的时间标签:作为 currentIndex和 currentItem更改，标签也会更新。

整个组件如下所示:


highlight组件(蓝色和绿色圆圈)用于以图形方式表示时间的编辑:可见时可以编辑时间，即另一个 Item可以选择路径。单击中心的时间标签可在正常模式和编辑模式之间切换。

在编辑模式下，用户可以简单地悬停不同的小时/分钟值来选择它们。如果单击新选择的小时/分钟，则编辑该特定 PathView被禁用，相应的高亮圆圈消失。

这段代码显然只是一个玩具示例，让您了解 PathView可用于。可以进行一些改进，例如动画，更好的数字定位，详细的分钟表示，漂亮的背景等等。但是它们超出了w.r.t的范围。这个问题并没有被考虑。

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.3
import QtQuick.Layouts 1.1

Window {
    visible: true
    width: 280; height: 280

    RowLayout {             // centre time label
        anchors.centerIn: parent
        Text {
            id: h
            font.pixelSize: 30
            font.bold: true
            text: outer.currentItem.text
        }
        Text {
            id: div
            font.pixelSize: 30
            font.bold: true
            text: qsTr(":")
        }
        Text {
            id: m
            font.pixelSize: 30
            font.bold: true
            text: inner.currentItem.text
        }

        MouseArea {
            anchors.fill: parent
            onClicked: outer.choiceActive = inner.choiceActive = !outer.choiceActive
        }
    }


    PathView {          // hours path
        id: outer
        property bool pressed: false
        model: 12

        interactive: false
        highlightRangeMode:  PathView.NoHighlightRange
        property bool choiceActive: false

        highlight: Rectangle {
            id: rect
            width: 30 * 1.5
            height: width
            radius: width / 2
            border.color: "darkgray"
            color: "steelblue"
            visible: outer.choiceActive
        }

        delegate: Item {
            id: del
            width: 30
            height: 30
            property bool currentItem: PathView.view.currentIndex == index
            property alias text : textHou.text
            Text {
                id: textHou
                anchors.centerIn: parent
                font.pixelSize: 24
                font.bold: currentItem
                text: index + 1
                color: currentItem ? "black" : "gray"
            }

            MouseArea {
                anchors.fill: parent
                enabled: outer.choiceActive
                onClicked: outer.choiceActive = false
                hoverEnabled: true
                onEntered: outer.currentIndex = index
            }
        }

        path: Path {
            startX: 200; startY: 40
            PathArc {
                x: 80; y: 240
                radiusX: 110; radiusY: 110
                useLargeArc: false
            }
            PathArc {
                x: 200; y: 40
                radiusX: 110; radiusY: 110
                useLargeArc: false
            }
        }
    }

    PathView {          // minutes path
        id: inner
        property bool pressed: false
        model: 6
        interactive: false
        highlightRangeMode:  PathView.NoHighlightRange
        property bool choiceActive: false

        highlight: Rectangle {
            width: 30 * 1.5
            height: width
            radius: width / 2
            border.color: "darkgray"
            color: "lightgreen"
            visible: inner.choiceActive
        }

        delegate: Item {
            width: 30
            height: 30
            property bool currentItem: PathView.view.currentIndex == index
            property alias text : textMin.text
            Text {
                id: textMin
                anchors.centerIn: parent
                font.pixelSize: 24
                font.bold: currentItem
                text: index * 10
                color: currentItem ? "black" : "gray"
            }

            MouseArea {
                anchors.fill: parent
                enabled: inner.choiceActive
                onClicked: inner.choiceActive = false
                hoverEnabled: true
                onEntered: inner.currentIndex = index
            }
        }

        path: Path {
            startX: 140; startY: 60
            PathArc {
                x: 140; y: 220
                radiusX: 40; radiusY: 40
                useLargeArc: false
            }
            PathArc {
                x: 140; y: 60
                radiusX: 40; radiusY: 40
                useLargeArc: false
            }
        }
    }

    // to set current time!
    onVisibleChanged: {
        var d = new Date();
        outer.currentIndex = d.getUTCHours() % 12
        inner.currentIndex = d.getMinutes() / 10
    }
}