使用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因此，如果您發現代碼有任何問題，請添加注釋。