163 lines
4.0 KiB
QML
163 lines
4.0 KiB
QML
// Copyright (c) Daniel Gakwaya.
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
import QtQuick
|
|
import QtQuick.Window
|
|
|
|
Window {
|
|
visible: true
|
|
width: 640
|
|
height: 480
|
|
title: qsTr("Anchors: Margins and offsets")
|
|
|
|
Rectangle {
|
|
id: containerRectId
|
|
width: 300
|
|
height: width
|
|
border.color: "black"
|
|
anchors.centerIn: parent
|
|
|
|
Rectangle {
|
|
id: topLeftRectId
|
|
width: 100
|
|
height: width
|
|
color: "magenta"
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "1"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: topCenterRectId
|
|
width: 100
|
|
height: width
|
|
color: "yellowgreen"
|
|
anchors.left: topLeftRectId.right
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "2"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: topRightRectId
|
|
width: 100
|
|
height: width
|
|
color: "dodgerblue"
|
|
anchors.left: topCenterRectId.right
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "3"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: centerLeftRectId
|
|
width: 100
|
|
height: width
|
|
color: "red"
|
|
anchors.top: topLeftRectId.bottom
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "4"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: centerCenterRectId
|
|
width: 100
|
|
height: width
|
|
color: "green"
|
|
|
|
/*
|
|
|
|
|
|
//Anchor relative to other rectangles
|
|
anchors.left: centerLeftRectId.right
|
|
anchors.top: topRightRectId.bottom
|
|
|
|
//Margins
|
|
anchors.topMargin: 10
|
|
//anchors.rightMargin: 10 // This margin won't work because we have no right anchor
|
|
//anchors.leftMargin: 10
|
|
*/
|
|
|
|
//Anchor relative to center anchor lines
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
//Offsets
|
|
anchors.horizontalCenterOffset: -10
|
|
anchors.verticalCenterOffset: 10
|
|
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "5"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
Rectangle {
|
|
id: centerRightRectId
|
|
width: 100
|
|
height: width
|
|
color: "blue"
|
|
anchors.left: centerCenterRectId.right
|
|
anchors.top: topRightRectId.bottom
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "6"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
|
|
|
|
//The bottom row will be positioned in terms of centerCenterRectId
|
|
Rectangle {
|
|
id: bottomLeftRectId
|
|
width: 100
|
|
height: width
|
|
color: "royalblue"
|
|
anchors.right: centerCenterRectId.left
|
|
anchors.top: centerCenterRectId.bottom
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "7"
|
|
font.pointSize: 20
|
|
}
|
|
|
|
}
|
|
Rectangle {
|
|
id: bottomCenterRectId
|
|
width: 100
|
|
height: width
|
|
color: "yellow"
|
|
anchors.left: centerCenterRectId.left
|
|
anchors.top: centerCenterRectId.bottom
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "8"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: bottomRightRectId
|
|
width: 100
|
|
height: width
|
|
color: "pink"
|
|
anchors.left: centerCenterRectId.right
|
|
anchors.top: centerCenterRectId.bottom
|
|
Text{
|
|
anchors.centerIn: parent
|
|
text: "9"
|
|
font.pointSize: 20
|
|
}
|
|
}
|
|
}
|
|
}
|