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

【问题标题】：how to give custom spacing inside a row element in qml如何在qml中的行元素内提供自定义间距
【发布时间】：2021-09-07 18:55:17
【问题描述】：

我正在尝试在 QML 中创建一个应该如下所示的 UI

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

我正在尝试使用 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 如下所示：-

【问题讨论】：

标签： qt qml qt5

【解决方案1】：

如果您需要将其保留在 Row 内，我只需添加一个不可见的 Item 作为分隔符。

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

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

    Button {}
}

【讨论】：

【解决方案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
        }

    }

}

【讨论】：

感谢您的回复，但我想专门在行组件中执行此操作。