aboutsummaryrefslogtreecommitdiffstats
path: root/src/quick/doc/snippets/qml
diff options
context:
space:
mode:
authorTor Arne Vestbø <tor.arne.vestbo@qt.io>2024-10-28 10:52:13 +0100
committerTor Arne Vestbø <tor.arne.vestbo@qt.io>2024-11-28 03:23:37 +0100
commit8b79dc7504e29f8e8bc8e3d650a60aeefad1a5ac (patch)
tree4aaf3689a50e04bb53ddb1a44ae94024da92979a /src/quick/doc/snippets/qml
parent7dda22389674bd4ba705fbef438ff2ad97ed8ef5 (diff)
Add SafeArea attached property
The SafeArea attached type provides information about the areas of an Item or Window where content may risk being overlapped by other UI elements, such as system title bars or status bars. This information can be used to lay out children of an item within the safe area of the item, while still allowing a background color or effect to span the entire item. The attached type also provides a writable property to add additional margins, which are reflected through the item's and any children's safe area margins. This is useful for informing child items about elements such as headers or footers, that may overlap the other child items. Task-number: QTBUG-125373 Change-Id: Id83e384f31f9770367c98e6455ec44e1086beb8a Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io> Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'src/quick/doc/snippets/qml')
-rw-r--r--src/quick/doc/snippets/qml/safearea/additional.qml46
-rw-r--r--src/quick/doc/snippets/qml/safearea/basic.qml31
-rw-r--r--src/quick/doc/snippets/qml/safearea/controls.qml29
3 files changed, 106 insertions, 0 deletions
diff --git a/src/quick/doc/snippets/qml/safearea/additional.qml b/src/quick/doc/snippets/qml/safearea/additional.qml
new file mode 100644
index 0000000000..900be5819b
--- /dev/null
+++ b/src/quick/doc/snippets/qml/safearea/additional.qml
@@ -0,0 +1,46 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Window {
+ flags: Qt.ExpandedClientAreaHint | Qt.NoTitleBarBackgroundHint
+ visible: true
+
+//![0]
+Rectangle {
+ id: parentItem
+ gradient: Gradient.SunnyMorning
+ anchors.fill: parent
+
+ Rectangle {
+ id: headerItem
+ width: parent.width
+ height: 80 + parent.SafeArea.margins.top
+ gradient: Gradient.WinterNeva
+ z: 1
+ }
+
+ Item {
+ id: contentItem
+ anchors.fill: parent
+ z: 0
+
+ SafeArea.additionalMargins.top: headerItem.height
+
+ Rectangle {
+ id: childItem
+ gradient: Gradient.DustyGrass
+ anchors {
+ fill: parent
+
+ topMargin: parent.SafeArea.margins.top
+ leftMargin: parent.SafeArea.margins.left
+ rightMargin: parent.SafeArea.margins.right
+ bottomMargin: parent.SafeArea.margins.bottom
+ }
+ }
+ }
+}
+//![0]
+}
diff --git a/src/quick/doc/snippets/qml/safearea/basic.qml b/src/quick/doc/snippets/qml/safearea/basic.qml
new file mode 100644
index 0000000000..7b0620706e
--- /dev/null
+++ b/src/quick/doc/snippets/qml/safearea/basic.qml
@@ -0,0 +1,31 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Window {
+ flags: Qt.ExpandedClientAreaHint | Qt.NoTitleBarBackgroundHint
+ visible: true
+
+//![0]
+Rectangle {
+ id: parentItem
+ gradient: Gradient.SunnyMorning
+ anchors.fill: parent
+
+ Rectangle {
+ id: childItem
+ gradient: Gradient.DustyGrass
+
+ anchors {
+ fill: parent
+
+ topMargin: parent.SafeArea.margins.top
+ leftMargin: parent.SafeArea.margins.left
+ rightMargin: parent.SafeArea.margins.right
+ bottomMargin: parent.SafeArea.margins.bottom
+ }
+ }
+}
+//![0]
+}
diff --git a/src/quick/doc/snippets/qml/safearea/controls.qml b/src/quick/doc/snippets/qml/safearea/controls.qml
new file mode 100644
index 0000000000..67bbb13a8f
--- /dev/null
+++ b/src/quick/doc/snippets/qml/safearea/controls.qml
@@ -0,0 +1,29 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+import QtQuick.Controls
+
+Window {
+ flags: Qt.ExpandedClientAreaHint | Qt.NoTitleBarBackgroundHint
+ visible: true
+
+//![0]
+Control {
+ anchors.fill: parent
+
+ background: Rectangle {
+ gradient: Gradient.SunnyMorning
+ }
+
+ topPadding: SafeArea.margins.top
+ leftPadding: SafeArea.margins.left
+ rightPadding: SafeArea.margins.right
+ bottomPadding: SafeArea.margins.bottom
+
+ contentItem: Rectangle {
+ gradient: Gradient.DustyGrass
+ }
+}
+//![0]
+}