关于RowLayout/ColumnLayout的margins

最新推荐文章于 2024-09-11 10:23:55 发布

超级哇塞

最新推荐文章于 2024-09-11 10:23:55 发布

阅读量252

点赞数 1

分类专栏： Cutee Qt 文章标签：前端 qt Layout

本文链接：https://blog.csdn.net/qq_48150274/article/details/140605325

版权

Cutee Qt 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

    RowLayout{
        anchors.fill: parent
        Layout.topMargin: 4
        Layout.bottomMargin: 4
        Layout.leftMargin: 4
        Layout.rightMargin: 4
        ......
}

    RowLayout{
        anchors.fill: parent
        anchors.margins: 4 
        ......
}

在 QML 中，Layout.topMargin, Layout.bottomMargin, Layout.leftMargin, 和 Layout.rightMargin 是用来设置布局项的边距，而 anchors.margins 是用来设置锚点布局的边距。

在上面例子中，RowLayout 本身不直接支持这些 Layout 属性，因为它们是为布局管理器（如 GridLayout）中的子项而设计的，而不是为布局管理器本身设计的。

RowLayout 和 ColumnLayout 本身没有边距属性，而是需要通过 anchors.margins 或其他布局组件的边距来设置。anchors.margins 在父项上设置边距，而 Layout 属性在子项上设置边距。根据需求选择合适的布局和属性来达到预期效果。

因此，在 RowLayout 上使用 anchors.margins 可以起到作用，而 Layout.topMargin 等属性则不会生效。

使用 `GridLayout` 和 `Layout` 属性

如果你需要使用 Layout.topMargin 等属性，你可以考虑使用 GridLayout，它支持这些布局属性：

import QtQuick 2.15
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.15

Item {
    width: 640
    height: 480

    property int imagebutton_WidthHeight1: 16
    property int imagebutton_WidthHeight2: 36

    GridLayout {
        anchors.fill: parent
        columns: 2
        rowSpacing: 4
        columnSpacing: 4

        Rectangle {
            id: left_framework
            color: "red"
            Layout.column: 0
            Layout.row: 0
            Layout.rowSpan: 1
            Layout.columnSpan: 1
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.topMargin: 4
            Layout.bottomMargin: 4
            Layout.leftMargin: 4
            Layout.rightMargin: 4
        }

        Rectangle {
            id: right_framework
            color: "black"
            Layout.column: 1
            Layout.row: 0
            Layout.rowSpan: 1
            Layout.columnSpan: 1
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.topMargin: 4
            Layout.bottomMargin: 4
            Layout.leftMargin: 4
            Layout.rightMargin: 4
        }
    }
}