如何在qml中的行元素内提供自定义间距

Question

我正在尝试在 QML 中创建一个 UI，它应该看起来像这样

也就是说，textField 元素和 Button 之间有一些额外的像素 space。

我正在尝试使用 QML 行元素重新创建此图像，如下所示

    Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Row{
        id:row_element
        anchors.horizontalCenter: parent.horizontalCenter
        spacing:20
        width: implicitWidth
        height: implicitHeight
        RadioButton{
            id:min_timer_id
            text: "100"
            spacing: 5
        }
        RadioButton{
            id:max_timer_id
            text: "500"
            spacing: 5
        }
        RadioButton{
            id:custom_entry_rb
            text: "custom"
            spacing: 5
            width: 100
        }

        TextField{
            id:custom_entry
            placeholderText: "enter custom time"
            width: 200
        }
        Button{
            id:buttonId
            text: "start Timer"
            width: 200
            spacing: 100
        }

    }
}

我无法设置文本字段和按钮之间的自定义间距，有没有办法使用行元素来实现？

我目前的 UI 看起来像这样：-

Answer 1

如果您需要将它保持在 Row 内，我会添加一个不可见的 Item 作为间隔。

Row {
    spacing: 20
    RadioButton {}
    RadioButton {}
    TextField {}

    // Size this to whatever you need.
    Item { height: 1; width: 50 }

    Button {}
}

Answer 2

您可以将 RowLayout 与具有 Layout.fillWidth: true 的 Item 一起使用。

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15

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

    RowLayout {
        id: row_element
        spacing: 20
        anchors.top: parent.top
        width: parent.width

        RadioButton {
            id: min_timer_id

            text: "100"
            spacing: 5
        }

        RadioButton {
            id: max_timer_id

            text: "500"
            spacing: 5
        }

        RadioButton {
            id: custom_entry_rb

            text: "custom"
            spacing: 5
            width: 100
        }

        TextField {
            id: custom_entry

            placeholderText: "enter custom time"
            width: 200
        }
        Item{
            Layout.fillWidth: true
        }

        Button {
            id: buttonId

            text: "start Timer"
            width: 200
        }

    }

}

如何在qml中的行元素内提供自定义间距

how to give custom spacing inside a row element in qml

qt

qml

qt5