使用Qt-Quick和qml创建一个响应式用户界面（如电报）？

我想创建一个像telegram这样的具有响应性设计的qml用户界面。 在电报中，当您有足够的空间时，聊天区显示在右侧，如果没有足够的空间，聊天区和其他细节显示为堆栈视图

我有一个列表视图和一个表单，可以将联系人添加到数据库中。 如果窗口足够大，我想在窗体的右侧显示listview

或者，如果没有可用空间，则使用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()
        }
    }

}

---

以下是通过QML显示响应性布局的演示

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

完整来源于

更新：

---

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

这是示例代码，我希望像电报一样流畅：亲爱的Jiu Thnaks。请如果你可以编辑我的github项目，使其像你在git中发布的那样响应。此外，当小屏幕矩形聊天时，请用后退按钮显示矩形联系人，我是初学者。或者请更改您的代码，当窗口很小时，两个矩形将以堆叠方式显示，矩形联系人上有一个按钮显示矩形聊天，矩形聊天上有一个后退按钮返回矩形联系人我可以收到您的电子邮件吗？arrivalhacker@gmail.com@AliakbarRashidi I添加了按钮（隐藏和显示），更新了Github上的源代码。

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
        }
    }
}