QML布局相关-盒子模型

在 QML（Qt Modeling Language）中，布局相关的几个常见术语包括 margin、spacing、padding 和 border。这些术语主要出现在使用 Qt Quick Controls 或 Qt Quick Layouts 模块进行界面设计时。下面分别解释它们的含义和用途：

🔹 1. Margin（外边距）

含义：Margin 表示控件外部与其父容器或其他相邻控件之间的空间。它控制一个元素与其他元素之间的“外部”距离。

类比 CSS：类似于 CSS 中的 margin。

QML 示例：
Rectangle {
width: 200; height: 100
color: “lightblue”
anchors.centerIn: parent
anchors.margins: 20 // 控件离父窗口边界的距离为20
}

或者在使用 Layout 时：
RowLayout {
anchors.fill: parent
spacing: 10
Rectangle {
Layout.fillWidth: true
Layout.leftMargin: 10 // 左边距为10
Layout.rightMargin: 20 // 右边距为20
height: 50
color: “red”
}
}

🔹 2. Spacing（间距）

含义：Spacing 用于布局内部多个子项之间保持一致的间隔。它是在像 RowLayout、ColumnLayout、GridLayout 等布局中使用的。

类比 CSS：类似 CSS Flexbox 的 gap 属性或 margin 的组合效果。

QML 示例：
RowLayout {
width: parent.width
spacing: 15 // 每个子控件之间保持15像素的距离
Rectangle { Layout.preferredWidth: 50; height: 50; color: “red” }
Rectangle { Layout.preferredWidth: 50; height: 50; color: “green” }
Rectangle { Layout.preferredWidth: 50; height: 50; color: “blue” }
}

🔹 3. Padding（内边距）

含义：Padding 表示控件内部内容与控件边框之间的空间。它影响的是控件内部元素的布局位置，比如 Text 在 Rectangle 内的位置。

注意：QML 原生控件不直接提供 padding 属性，但某些容器如 Item, Control, ScrollView 等通过 padding 属性支持；也可以通过 Item 的 topPadding、leftPadding 等属性设置。

类比 CSS：相当于 CSS 的 padding。

QML 示例：
Button {
text: “Click Me”
padding: 10 // 文本与按钮边缘之间的距离为10
}

或者在容器中：
Item {
padding: 10
Text {
text: “Hello”
}
}

🔹 4. Border（边框）

含义：Border 表示控件的边界线条，通常用于装饰或突出显示控件区域。它包括边框宽度、颜色、样式等。

QML 示例：
Rectangle {
width: 100; height: 50
color: “yellow”
border.width: 2
border.color: “black”
}

还可以使用 radius 设置圆角：
Rectangle {
width: 100; height: 50
radius: 10
border.width: 1
border.color: “gray”
}

✅ 总结对比表：

名称 含义 类比 CSS QML 示例

Margin 控件与外部元素之间的空白 margin anchors.margins, Layout.leftMargin

Spacing 布局中多个子控件之间的间隔 gap / margin RowLayout { spacing: 10 }

Padding 控件内容与控件边框之间的空白 padding padding: 10, topPadding 等

Border 控件边框的宽度、颜色和样式 border border.width, border.color

如需进一步了解 QML 布局系统，可以参考官方文档：

🔗 https://doc.qt.io/qt-6/qtquicklayouts-index.html
🔗 https://doc.qt.io/qt-6/qml-qtquick-controls2-control.html