当前位置:   article > 正文

QML_ToolSeparator、ToolTip和Tumbler_qml tumbler 每次滑动一格

qml tumbler 每次滑动一格

QML_ToolSeparator、ToolTip和Tumbler

分隔工具栏ToolSeparator、工具提示ToolTip和旋转轮Tumbler

分隔工具栏 ToolSeparator
属性
horizontal : [只读],保存方向是否等于Qt.Horizontal
vertical : [只读],保存方向是否等于Qt.Vertical
orientation : 保留工具分隔符的方向

没有特殊设置的话我们只需要定义ToolSeparator元素就可以了,如果想要设置颜色的话,一定为其配置大小。要不然ToolSeparator是默认最小的,这样就显示不出来分隔了。

ToolBar {
    id:toolbar
    anchors.centerIn: parent
    RowLayout {
        anchors.fill: parent

        ToolButton {
            text: qsTr("Action 1")
        }

        ToolSeparator {
            contentItem: Rectangle {
                implicitWidth: 3
                implicitHeight: toolbar.height - 20
                color: "orange"
            }
        }

        ToolButton {
            text: qsTr("Action 2")
        }

    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在这里插入图片描述

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Menu")
    color: "lightgray"

    Button {
        anchors.centerIn: parent
        text: "打开左侧菜单"

        onClicked: {
            if (drawer.visible) {
                drawer.close()
            } else {
                drawer.open()
            }
        }
    }

    Drawer {
        id: drawer
        width: 0.3 * root.width
        height: root.height
        dragMargin: parent.width / 3

        Column {
            ToolButton {
                width: drawer.width
                text: "New file"
            }
            ToolSeparator {
                width: drawer.width
                orientation: Qt.Horizontal
            }
            ToolButton {
                width: drawer.width
                text: "save"
            }
            ToolSeparator {
                width: drawer.width
                orientation: Qt.Horizontal
            }
            ToolButton {
                width: drawer.width
                text: "save as..."
            }
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

在这里插入图片描述

工具提示 ToolTip
有的时候,当我们的鼠标悬停在某个控件的下方时,会出现一段提示,这就是用到了提示栏。ToolTip是一小段文本,它通知用户控件的功能。通常将其放置在父控件的上方或下方。提示文本可以是任何富文本格式的字符串。
属性
delay : 保留共享工具提示的延迟(毫秒)
text : 保存共享工具提示的文本
timeout : 保存共享工具提示的超时(毫秒)
toolTip : 保存共享工具提示实例
visible : 保存共享工具提示是否可见

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Menu")
    color: "lightgray"

    Row {
        anchors.centerIn: parent
        spacing: 30

        Button {
            text: qsTr("Button")
            hoverEnabled: true

            ToolTip.delay: 100
            ToolTip.timeout: 2000
            ToolTip.visible: hovered
            ToolTip.text: qsTr("这是提示")
        }

        Slider {
            id: slider
            value: 0.5

            ToolTip {
                parent: slider.handle
                visible: slider.pressed
                text: slider.value.toFixed(1)
            }
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

在这里插入图片描述
在这里插入图片描述

旋转轮 Tumbler
属性
count : 保存模型中的项目数
currentIndex : 保存当前项目的索引
currentItem : 设置项目保留在当前索引处
delegate : 委托
model : 模型
moving : 描述由于用户拖动或轻弹而导致的Tumbler当前是否正在移动
visibleItemCount : 保存翻转开关中可见项目的数量
wrap : 确定当Tumbler到达顶部或底部时是否回绕

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Menu")
    color: "lightgray"

    Frame {
        id: frame
        padding: 0
        anchors.centerIn: parent

        Row {
            id: row

            Tumbler {
                id: hoursTumbler
                model: 24
            }

            Tumbler {
                id: minutesTumbler
                model: 60
            }

            Tumbler {
                id: amPmTumbler
                model: 60
            }
        }
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

在这里插入图片描述

因为我们平常见到的时间例如23:00:03,时分秒都是两位的且时间并没有0这个选项。所以为了实现日常生活中的效果,我们需要为Tumbler实现委托。将Tumbler的内容设置成我们想要的格式。
设置Tumbler的委托为delegateComponent,Label里面主要是内容和透明度理解起来有点难度,首先来看这个内容,肯定还是Tumbler的模型数据,但是需要对内容物做一些处理。这里用到了Qml中的自定义函数,当Tumbler的模型中的选型总数为12时,代表是时钟模型,所以里面的每个选项的内容需要加1,而分钟和秒钟就不需要加1了。另外,我们将模型数据转成字符串,如果位数不是两位,就为其补0。
再看透明度,我们还是需要对当前选项和非当前选项做一个区分的,涉及到了Tumbler的附件属性displacement,此附加属性为只读属性,表示该项目与当前项目之间的距离(当前项目的话距离为0)。Tumbler有上下两个方向,所以这个距离是由正负的,计算与当前项的距离是需要用到Math.abs()函数,此函数是取绝对值的函数。

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Menu")
    color: "lightgray"

    Rectangle {
        id: rect
        anchors.centerIn: parent
        width: frame.implicitWidth + 10
        height: frame.implicitHeight + 10

        function formatText(count, modelData) {
            var data = count === 12 ? modelData + 1 : modelData
            return data.toString().length < 2 ? "0" + data : data
        }

        Component {
            id: delegateComponent

            Label {
                text: rect.formatText(Tumbler.tumbler.count, modelData)
                opacity: 0.4 + (1 - Math.abs(Tumbler.displacement)) * 0.6
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 20
            }
        }

        Frame {
            id: frame
            padding: 0
            anchors.centerIn: parent

            Row {
                id: row

                Tumbler {
                    id: hoursTumbler
                    model: 24
                    delegate: delegateComponent
                }

                Tumbler {
                    id: minutesTumbler
                    model: 60
                    delegate: delegateComponent
                }

                Tumbler {
                    id: amPmTumbler
                    model: 60
                    delegate: delegateComponent
                }
            }
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/喵喵爱编程/article/detail/805992
推荐阅读
相关标签
  

闽ICP备14008679号