qt - 使用 Qt Quick 和 qml 创建一个类似电报的响应式用户界面？

Question

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

我有一个 ListView 和一个用于向数据库添加联系人的表单。如果窗口足够大，我想在表单右侧显示 ListView

或者如果没有可用空间 ListView 和表单显示为堆栈 View

就像电报应用程序一样

如何做到这一点？

这是我的 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，所以如果您发现代码有任何问题，请添加评论。