Qt 窄布局与宽布局中的QML包裹按钮

Qt 窄布局与宽布局中的QML包裹按钮,qt,qml,Qt,Qml,当用户将对话框窗口的大小调整为狭窄时,如何使按钮换行?目前,它们刚刚被切断 QML import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 Frame { width: parent.width height: parent.height ColumnLayout { width: implicitWidth spacing: 20

当用户将对话框窗口的大小调整为狭窄时,如何使按钮换行?目前,它们刚刚被切断

QML

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0


Frame {
    width: parent.width
    height: parent.height

    ColumnLayout {
        width: implicitWidth
        spacing: 20
        anchors.left: parent.left
        anchors.right: parent.right
        Layout.alignment: Qt.AlignTop

        // Config
        ColumnLayout {
            Layout.fillWidth: true
            spacing: 2

            Label {
                text: "Config"
                font.bold: true
            }
            TextField {
                readOnly: true
                placeholderText: qsTr("Path to config.json file (C:\\desktop\\config.txt)")
                Layout.fillWidth: true
            }

            RowLayout {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignRight

                Button {
                    text: qsTr("Edit")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Browse")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Clear")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Find")
                    implicitWidth: implicitHeight
                }
            }
        }


        // File
        ColumnLayout {
            Layout.fillWidth: true
            spacing: 2

            Label {
                text: "File"
                font.bold: true
            }
            TextField {
                readOnly: true
                placeholderText: qsTr("Path to config.json file (C:\\desktop\\file.txt)")
                Layout.fillWidth: true
            }

            RowLayout {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignRight

                Button {
                     text: qsTr("Clear")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Find")
                    implicitWidth: implicitHeight
                }
            }
        }

    }
}
main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Page1 {
        anchors.centerIn: parent
    }
}
您必须使用而不是RowLayout:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

Frame {
    width: parent.width
    height: parent.height
    ColumnLayout {
        width: implicitWidth
        spacing: 20
        anchors.left: parent.left
        anchors.right: parent.right
        Layout.alignment: Qt.AlignTop
        // Config
        ColumnLayout {
            Layout.fillWidth: true
            spacing: 2

            Label {
                text: "Config"
                font.bold: true
            }
            TextField {
                readOnly: true
                placeholderText: qsTr("Path to config.json file (C:\\desktop\\config.txt)")
                Layout.fillWidth: true
            }
            Flow {
                Layout.fillWidth: true
                layoutDirection: Qt.RightToLeft 

                Button {
                    text: qsTr("Edit")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Browse")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Clear")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Find")
                    implicitWidth: implicitHeight
                }
            }
        }
        // File
        ColumnLayout {
            Layout.fillWidth: true
            spacing: 2

            Label {
                text: "File"
                font.bold: true
            }
            TextField {
                readOnly: true
                placeholderText: qsTr("Path to config.json file (C:\\desktop\\file.txt)")
                Layout.fillWidth: true
            }

            Flow {
                Layout.fillWidth: true
                layoutDirection: Qt.RightToLeft 

                Button {
                     text: qsTr("Clear")
                    implicitWidth: implicitHeight
                }
                Button {
                     text: qsTr("Find")
                    implicitWidth: implicitHeight
                }
            }
        }
    }
}

我是否必须重新排列按钮以保持相同的顺序?@JokerMartini是的,因为流程不是向右对齐,而是从右向左放置项目