向QML布局添加边距

时间:2019-09-12 15:48:55

标签: qt qml

我正在尝试向布局中添加填充/边距,以便控件显示在窗口边框附近。当我设置锚边距时,它似乎并没有真正影响任何东西。

enter image description here

这是在“设置”标签中显示的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 {

        }

    }
}

1 个答案:

答案 0 :(得分:1)

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

USER_STATE

更新

然后在锚点处设置边距:

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
        // ...