Qt qml PathView使用

Qt qml PathView使用

//CustromPathView.qml

import QtQuick 2.15

Item {
    ListModel{
        id: nameModel
        ListElement{ file: "qrc:/image/image/1.png"; name: "image1"}
        ListElement{ file: "qrc:/image/image/1.png"; name: "image2"}
        ListElement{ file: "qrc:/image/image/1.png"; name: "image3"}
        ListElement{ file: "qrc:/image/image/1.png"; name: "image4"}
    }

    Component{
        id: nameDelegate
        Column{
            Image{
                id: delegateImage
                anchors.horizontalCenter: delegateText.horizontalCenter
                source: model.file
                width: 64
                height: 64
                smooth: true
                //fillModel: Image.PreserveAspectFit
            }
            Text{
                id: delegateText
                text: model.name
                font.pixelSize: 24
            }
        }
    }

    PathView{
        anchors.fill: parent
        model: nameModel
        delegate: nameDelegate
        focus: true

        path: Path{
            startX: 150
            startY: 200
            PathCubic{
                x: 50
                y: 100
                control1X: 100;
                control1Y: 200;
                control2X: 50;
                control2Y: 125
            }
            PathCubic{
                x: 150
                y: 50
                control1X: 50;
                control1Y: 75;
                control2X: 100;
                control2Y: 50
            }
            PathCubic{
                x: 250
                y: 100
                control1X: 200;
                control1Y: 50;
                control2X: 250;
                control2Y: 75
            }
            PathCubic{
                x: 150
                y: 200
                control1X: 250;
                control1Y: 125;
                control2X: 200;
                control2Y: 200
            }
        }

        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()
    }
}

效果：

20220429-153152

//CustromPathView.qml
import QtQuick 2.15

Item {
    ListModel{
        id: nameModel
        ListElement{ file: "qrc:/image/image/1.png"; name: "image1"}
        ListElement{ file: "qrc:/image/image/1.png"; name: "image2"}
        ListElement{ file: "qrc:/image/image/1.png"; name: "image3"}
        ListElement{ file: "qrc:/image/image/1.png"; name: "image4"}
    }

    Component{
        id: nameDelegate
        Column{
            opacity: PathView.opacity
            z: PathView.z
            scale: PathView.scale
            Image{
                id: delegateImage
                anchors.horizontalCenter: delegateText.horizontalCenter
                source: model.file
                width: 64
                height: 64
                smooth: true
                //fillModel: Image.PreserveAspectFit
            }
            Text{
                id: delegateText
                text: model.name
                font.pixelSize: 24
            }
        }
    }

    PathView{
        anchors.fill: parent
        model: nameModel
        delegate: nameDelegate
        focus: true

        path: Path{

            //Front
            startX: 150; startY: 100;
            PathAttribute{name: "opacity"; value: 1.0}
            PathAttribute{name: "scale"; value: 1.0}
            PathAttribute{name: "z"; value: 0}

            //left
            PathCubic{
                x: 50; y: 50
                control1X: 100; control1Y: 100;
                control2X: 50; control2Y: 75;
            }
            PathAttribute{name: "opacity"; value: 0.5}
            PathAttribute{name: "scale"; value: 0.5}
            PathAttribute{name: "z"; value: -1}

            //Top
            PathCubic{
                x: 150; y: 20;
                control1X: 50; control1Y: 35;
                control2X: 100; control2Y: 20;
            }
            PathAttribute{name: "opacity"; value: 0.25}
            PathAttribute{name: "scale"; value: 0.25}
            PathAttribute{name: "z"; value: -2}

            //Right
            PathCubic{
                x: 250; y: 50;
                control1X: 200; control1Y: 20;
                control2X: 250; control2Y: 35;
            }
            PathAttribute{name: "opacity"; value: 0.5}
            PathAttribute{name: "scale"; value: 0.5}
            PathAttribute{name: "z"; value: -1}

            PathCubic{
                x: 150; y: 100;
                control1X: 250; control1Y: 75;
                control2X: 200; control2Y: 100
            }
        }

        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()
    }
}

效果

20220429-161413