向 QML 布局添加边距

Question

我正在尝试向我的布局添加填充/边距，以便我的控件看起来非常靠近窗口边框。当我设置锚边距时，它似乎并没有实际影响任何东西。

这是为“设置”选项卡显示的 qml 文件。

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2

Page {
    id: control

    title: qsTr("Settings")
    objectName: "SettingsView"


    ColumnLayout {
        spacing: 20

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top

        Switch {
            text: qsTr("Theme")
            checked: root.Material.theme === Material.Dark
            Layout.fillWidth: true
            LayoutMirroring.enabled: true

            onClicked: {
                root.Material.theme = checked ? Material.Dark : Material.Ligth
                //Settings.currentTheme = root.Material.theme
            }
        }
    }
}

这是main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2

ApplicationWindow {
    id: root
    visible: true
    width: 300
    height: 500

    // Theme
    Material.theme: Material.Dark
    Material.accent: "#4096DD"
    Material.primary: "#4096DD"

    // Controls
    header: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex
        TabButton {
            //text: qsTr("Home")
            icon.source: "qrc:/Images/home.svg"
        }
        TabButton {
            //text: qsTr("Settings")
            icon.source: "qrc:/Images/settings.svg"
        }
    }

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1 {
        }

        SettingsView {

        }

    }
}

Answer 1

如果某个 Item 受布局影响，则如果要将所有边距设置为相同的值，则必须使用 Layout.margins，但如果要在每个方向设置不同的边距，则必须使用 Layout.leftMargin、Layout.topMargin 、 Layout.rightMargin 和 Layout .bottomMargin，在您的情况下：

ColumnLayout {
    spacing: 20

    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top

    Switch {
        Layout.leftMargin: 20
        Layout.topMargin: 20
        Layout.rightMargin: 20
        // ...

更新：

然后设置锚点的边距：

ColumnLayout {
    spacing: 20

    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top

    anchors.leftMargin: 20
    anchors.topMargin: 20
    anchors.rightMargin: 20

    Switch {
        text: qsTr("Theme")
        // ...