qt - 如何在 QML 中向 StackLayout 添加过渡？

Question

我想要一个像 TabBar example in the Qt docs 这样的 GUI :



如果我使用 SwipeView，则在页面之间移动时会出现过渡(内容向左或向右移动)。使用 StackLayout 改变是立竿见影的。

我想在页面之间淡入淡出。我将如何使用 StackLayout 做到这一点？这甚至可能还是我需要编写自己的容器元素？

Answer 1

退房 StackView 以及相关联的 pushTransition、popTransition 和 replaceTransition。

一个简单的淡入淡出过渡:

StackView {
    delegate: StackViewDelegate {
        function transitionFinished(properties)
        {
            properties.exitItem.opacity = 1
        }

        pushTransition: StackViewTransition {
            PropertyAnimation {
                target: enterItem
                property: "opacity"
                from: 0
                to: 1
            }
            PropertyAnimation {
                target: exitItem
                property: "opacity"
                from: 1
                to: 0
            }
        }
    }
}

如果这对您不起作用，从头开始实现它仍然是一种选择:

// StackWidget.qml
Item {
  width: 300
  height: 500
  clip: true
  property Item activeItem: null
  property int activeIndex: -1
  onActiveIndexChanged: {
    if (activeIndex > -1) {
      animout.target = activeItem
      activeItem = children[activeIndex]
      animin.target = activeItem
    }
  }  
  PropertyAnimation {
    id: animin
    property: "x"
    from: target ? -target.width : 0
    to: 0
    onTargetChanged: if (target) start()
    easing.type: Easing.InOutQuad
  }
  PropertyAnimation {
    id: animout
    property: "x"
    from: 0
    to: target ? target.width : 0
    onTargetChanged: if (target) start()
    easing.type: Easing.InOutQuad
  }
  Component.onCompleted: {
    for (var i = 0; i < children.length; ++i) {
      if (i) children[i].x = -children[i].width
    }
    if (children.length) {
      activeIndex = 0
      activeItem = children[0]
    }
  }
}

// test it out

StackWidget {
  id: stack
  Rectangle {
    width: parent.width
    height: parent.height
    color: "blue"
    Text {
      anchors.centerIn: parent
      text: "blue widget"
    }
  }
  Rectangle {
    width: parent.width
    height: parent.height
    color: "red"
    Text {
      anchors.centerIn: parent
      text: "red widget"
    }
  }
  Rectangle {
    width: parent.width
    height: parent.height
    color: "green"
    Text {
      anchors.centerIn: parent
      text: "green widget"
    }
  }
}

MouseArea {
  anchors.fill: parent
  onClicked: stack.activeIndex = (stack.activeIndex + 1) % stack.children.length
}