Question

我正在寻找一种简单的方法来为触摸屏制作小部件，允许用户在运行代码的计算机上设置时间和IP地址，并提供简单的（大写拉丁字母）名称。

这个问题不关于如何实际设置系统时间或IP地址;我只是在寻找有关如何自己制作图形小部件的信息。

我想要的是将每个可编辑属性（时间，地址和名称）划分为“可滚动”字段，其中“时间”字段为小时，分钟，可能秒和AM / PM / 24- hr，地址/名称的字段是单个字符。每个字段的上方和下方都有一个箭头，触摸箭头会滚动该字段的有效值。

我认为这是一种非常常见的UX模式，特别是在meatspace中（例如在闹钟上），但是如果我不清楚我想要描述的是什么，这里是一个用户编辑“name”属性的例子：

^^^
BN
vvv

用户按下“N”下方的“向下”： ^^^ BO VVV

用户在空白处下方“按下”：

^^^^
BOA
vvvv

...再次使用相同的向下箭头：

^^^^
BOB
vvvv

我正在使用C ++ 14和Qt 5编写这个。（如果最糟糕的是，我会开放使用不同的语言和/或框架编写一个单独的应用程序，但我不是要求这里的框架建议;如果您有，请告诉我，我将在Software Recommendations SE上打开相应的问题。）

我在Qt 5小部件库中看不到这样的内容;大多数输入小部件都是文本字段。 QSpinBox看起来有点前途，但箭头可能对我的触摸屏而言太小了，并且每个字母使用单独的旋转框可能会让人感到困惑和丑陋。

我对Qt或GUI编程一般都不太了解，从而有信心尝试从头开始编写我自己的小部件，但这个界面看起来很简单，我希望有几行QML可以让我很好我的方式。

Answer 1

ListView以及PathView可以产生所需的结果，行为略有不同，表现略有不同。与ListView不同，PathView是循环的，即可以通过仅使用一个选择控件来连续迭代元素。通过PathView类型完全自定义PathAttribute中路径的行为也更容易。无论如何，根据问题，路径定制似乎不是必需的功能。

如果您通过ListView实施解决方案，则应确保只显示一个元素并处理任何模型。

Component {
    id: spinnnnnnnner

    Column  {
        width: 100
        height: 110
        property alias model: list.model
        property string textRole: ''
        spacing: 10

        Item {
            width: 100
            height: 25
            Text { anchors.centerIn: parent; text: "-"; font.pixelSize: 25; font.bold: true }
            MouseArea {anchors.fill: parent; onClicked: list.decrementCurrentIndex() }
        }

        ListView {
            id: list
            clip: true
            width: 100
            height: 55
            enabled: false          // <--- remove to activate mouse/touch grab
            highlightRangeMode: ListView.StrictlyEnforceRange   // <--- ensures that ListView shows current item

            delegate: Text {
                width: ListView.view.width
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 50
                font.bold: true
                text: textRole === "" ? modelData :
                                        ((list.model.constructor === Array ? modelData[textRole] : model[textRole]) || "")
            }
        }

        Item {
            width: 100
            height: 25
            Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 25; font.bold: true }
            MouseArea {anchors.fill: parent; onClicked: list.incrementCurrentIndex() }
        }
    }
}

对模型的检查确保可以将任何类型的模型传递给组件。以下是使用三种非常不同的模型的示例：

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true

    width: 400
    height: 300

    ListModel {
        id: mod
        ListElement {texty: "it1"}
        ListElement {texty: "it2"}
        ListElement {texty: "it3"}
    }

    Row {
        Repeater {
            id: rep
            model: 3
            delegate: spinnnnnnnner

            Component.onCompleted: {
                rep.itemAt(0).model = mod                       // listmodel
                rep.itemAt(0).textRole = "texty"
                rep.itemAt(1).model = 10                        // number model
                //
                rep.itemAt(2).model = ["foo", "bar", "baz"]     // array model
            }
        }
    }
}

PathView实施与ListView实施没有太大区别。在这种情况下，定义垂直path并指定通过pathItemCount一次只能看到一个元素就足够了。最后，设置preferredHighlightBegin / preferredHighlightEnd可确保可见元素在视图中居中。重新访问的组件如下：

Component {
    id: spinnnnnnnner

    Column  {
        width: 100
        height: 110
        property alias model: list.model
        property string textRole: ''
        spacing: 10

        Item {
            width: 100
            height: 25
            Text { anchors.centerIn: parent; text: "-"; font.pixelSize: 25; font.bold: true }
            MouseArea {anchors.fill: parent; onClicked: list.decrementCurrentIndex() }
        }

        PathView {
            id: list
            clip: true
            width: 100
            height: 55
            enabled: false          // <--- remove to activate mouse/touch grab
            pathItemCount: 1
            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5

            path: Path {
                startX: list.width / 2; startY: 0
                PathLine { x: list.width / 2; y: list.height  }
            }

            delegate: Text {
                width: PathView.view.width
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 50
                font.bold: true
                text: textRole === "" ? modelData :
                                        ((list.model.constructor === Array ? modelData[textRole] : model[textRole]) || "")
            }
        }

        Item {
            width: 100
            height: 25
            Text { anchors.centerIn: parent; text: "+"; font.pixelSize: 25; font.bold: true }
            MouseArea {anchors.fill: parent; onClicked: list.incrementCurrentIndex() }
        }
    }
}

Qt中的简单无键盘触摸屏小工具

1 个答案: