进入 PathView 委托

Posted 2023-02-16

【中文标题】进入 PathView 委托

【英文标题】：Getting into PathView delegate

【发布时间】：2019-03-15 13:33:11

【问题描述】：

我正在尝试在我的 PathView 委托中为属性设置动画。

    Component 
        id: pathViewDelegate
        Item 
            Text 
                id: tempText
                color: "red"
                text: "test"
            

            function intoView() 
                myAnimation.start()
            

            SequentialAnimation 
                id: myAnimation
                PropertyAnimation duration: 1000; target: tempText; properties: "color"; to: "green"
                PropertyAnimation duration: 1000; target: tempText; properties: "color"; to: "yellow"
            
        
    

我知道如何正确显示我的 PathView（如线性轮播）的唯一方法是将 currentItem 从屏幕上剪掉。换句话说，在我的 PathView 中显示的项目总是 currentIndex+1。

    PathView 
        id: mainCarousel
        width: parent.width
        height: parent.height

        interactive: false
        highlightMoveDuration: 300

        clip: true

        model: pathViewModel
        delegate: pathViewDelegate

        path: Path 
            startX: -mainCarousel.width*0.5
            startY: mainCarousel.height/2

            PathLine  x: mainCarousel.width*0.5; y: mainCarousel.height/2 
            PathLine  x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 
        
    

因此，当我尝试使用“mainCarousel.currentItem.intoView()”实现一个函数时，它会为从屏幕上截取的项目设置动画。我知道没有办法执行“currentItem+1”，但还有其他解决方法吗？

编辑：完整示例代码

ListModel 
    id: pathViewModel
    ListElement header: "text 1"
    ListElement header: "text 2"
    ListElement header: "text 3"
    ListElement header: "text 4"

Component 
    id: pathViewDelegate

    Item 
        width: mainCarousel.width
        height: mainCarousel.height

        Text 
            color: "red"
            text: header
        

        function runAnimation() 
            myAnimation.start()
        

        SequentialAnimation 
            id: myAnimation
            PropertyAnimation property: "color"; to: "green"; duration: 1000
            PropertyAnimation property: "color"; to: "yellow"; duration: 1000
            PropertyAnimation property: "color"; to: "purple"; duration: 1000
        
    

PathView 
    id: mainCarousel
    width: 500
    height: 500

    interactive: false
    highlightMoveDuration: 300

    clip: true

    model: pathViewModel
    delegate: pathViewDelegate

    path: Path 
        startX: -mainCarousel.width*0.5
        startY: mainCarousel.height/2

        PathLine  x: mainCarousel.width*0.5; y: mainCarousel.height/2 
        PathLine  x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 
    

MouseArea 
    id: telltaleMouseArea
    anchors.fill: mainCarousel
    onClicked: 
        mainCarousel.incrementCurrentIndex()
        mainCarousel.currentItem.runAnimation()
    

显示的初始项目是“文本 2”。 currentItem 最初是“文本 1”。在代码中，当单击 MouseArea 时，“text 2”动画，但它不在屏幕上。我只是在尝试为视图中的项目设置动画，当它进入视图时。

【问题讨论】：

标题和正文不对应。你真正的问题是什么？您需要currentIndex+1 解决方法吗？

在我的代码示例中，委托有一个我想在项目进入视图时触发的函数（发生在按键事件上）。如果我执行 mainCarousel.currentItem，则受影响的项目不在屏幕上（剪辑）。

@brandon 提供 minimal reproducible example

首先将您的currentItem 移到视图中：startX: mainCarousel.width*0.5

当您在color 上制作动画时，动画不知道要制作哪种颜色的动画。将Animation 放入Text，现在动画就知道了。使用适当的动画也是一个好习惯，在这里ColorAnimation

【参考方案1】：

将动画改成如下：

Text 
    color: "red"
    text: header

    SequentialAnimation on color
        id: myAnimation
        ColorAnimation 
            to: "green"
            duration: 1000
        
        ColorAnimation 
            to: "yellow"
            duration: 1000
        
        ColorAnimation 
            to: "purple"
            duration: 1000
        
    
 

并确保您的 currentItem 可以看到：startX: mainCarousel.width*0.5