QT滚动菜单控件

import QtQuick 2.6

/*
 * 作者: yubo
 * 功能: PathView
 * 描述: 滚动菜单，滚动路线可设置，每个菜单激活Item可进行效果变化，具体坐标根据需求设置
 * 日期: 2018-07-12
 */
PathView {
    id: listView
    property alias menuModel: listView.model
    pathItemCount: menuModel.count
    interactive: true
    preferredHighlightBegin: 0.5
    preferredHighlightEnd: 0.5
    highlightRangeMode: PathView.StrictlyEnforceRange
    delegate: Component {
        Item {
            id: wrapper
            scale: 0.9//PathView.iconScale
            width: 300
            height: 170
            Image {
                id: iconMenuBorderBg
                anchors.centerIn: iconMenuBorder
                source: wrapper.PathView.isCurrentItem ?
                "qrc:/Image/Common/MenuTheme2/L1/selectBaseBg.png" : ""
            }
            SequentialAnimation {
                running: iconMenuBorderBg.visible
                alwaysRunToEnd: true
                NumberAnimation { target: iconMenuBorderBg; properties: "opacity"; from: 0.1; to: 1; duration: 1000 }
                NumberAnimation { target: iconMenuBorderBg; properties: "opacity"; from: 1; to: 0.1; duration: 1000 }
                loops: Animation.Infinite
            }
            Image {
                id: iconMenuBorder
                anchors.horizontalCenter: iconMenu.horizontalCenter
                anchors.verticalCenter: iconMenu.verticalCenter
                anchors.verticalCenterOffset: wrapper.PathView.isCurrentItem ? 0 : 35
                source: wrapper.PathView.isCurrentItem ?
                "qrc:/Image/Common/MenuTheme2/L1/selectBase.png" :
                "qrc:/Image/Common/MenuTheme2/L1/normalBase.png"
            }
            Image {
                anchors.centerIn: iconMenuBorder
                source: wrapper.PathView.isCurrentItem ?
                "qrc:/Image/Common/MenuTheme2/L1/baseBg.png" : ""
            }
            Image {
                id: iconMenu
                source: wrapper.PathView.isCurrentItem ? iconSelect : icon
            }
            TextFieldAuto {
                id: titleMenu
                scale: 1
                visible: wrapper.PathView.isCurrentItem
                opacity: visible
                anchors.horizontalCenter: iconMenu.horizontalCenter
                anchors.horizontalCenterOffset: -155
                anchors.top: iconMenu.bottom
                anchors.topMargin: 40
                valueWidth: 300
                valueColor: "#ffffff"
                valueFontSize: 30
                infoValue: name
                Behavior on opacity { NumberAnimation { duration: 300; easing.type: Easing.InCubic } }
            }
            Image {
                visible: wrapper.PathView.isCurrentItem
                anchors.horizontalCenter: titleMenu.horizontalCenter
                anchors.horizontalCenterOffset: 150
                anchors.top: titleMenu.bottom
                anchors.topMargin: 30
                source: "qrc:/Image/Common/MenuTheme2/L1/line.png"
            }
        }
    }
    highlightMoveDuration: 200
    model: menuModel

    path: Path {
        id: p1
        startX: 675
        startY: 420
        //PathAttribute { name: "iconScale"; value: 0.6 }

        PathLine {
            x: 855
            y: 425
        }
        //PathAttribute { name: "iconScale"; value: 0.8 }

        PathLine {
            x: 1035
            y: 430
        }
        //PathAttribute { name: "iconScale"; value: 0.8 }

        PathLine {
            x: 1215
            y: 425
        }
        //PathAttribute { name: "iconScale"; value: 0.8 }

        PathLine {
            x: 1395
            y: 420
        }
        //PathAttribute { name: "iconScale"; value: 0.6 }

    }
}