QML学习:PathView

各位未来的大佬,这篇才是真正书接上回,顺序有点小插曲,不过问题不大,今天也会讲述PathView的要点,分为三个大方向.

一.pathView是什么

`PathView` 是 QML 中的一个视图组件，用于沿着定义的路径显示和滚动项目。它可以创建复杂的动画效果和自定义的滚动行为，适用于需要展示非线性排列的项目的场景。

`PathView` 的主要属性和方法

1. **model**：数据模型，可以是一个列表、数组或自定义的模型对象。
2. **delegate**：用于定义每个项目的外观和行为。
3. **path**：定义项目排列的路径，可以是 `Path` 对象。
4. **currentIndex**：当前选中的项目的索引。
5. **currentItem**：当前选中的项目。
6. **highlight**：用于定义高亮项目的外观。
7. **highlightItem**：当前高亮的项目。
8. **highlightMoveDuration**：高亮项目移动的动画持续时间。
9. **highlightResizeDuration**：高亮项目大小变化的动画持续时间。
10. **preferredHighlightBegin** 和 **preferredHighlightEnd**：定义高亮项目的首选位置范围。
11. **flickDeceleration**：滚动时的减速率。
12. **interactive**：是否允许用户交互。

二.pathView的作用,及其使用场景

`PathView` 适用于需要展示非线性排列的项目的场景，例如：

- 图片轮播
- 自定义的滚动菜单
- 动画效果复杂的项目展示

三.代码及其效果实例(注:linux系统的显示效果,Windows的话字体上可能会有差异)

首先先看看效果图:

上代码,首先写一个pathView的组件,方便复用

import QtQuick


PathView {
    id: root

    property variant value
    property int displayFontSize: width/4
    property real displayStep: 0.5 // displayStep > 0 表示上一个和下一个的显示比例

    width: 50; height: 297

    clip: true
    pathItemCount: 7
    preferredHighlightBegin: 0.5
    preferredHighlightEnd: 0.5
    dragMargin: root.width/2
    Component.onCompleted: findCurrentIndex()

    onMovementEnded: value = (model[currentIndex].value)
    onValueChanged: findCurrentIndex()

    flickDeceleration: 200 // 调整滑动减速度
    maximumFlickVelocity: 2500 // 调整最大滑动速度


    delegate: Item {
        width: root.width
        height: root.height/pathItemCount

        Text {
            anchors.centerIn: parent;
            font.family: "Dincond-bold"
            font.pixelSize: displayFontSize*Number(parent.PathView.textFontPercent);
            text: modelData.display.toString().padStart(2,'0')  //补零
            color: currentIndex == index ? "#FFFFFF" : "#848484"
        }
    }

    path: Path {
        startX: root.width/2; startY: 0

        PathAttribute { name: "textFontPercent"; value: displayStep }

        PathLine { x: root.width/2; y: root.height/2 }

        PathAttribute { name: "textFontPercent"; value: 1}

        PathLine { x: root.width/2; y: root.height }

        PathAttribute { name: "textFontPercent"; value: displayStep }
    }

    function findCurrentIndex() {
        for (var i = 0; i < count; i++)
            if (model[i].value === value)
                currentIndex = i;
    }
}

然后就是使用这个同级目录下的组件,具体的看代码:

import QtQuick

Rectangle {
    id:showSelect
    width: 508
    height: 339
    //color:"transparent"//复用的情况下需要设置背景透明,跟随父组件的背景即可
    color:"black"//测试用背景
    property int minuteIndex
    property int secondIndex

    //外部按钮点击直接设置时间
    function setTime(index){
        minuteView.currentIndex=index
        secondView.currentIndex=0
    }

    Row {
        anchors.centerIn: parent
        spacing: 20

        SmallCookTimeView {
            id:minuteView
            width: 80; height: 297
            flickDeceleration: 500 // 调整滑动减速度
            maximumFlickVelocity: 2500 // 调整最大滑动速度
            model:  {
                var list = [];
                for (var i = 0; i < 30; i++)
                    list.push({ display: i, value: i });
                return list;
            }
            value: 15//ToDo是否需要获取上次烹饪的时间

            pathItemCount: 3
            displayFontSize: 60

            onMovementEnded: {
                //获取分钟的值
                minuteChangeEnd(value.toString().padStart(2,'0'))
            }

            currentIndex: minuteIndex

        }
        Item {
            id:dot
            width: 40; height: 297
            Text {
                anchors.centerIn: parent
                text: qsTr(":")
                font.pixelSize: 40
                color: "white"
            }

        }


        SmallCookTimeView {
            id:secondView
            width: 80; height: 297

            model: {
                var list = [];
                for (var i = 0; i < 60; i++)
                    list.push({ display: i, value: i });
                return list;
            }
            value: 30

            pathItemCount: 3
            displayFontSize: 60

            onMovementEnded: {
                //获取秒钟数
                secondChangeEnd(value.toString().padStart(2,'0'))
            }

            currentIndex:secondIndex

        }
    }
    Rectangle{//中间的灰度矩形
        color: "#33ffffff"
        anchors.centerIn: parent
        width: 508
        height: 93
        radius: 12
    }


    signal secondChangeEnd(string second)
    signal minuteChangeEnd(string minute)
}

大概内容就是这些,篇幅不长,更多的篇章需要你们自个探索