GrayCatYa

记录生活,记录世界


Qt Quick布局管理器

 Qt Quick
时间:

Qt Quick布局管理器是一组用于在用户界面中排列项目的类型。与前面讲到的定位器不同，布局管理器不仅进行布局，而且会改变项目大小，所以更适合用于需要改变用户界面大小的应用。因为布局管理器也是继承自Item，所以它们可以嵌套。Qt Quick布局管理器与传统Qt Widgets应用中的布局管理器很相似。

Qt Quick Layouts 模块在Qt5.1中引入，所以代码中需要导入Qt Quick 2.1或以上版本。
还需要导入QtQuick.Layouts 1.1
Qt QUick布局管理器主要包含RowLayout,ColumnLayout和GridLayout.

主要特色

  • 项目的对其方式可以使用Layout,alignment属性指定，主要有
Qt::AlignLeft
Qt::AlignHCenter
Qt::AlignRight
Qt::AlignTop
Qt::AlignVCenter
Qt::AlignBottom
Qt::AlignBaseline
  • 可变大小的项目可以使用Layout,fillWidth和Layout,fillHeight属性指定，当将其值设置为true时会根据约束条件变宽或变高。
  • 大小约束可以通过Layout,minimumWidth,Layout,preferredWidth 和Layout.maximumWidth属性(另外还有相对height的类似属性)指定。
  • 间距可以通过spacing,rowSpacing和columnSpacing属性指定。除了上面所述的这些特色，在GridLayout中还添加了如下特色：
    • 网格中的坐标可以通过Layout.row和Layout.column指定。
    • 自动网格坐标同时使用了 flow,rows,column属性。
    • 行或列的跨度可以通过Layout.rowSpan和Layout.columnSpan属性来指定。

大小约束

要想使一个项目可以通过布局管理器调整大小，需要指定其最小宽度(minimumWidth和minimumHeight),最佳宽度(preferredWidth和preferredHeight)和最大宽高(maximumWidth和maximumHeight),并将对应的Layout, fillWidth 或 Layout，fillHeight设置true。

例子: 会在一个布局管理器中横向排列两个矩形，当拉伸程序窗口时，左边绿色的矩形可以从50×150变化到300×150，右边的红色矩形可以从100×100变化到∞×100.

import QtQuick 2.0
import QtQuick.Layouts 1.1


Item {
    RowLayout {
        id: layout
        anchors.fill: parent
        spacing: 6
        Rectangle {
            color: 'green'
            Layout.fillWidth: true
            Layout.minimumWidth: 50
            Layout.preferredWidth: 100
            Layout.maximumWidth: 300
            Layout.minimumHeight: 150
            Text {
                anchors.centerIn: parent
                text: parent.width + 'x' + parent.height
            }
        }

        Rectangle {
            color: 'red'
            Layout.fillWidth: true
            Layout.minimumWidth: 100
            Layout.preferredWidth: 200
            Layout.preferredHeight: 100
            Text {
                anchors.centerIn: parent
                text: parent.width + 'x' + parent.height
            }
        }
    }
}

有效的最佳(preferred)属性的值，可能来自几个候选属性。要决定有效的最佳属性，会对这些候选属性以下面的顺序进行查询，使用第一个有效值。

  • Layout.preferredWidth或Layout.preferredHeight;
  • implicitWidth 或 implicitHeight;
  • width 或 height.
    一个项目可以仅指定Layout,preferredWidth而不指定Layout,PreferredHeight,此时，有效的最佳高度会从implicitHeight或最终的height中选取。

关联窗口和布局管理器

为了将布局管理器与窗口进行关联，可以为布局管理器添加锚 anchors.fill, 确保布局管理器能够跟随窗口一起改变大小。

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.1
Window {
    RowLayout {
    id: layout
    anchors.fill: parent
    Rectangle {
        color: 'green'
        Layout.fillWidth: true
        Layout.minimumWidth: 50
        Layout.preferredWidth: 100
        Layout.maximumWidth: 300
        Layout.minimumHeight: 150
        }
    }
}

布局管理器的大小约束可以用来确保窗口大小不会超过约束条件，还可以将布局管理器的约束设置到窗口项目的minimumWidth,minimumHeight,maxmumWidth和maximumHeight等属性。

例如：

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.1

Window {

    minimumWidth: layout.Layout.minimumWidth
    minimumHeight: layout.Layout.minimumHeight
    maximumWidth: 1000
    maximumHeight: layout.Layout.maximumHeight

    RowLayout {
        id: layout 

        anchors.fill: parent

        Rectangle {

            color: 'green'
            Layout.fillWidth: true
            Layout.minimumWidth: 50
            Layout.preferredWidth: 100
            Layout.maximumWidth: 600
            Layout.minimumHeight: 150

        }
    }

}

在实际编程中，通常希望窗口的初始化大小可以是布局管理器的隐含(implicit)大小，那么就可以这样来设置:

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.1

Window {
    width: layout.implicitWidth
    height: layout.implicitHeight
    minimumWidth: layout.Layout.minimumWidth
    minimumHeight: layout.Layout.minimumHeight
    maximumWidth: 1000
    maximumHeight: 1000

    RowLayout {
        id: layout 

        anchors.fill: parent

        Rectangle {

            color: 'green'
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumWidth: 100
            Layout.preferredWidth: 100
            Layout.maximumWidth: 600
            Layout.minimumHeight: 150
            Layout.maximumHeight: 600

        }
    }

}

LayoutMirroring

LayoutMirroring附加属性用来在水平方向镜像项目锚布局，定位器(Row 和 Grid等)和视图(GRidView 和水平 ListView等)。镜像只是视觉上的变化，例如左侧布局变成右侧布局。当在项目中将LayoutMirroring的enabled属性设置为true时启用镜像，默认镜像只影响该项目本身。如果将chlidrenInherit属性设置为true，那么该项目的所有子项目都会启用镜像。

例子：
Row被锚定在了其父项目的左侧，然而，因为启用了镜像，锚在水平方向进行了翻转，现在Row被锚定在了右侧。又因为Row中的子项目默认从左向右排列，它们现在会从右向左排列。

import QtQuick 2.2

Rectangle {
    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true
    width: 300; height: 50
    color: "yellow"
    border.width: 1
    Row {
        anchors { left: parent.left; margins: 5 }
        y: 5; spacing: 5
        Repeater {
            model: 5
            Rectangle {
                color: "red"
                opacity: (5 - index) / 5
                width: 40; height: 40
                Text {
                    text: index + 1
                    anchors.centerIn: parent
                }
            }
        }
    }
}

布局镜像在需要同时支持从左到右和从右到左布局的应用中很有用的。如果想了解更多关于从右到左用户界面的内容，可以在帮助中索引Right-to-left User Interfaces关键字。

0 评论