QT使用PathView实现滚动菜单

import QtQuick 2.6
 
/*
 * 作者: yubo
 * 功能: GearComponent
 * 描述: 提供一个公共调用旋转动画控件
 * 日期: 2019-05-05
 */
Item {
    width: 400
    height: 200
    
    ListModel {
        id: myModel 
        ListElement { name: "P" }
        ListElement { name: "R" }
        ListElement { name: "N" }
        ListElement { name: "D" }
    }

    Component {
        id: myDelegate 
        Item {
            width: 20 
            height: 20 
            scale: PathView.itemScale 
            property real positionPercent: PathView.percent 
            Text {
                anchors.centerIn: parent 
                text: name 
                color: !Car.gear ? "#383a3b": (parent.positionPercent > 0.90 ? "#ffffff": "#383a3b") 
                font.pixelSize: 32 
                font.family: "Arial"
            }
        }
    }
    PathView {
        id: myPathView 
        model: myModel 
        delegate: myDelegate 
        pathItemCount: 3 
        // 档位控制显示,0:P 1:R 2:N 3:D 
        // currentIndex范围(0~3),超出范围在使用三目运算符的情况会有问题
        // 例如:currentIndex = 6的时候
        currentIndex: !Car.gear ? 0 : Car.gear - 1 
        preferredHighlightBegin: 0.5 
        preferredHighlightEnd: 0.5 
        highlightMoveDuration: 250 
        focus: true 
        path: Path {
            startX: -10;
            startY: 5;
            PathAttribute { name: "itemScale"; value: 0.77 }
            PathAttribute { name: "percent"; value: 0.75 }
            PathPercent { value: 0 }

            PathQuad { x: 113; y: 20; controlX: 25; controlY: 12 }
            PathAttribute { name: "itemScale"; value: 1.1 }
            PathAttribute { name: "percent"; value: 1.0 }
            PathPercent { value: 0.5 }

            PathQuad { x: 250; y: 5; controlX: 171; controlY: 12 }
            PathAttribute { name: "itemScale"; value: 0.77 }
            PathAttribute { name: "percent"; value: 0.75 }
            PathPercent { value: 1.0 }
        }
    }
}

 

发布了247 篇原创文章 · 获赞 35 · 访问量 19万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览