使用Qt Quick和qml创建像电报一样的响应式ui？

Question

我想创建像具有响应式设计的电报那样的qml UI。 在电报中，当您有足够的空间聊天区域显示在右侧时，如果没有足够的空间聊天区域和其他详细信息显示为堆栈视图。

我在listview上有一个将联系人添加到数据库的表单。 我想要窗口是否足够大，列表视图显示在窗体的右侧

或如果没有可用的空间列表视图，并且表单显示为堆栈视图

就像电报应用

这个怎么做？

这是我的qml文件：

ApplicationWindow {
    id: window
    visible: true
    width: 300
    height: 480

    ColumnLayout {
        id: rowLayout
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 5
        spacing: 10

        Text { text: qsTr("FirstName") }
        TextField { id: firstnameField }
        Text { text: qsTr("LastName") }
        TextField { id: lastnameField }
        Text { text: qsTr("Mobile") }
        TextField { id: mobileField }

        Button {
            text: qsTr("Add Data")
            onClicked: {
                database.insertIntoTable(firstnameField.text, lastnameField.text, mobileField.text)
                myModel.updateModel()
            }
        }

        Button {
            text: "Remove"
            onClicked: contextMenu.open();
        }
    }

    ListView {
        id: tableView
        anchors.top: rowLayout.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 5
        anchors.topMargin: 30
        model: myModel

        Row {
            id: rl
            x:0
            y: -30
            Text { text: "FirstName"; font.bold: true; width: 120; }
            Text { text: "LastName"; font.bold: true; width: 120; }
            Text { text: "Mobile"; font.bold: true; width: 120; }
            spacing: 10
        }

        delegate: RowLayout {
            id: rowlayout
            spacing: 10

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    tableView.currentIndex = index
                }
            }

            Rectangle {
                id: rc;
                anchors.fill: parent
                color: mouseArea.containsMouse ? "#55CCccCC" : "#00ffFFff"
            }

            Rectangle {
                id: rowLayoutBackground
                anchors.fill: parent
                color: (tableView.currentIndex == index) ? "#55CCccCC" : "#00ffFFff"
            }

            Column { Text { text: firstname; width: 120; } }
            Column { Text { text: lastname; width: 120; } }
            Column { Text { text: mobile; width: 120; } }
        }
    }

    Menu {
        id: contextMenu
        MenuItem {
            text: qsTr("Remove")
            onTriggered: {
                dialogDelete.open()
            }
        }
    }

    MessageDialog {
        id: dialogDelete
        title: qsTr("Remove record")
        text: qsTr("Confirm the deletation of log entries")
        icon: StandardIcon.Warning
        standardButtons: StandardButton.Ok | StandardButton.Cancel

        onAccepted: {
            database.removeRecord(myModel.getId(tableView.currentIndex))
            myModel.updateModel()
        }
    }

}

Answer 1

这是演示通过QML State响应式布局的演示。

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Controls 1.4

Window {
    id: window
    visible: true
    readonly property int responsiveWidth: 500
    width: 300; height: 500

    SwipeView  {
        id: swipeView
        currentIndex: 1
        anchors.fill: parent
        states: [
            State {
                when: window.width >= responsiveWidth
                ParentChange { target: contacts; parent: contactsContainer; }
                ParentChange { target: chat; parent: chatContainer; }
                PropertyChanges { target: indicator; visible: hide }
            }
        ]
        Item {
            Rectangle {
                id: contacts
                anchors.fill: parent
                color: "lightblue"; border.width: 5; border.color: "white"
            }
        }
        Item {
            Rectangle{
                id: chat
                anchors.fill: parent
                color: "lightgray"; border.width: 5; border.color: "white"
            }
        }
    }

    PageIndicator {
        id: indicator
        count: swipeView.count
        currentIndex: swipeView.currentIndex
        anchors.bottom: swipeView.bottom
        anchors.bottomMargin: 10
        anchors.horizontalCenter: swipeView.horizontalCenter
    }

    Row {
        id: splitView
        anchors.fill: parent
        Item {
            id: contactsContainer
            width: parent.width / 2; height: parent.height
        }
        Item {
            id: chatContainer
            width: parent.width / 2; height: parent.height
        }
    }
}

最好提供一个可运行的示例代码来解释问题，所以我简化了您的示例代码以显示响应式布局的结果。

Github上的完整源代码

更新：

以下代码已更新为SwipeView版本。 但是执行响应式布局的想法始终是使用STM对其进行控制。 我不熟悉SwipeView因此，如果您发现代码有任何问题，请添加注释。