如何为 QML 三向切换设置动画

Question

我正在尝试在 qml 中进行三向切换，其中红色矩形动画/滑动到单击的位置。切换仅包含图像，没有文本：

MyToggle.qml

Rectangle {
        color: "gray"
        width: 400
        height: 50
        Row {
            id: rowId
            MyRadioButton {
                id: button1
                onClicked: {
                    console.log("clicked on button1")
                    animationId.restart()
                }
            }
            MyRadioButton {
                id: button2
                onClicked: {
                    console.log("clicked on button2")
                }
            }
            MyRadioButton {
                id: button3
                onClicked: {
                    console.log("clicked on button3")
                }
            }
        }
    }

    PropertyAnimation {
        id: animationId
        target: button3
        property: "x"
        duration: 1000
        to: 0
        easing.type: Easing.InOutQuad
    }
}

MyRadioButton.qml

RadioButton {
   id: button1
   width: 90
   height: 100
   Image {
    source: "qrc:/image.png"
    sourceSize.width: 50
    sourceSize.height: 50
    anchors.horizontalCenter: parent.horizontalCenter
}
indicator: Rectangle {
    width: 100
    height: 50
    color: "red"
    opacity: 0.8
    visible: button1.checked
  }
}

PropertyAnimation 是错误的，因为它移动整个按钮而不仅仅是指示器。如果我将动画移动到 MyRadioButton 中，我将不知道将“x”移动多远。 有人知道如何实现这个吗？

Answer 1

使用 ListView 包含三个按钮会更容易，因为它已经有一个在项目上进行动画处理的突出显示对象。为了更简单的测试，我只使用了常规按钮而不是单选按钮，但希望这应该告诉您需要做什么。

ListView {
    id: lv
    width: 300
    orientation: ListView.Horizontal
    model: 3
    delegate: Button {
        width: 100
        height: 40
        text: "X"
        
        onClicked: {
            lv.currentIndex = index
        }
    }
    highlight: Rectangle {
        color: "#7fff0000"
        z: 2
    }
}