Qt Quick中控件的定位

参考文档：​​https://doc.qt.io/qt-6/qtquick-positioning-topic.html​​

几种定位方式绝对定位(通过设置x,y的值)相对定位(在Qt Quick中也叫锚定位)定位器布局绝对定位

请看代码

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
       width: 200
       height: 200
       x: 20
       y: 30
       color: "green"
       Rectangle {
           x: 20
           y: 5
           width: 150
           height: 100
           color: "gray"
       }
    }
}

运行效果

使用x，y定位时，它是相对于父元素的。

也可以通过属性绑定的功能，实现动态布局：

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Rectangle {
        id: rect1
        width: 50
        height: 60
        x: 20
        y: 30
        color: "green"
    }
    Rectangle {
        x: rect1.x + rect1.width + 5
        y: rect1.y + rect1.height + 1
        width: 20
        height: 20
        color: "gray"
    }

    Flow {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        function move(x, y){
            rect1.x += x * 5
            rect1.y += y * 5
        }
        Button{
            text: "+x"
            onClicked: parent.move(1, 0)
        }

        Button{
            text: "-x"
            onClicked: parent.move(-1, 0)
        }
        Button{
            text: "+y"
            onClicked: parent.move(0, 1)
        }

        Button{
            text: "-y"
            onClicked: parent.move(0, -1)
        }
    }
}

在按钮的点击事件中，我们只改变了​​rect1​​的位置，灰色小矩形的位置也会跟关变化。

相对定位（锚定位）

关于锚定位的描述：​​https://doc.qt.io/qt-6/qtquick-positioning-anchors.html​​

根据文档描述可以得到以下信息：

每个控件都7条锚定线如下图示(还有一条叫​​baseline​​跟字体相关的)

设置格式

# anchors.<anchor line>: itemId.<anchor line>;
# 例如：
Rectangle { id: rect1; ... }
Rectangle { id: rect2; anchors.left: rect1.right; ... }

留白与偏移量
horizontalCenterOff setverticalCenterOffset baselineOffset

第条锚定线都有对应的偏移量

# anchors.<anchor line>Margin/Offset
Rectangle { id: rect1; ... }
Rectangle { id: rect2;
           anchors.left: rect1.right; 
           anchors.leftMargin: 5; ... }

只能与兄弟元素和直接父对容器进行锚定

# bad code
Item {
    id: group1
    Rectangle { id: rect1; ... }
}
Item {
    id: group2
    Rectangle { id: rect2; anchors.left: rect1.right; ... }    // invalid anchor!
}

定位器

参考文档：​​​​https://doc.qt.io/qt-6/qtquick-positioning-layouts.html​​​

定位器，只定位，不修改子元素的大小。

Column

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Positioner")
   Column {
       Repeater {
           model: 10
           Rectangle{
               height: txt.height
               width: txt.width
               color: index % 2 == 0? "skyblue":"gray"
                Text {
                   id: txt
                   text: qsTr("text" + index)
                   font.pointSize: 24
                   color: index % 2 == 0? "red":"green"
               }
           }
       }
   }
}

row

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Positioner")
   Row {
       Repeater {
           model: 10
           Rectangle{
               height: txt.height
               width: txt.width
               color: index % 2 == 0? "skyblue":"gray"
                Text {
                   id: txt
                   text: qsTr("text" + index)
                   font.pointSize: 24
                   color: index % 2 == 0? "red":"green"
               }
           }
       }
   }
}

超出了范围也不会折行

Flow

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Positioner")
   Flow {
       width: Window.width
       Repeater {
           model: 10
           Rectangle{
               height: txt.height
               width: txt.width
               color: index % 2 == 0? "skyblue":"gray"
                Text {
                   id: txt
                   text: qsTr("text" + index)
                   font.pointSize: 24
                   color: index % 2 == 0? "red":"green"
               }
           }
       }
   }
}

必须要给Flow设置一个宽度，才有换行的功能

Grid

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Positioner")
   Grid {
       width: Window.width
       columns: 3
       Repeater {
           model: 10
           Rectangle{
               height: txt.height
               width: txt.width
               color: index % 2 == 0? "skyblue":"gray"
                Text {
                   id: txt
                   text: qsTr("text" + index)
                   font.pointSize: 24
                   color: index % 2 == 0? "red":"green"
               }
           }
       }
   }
}

可以指定行列，一般来说只要指定列即可

LayoutMirroring

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Positioner")
    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true
   Grid {
       width: Window.width
       columns: 3
       Repeater {
           model: 10
           Rectangle{
               height: txt.height
               width: txt.width
               color: index % 2 == 0? "skyblue":"gray"
                Text {
                   id: txt
                   text: qsTr("text" + index)
                   font.pointSize: 24
                   color: index % 2 == 0? "red":"green"
               }
           }
       }
   }
}

Positioner

这是一个附加属性，包含的定位器的详细信息

Grid {
    Repeater {
        model: 16

        Rectangle {
            id: rect
            width: 30; height: 30
            border.width: 1
            color: Positioner.isFirstItem ? "yellow" : "lightsteelblue"

            Text { text: rect.Positioner.index }
        }
    }
}

参考文档：​​https://doc.qt.io/qt-6/qml-qtquick-positioner.html​​