Adding margins to QML Layout - qt

Question

I'm trying to add padding/margins to my layout so my controls to appear so close to the border of the window. When i set the anchor margins it doesn't appear to actually affect anything.
This is the qml file displayed for the Settings Tab.
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
}
}
}
}
This is the 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

If an Item is affected by a Layout then you must use Layout.margins if you want to set all the margins to the same value, but if you want to set a different margin in each direction you must use Layout.leftMargin, Layout.topMargin, Layout.rightMargin and Layout .bottomMargin, in your case:
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
// ...
Update:
Then set the margin at the anchor:
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")
// ...