Кнопки обтекания QML в узком и широком макете

Question

Как я могу сделать обтекание кнопок, когда размер диалогового окна уменьшен пользователем?В настоящее время они просто отключены.

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

Answer 1

Вы должны использовать Flow вместо 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
                }
            }
        }
    }
}