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

Posted 2023-02-16

【中文标题】如何在qml中的行元素内提供自定义间距

【英文标题】：how to give custom spacing inside a row element in 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 如下所示：-

【参考方案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
        

    

【讨论】：

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