Question

我正在开发一个QML应用程序，其中有三个主要视图。我的代码如下所示。

SplitView{
    ListView{
        id: firstView
    }
    ListView{
        id: secondView
    }
    WebView{
        id: thirdView
    }
}

现在这个工作正常，但是我想这样做：当我的主窗口调整到一定宽度（500）以下时，我只想显示一个视图，这样点击代表就会显示下一个视图（有可能回到上一个视图）。因此，例如，单击第一个视图将显示第二个视图，单击第二个视图将显示第三个视图。我想要的方法与Windows 10中的Mail应用程序非常相似。有谁知道如何在QML中实现这一目标？

Answer 1

好的，我已经做了一个粗略的例子，我并没有故意将它模块化，所以你可以看到它在单一来源中是如何工作的。此外，我不知道Windows 10邮件应用程序是如何做到的，因为我没有它，但它仍然足够接近你的描述。

您从一行开始有3个列表视图，其大小可以填充整个UI，但是如果您将UI大小减小到最小值500，则视图的大小会增加，几乎可以填充整个UI，以及单击视图项，它将移动到下一个视图，如果单击显示上一个视图，您将返回到该视图。

ApplicationWindow {
    title: qsTr("Hello World")
    width: 800
    height: 300
    minimumWidth: 500
    visible: true

    Item {
        id: adapt
        width: parent.width
        height: parent.height
        property int sizeUnit: width > 500 ? width / 5 : 400
        property bool isPaged: width == 500 ? true : false
        onIsPagedChanged: { if (!isPaged) { x = 0; page = 0; } }
        property int page: 0

        Behavior on x { NumberAnimation { duration: 250; easing.type: Easing.OutBack } }

        ListModel {
            id: mod
            ListElement { name: "one" }
            ListElement { name: "two" }
            ListElement { name: "three" }
            ListElement { name: "four" }
            ListElement { name: "five" }
        }

        ListView {
            id: v1
            width: adapt.sizeUnit
            height: parent.height
            model: mod
            delegate: Rectangle {
                height: 70
                width: v1.width
                color: "red"
                border.color: "black"
                Text { anchors.centerIn: parent; text: name }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (adapt.isPaged) {
                            if (adapt.page == 0) {
                                adapt.x = -(v2.x - 100)
                                adapt.page = 1
                            } else {
                                adapt.x = 0
                                adapt.page = 0
                            }
                        }
                    }
                }
            }
        }

        ListView {
            id: v2
            width: adapt.sizeUnit
            height: parent.height
            x: adapt.sizeUnit + 10
            model: mod
            delegate: Rectangle {
                height: 70
                width: v2.width
                color: "cyan"
                border.color: "black"
                Text { anchors.centerIn: parent; text: name }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (adapt.isPaged) {
                            if (adapt.page == 1) {
                                adapt.x = -(v3.x - 100)
                                adapt.page = 2
                            } else {
                                adapt.x = -(v2.x - 100)
                                adapt.page = 1
                            }
                        }
                    }
                }
            }
        }

        ListView {
            id: v3
            width: adapt.isPaged ? adapt.sizeUnit : 3 * adapt.sizeUnit - 20
            height: parent.height
            x: v2.x + v2.width + 10
            model: mod
            delegate: Rectangle {
                height: 70
                width: v3.width
                color: "yellow"
                border.color: "black"
                Text { anchors.centerIn: parent; text: name }
            }
        }
    }
}

这应该足以让你前进。显然，对于制作而言，你可以选择更优雅的布局和画面，例如使用实际的页面滑动功能和＃34;和锚点，以上只是为了举例。

Answer 2

以下是我如何解决问题的想法。

    // When width of MainWindow is smaller than 500 stop using SplitView
property bool useSplitView: (width < 500 ? false : true)
onUseSplitViewChanged: {
    if (useSplitView) {
        firstView.anchors.fill = undefined
        secondView.anchors.fill = undefined
        thirdView.anchors.fill = undefined
        firstView.parent = splitView // splitView is id of SplitView
        secondView.parent = splitView
        thirdView.parent = splitView
    }
    else {
        firstView.parent = mainWindow.contentItem // mainWindow is id of MainWindow
        secondView.parent = mainWindow.contentItem
        thirdView.parent = mainWindow.contentItem
        secondView.visible = false
        thirdView.visible = false
        firstView.anchors.fill = firstView.parent
        secondView.anchors.fill = secondView.parent
        thirdView.anchors.fill = thirdView.parent
    }
}

当useSplitView标志更改时，您需要在视图上启用某种触摸区域，并在点击时在它们之间切换。

QML中的自适应UI

2 个答案: