QML时间滚筒控件

老小子的程序员之路

已于 2024-03-15 17:47:50 修改

阅读量303

点赞数 3

分类专栏： QT 文章标签： qt javascript

于 2024-03-15 17:44:42 首次发布

本文链接：https://blog.csdn.net/u013142545/article/details/136745584

版权

QT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章详细介绍了如何在QML中使用PathView组件创建一个动态的时间滚筒控件，包括设置模型、路径、文本显示和焦点处理。

摘要由CSDN通过智能技术生成

QML时间滚筒控件

使用PathView来实现，重要代码如下：
///时的数值
    Rectangle{
        id: _hourRec
        width: 80; height: parent.height
        anchors.left: parent.left; anchors.leftMargin: 0
        anchors.top: parent.top; anchors.topMargin: 0
        color: "white"

        Component {
                id: _hourDelegate

                Text {
                    opacity: PathView.isCurrentItem ? 1 : 1
                    text: name;
                    font.pixelSize: 24
                    anchors.leftMargin: 2
                    width: 80

                    leftPadding: 30
                }

            }
        PathView{
                id:_hourPathview
                anchors.fill: parent
                model:_hourModel
                delegate: _hourDelegate
                pathItemCount: 5  ///设置在路径上显示项的个数
                path: Path{
                    startX: _hourRec.x + 40; startY: _hourRec.y + 15
                    PathLine { x: _hourRec.x + 40; y: _hourRec.y + 185 }
                }

//                highlight: Rectangle{
//                    width: 20;height: 20
//                    color: "lightBlue"
//                }

                focus: true //获取焦点
                //Keys.onLeftPressed: decrementCurrentIndex()//添加左右键盘移动
                //Keys.onRightPressed: incrementCurrentIndex()
                Keys.onUpPressed: decrementCurrentIndex()
                Keys.onDownPressed: incrementCurrentIndex()

				///将当前项下移两位
                onCurrentIndexChanged: {
                    var tempNum = 0
                    if(currentIndex + 2 < 100)
                    {
                        tempNum = currentIndex + 2
                    }else{
                        tempNum = currentIndex + 2 - 100
                    }

                    if(tempNum < 10)
                        _hourMiddleText.text = "0" + tempNum
                    else{
                         _hourMiddleText.text = tempNum
                    }

                }


                Component.onCompleted: {
                    positionViewAtIndex(count,PathView.Beginning)
                    _hourMiddleText.text = "02"
                }

            }

		///因为currentItem是在第一个，要下移
        Rectangle{
            id: _hourMiddle
            width: parent.width;height: 30
            color: "lightBlue"
            z: 1
            anchors.centerIn: parent

            Text {
                id: _hourMiddleText
                anchors.centerIn: parent
                font.bold: true
                font.pixelSize: 20
            }

        }

    }

在这里插入图片描述