QML：在 ScrollView 中向上扩展 ColumnLayout？

Question

我正在制作一个具有短信功能的应用程序。我希望将短信从底部到顶部添加到列布局中，就像常规短信应用程序一样。如果只有几条消息或一条消息，它们会出现在视图的底部而不是顶部。现在，消息是从上到下添加的，我不知道如何让它以我想要的方式出现。这是我的代码目前的样子：

这是我的代码：

Rectangle {
            id: conversationView
            SplitView.fillWidth: false
            SplitView.minimumWidth: 400
            color: "#ffffff"
            anchors.left: sideBar.right
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            anchors.topMargin: 0
            anchors.bottomMargin: 0

            Rectangle {
                id: conversationTopBar
                y: 0
                height: 45
                color: "#cbcbcb"
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.leftMargin: 0
                anchors.rightMargin: 0

                Label {
                    id: contactLabel
                    y: 14
                    width: 250
                    color: "#000000"
                    text: qsTr("Contact Name")
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    font.pointSize: 13
                    anchors.leftMargin: 20
                    font.bold: true
                }

                IconBtn {
                    x: 452
                    y: 3
                    height: contactLabel.height * 1.25
                    width: height
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    iconBig: 20
                    doAnimation: false
                    iconColor: "#000000"
                    btnIconSource: "../images/icons/three_dots_vertical.svg"
                    anchors.rightMargin: 10

                }
            }

            DropShadow {
                anchors.fill: conversationTopBar
                radius: 10.0
                samples: 17
                color: "#aa000000"
                source: conversationTopBar
                z: 3
            }

            SplitView {
                id: conversationSplitView
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: conversationTopBar.bottom
                anchors.bottom: parent.bottom
                anchors.leftMargin: 5
                orientation: Qt.Vertical
                anchors.topMargin: 0

                handle: Rectangle {
                    implicitHeight: 8
                    color: "#050633"

                    Image {
                        id: horizontalDots
                        anchors.centerIn: parent.Center
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        source: "../images/icons/three_dots_horizontal.svg"
                        fillMode: Image.PreserveAspectFit
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                    }

                    ColorOverlay {
                        anchors.fill: horizontalDots
                        source: horizontalDots
                        color: "white"
                        antialiasing: true
                    }
                }

                Rectangle {
                    id: messagesView
                    color: "#ffffff"
                    SplitView.fillHeight: true
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    anchors.leftMargin: 0
                    anchors.rightMargin: 0

                    ScrollView {
                        id: messagesScroll
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        contentWidth: width
                        anchors.topMargin: 0
                        anchors.bottomMargin: 0
                        anchors.leftMargin: 0
                        anchors.rightMargin: 0

                        ColumnLayout {
                            id: columnLayout
                            height: 100
                            anchors.left: parent.left
                            anchors.right: parent.right
                            anchors.top: parent.top
                            anchors.rightMargin: 20
                            anchors.leftMargin: 20
                            anchors.topMargin: 20
                            spacing: 20

                            TextMessage {
                                messageText: "Hello World!"
                            }

                            TextMessage {
                                text: "And all who inhabit it!"
                                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                                messageText: "Hello World!"
                            }
                        }


                    }
                }

                Rectangle {
                    id: compositionView
                    SplitView.minimumHeight: 55
                    SplitView.preferredHeight: 55
                    height: 200
                    color: "#ffffff"
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.leftMargin: 0
                    anchors.rightMargin: 0

                    MessageComposer {
                        anchors.left: parent.left
                        anchors.right: sendMsgBtn.left
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        clearTxtBtnColor: "#0e1052"
                        textColor: "#000000"
                        anchors.rightMargin: 10
                        anchors.leftMargin: 10
                        anchors.bottomMargin: 10
                        anchors.topMargin: 10

                    }

                    IconBtn {
                        id: sendMsgBtn
                        x: 447
                        y: 8
                        anchors.right: parent.right
                        iconColor: "#0e1052"
                        anchors.rightMargin: 10
                        btnIconSource: "../images/icons/send.svg"

                    }
                }

            }
        }

Answer 1

您通常会为这样的事情使用视图。 ListView中相关的属性是verticalLayoutDirection:

verticalLayoutDirection: ListView.BottomToTop

Qt 中有一个聊天示例可以执行此操作：

https://doc.qt.io/qt-5/qtquickcontrols-chattutorial-example.html

你可以add a ScrollBar to any ListView, or wrap the ListView in a ScrollView.

QML：在 ScrollView 中向上扩展 ColumnLayout？

QML: Expand ColumnLayout upwards within ScrollView?

qt

qml