Question

我正在处理以可供选择的项目列表开头的QML StackView。选择后，我想将_.push(...)转换为尺寸大于initialItem的输入表单。

我试图通过使Item形式成为嵌套无边框窗口的唯一方式是我的方法。

Q1。嵌套窗口不能成为正确的概念类型......对吗？必须有另一种方法来做到这一点。什么是正确的方法？

Q2。之后我的目标是在不同大小的堆栈之间生成或缩小过渡动画。建议并不排除最佳效果。

码

Main.qml：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

ApplicationWindow {
  property int itemHeight: 30
  property int cornerRadius : 5

  visible: true
  color: "transparent"
  flags: Qt.FramelessWindowHint

  ListModel {
    id: searchFacets
    ListElement {
      title: "Topics"
      page: "content/TopicSearch.qml"
    }
    //    ListElement {
    //      title: "Domains"
    //    }
  }

  StackView {
    id: stackView

    focus: true

    initialItem: SearchFacets {
      id: facets
    }
    delegate: StackViewDelegate {
      pushTransition: StackViewTransition {
        PropertyAnimation {
          target: enterItem
          property: "opacity"
          from: 0
          to: 1
        }
      }
    }
  }
}

初始条目：

import QtQuick 2.3

Item {
  height : listView.count * itemHeight
  ListView {
    id: listView
    model: searchFacets
    anchors.fill: parent
    focus: true
    highlightFollowsCurrentItem: false

    highlight:   Rectangle {
      width: parent.width
      height: itemHeight
      radius : cornerRadius
      color: "green"
      opacity: 0.5
      z:2
      x: listView.currentItem.x;
      y: listView.currentItem.y

      Behavior on y {
        SpringAnimation {
          spring: 60
          damping: 1.0
        }
      }
    }

    delegate:   Component {
      Item {
        width: parent.width
        height : itemHeight

        Rectangle {
          anchors.fill: parent
          color: "#212126"
          radius: cornerRadius
          z:0
          border.width: 2
          border.color : "white"
        }

        MouseArea {
          id: mouseArea
          anchors.fill: parent
          hoverEnabled: true

          onClicked: {
            console.log("clicked index: " + index)
            listView.currentIndex = index
//            listView.forceActiveFocus()
            stackView.push(Qt.resolvedUrl(page))
          }
        }
        Text {
          text: title
          font.pixelSize: 24
          font.bold: true
          z:1
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.verticalCenter: parent.verticalCenter
          color: "white"
          antialiasing: true
        }
      }
    }
  }
}

输入表格：

import QtQuick 2.3
import QtQuick.Window 2.0
Item {
  Window {
    width: 400
    height: 400
    visible: true
    flags: Qt.FramelessWindowHint

    Rectangle {
      anchors.fill: parent
      visible: true
      color: "red"
    }
  }
}

Answer 1

一种可能的解决方案是更新导致转换的点击处理程序中StackView的维度大小。我不知道这是否会导致过渡动画的任何问题。

MouseArea {
  id: mouseArea
  anchors.fill: parent
  hoverEnabled: true

  onClicked: {
    console.log("clicked index: " + index)
    listView.currentIndex = index

    var component = Qt.createComponent(page)
    var res = component.createObject(stackView)
    stackView.height = res.height
    stackView.width = res.width
    stackView.push(res)
  }
}

QT 5.3 / QML：可调整大小的StackView，取决于currentItem

1 个答案: