一、什么是布局
在 Qt Quick
中有两套与元素布局相关的类库,一套叫作 Item Positioner
(定位器),一套叫作 Item Layout
(布局)。其实在 Qt Quick
中还有一个 锚布局,它通过 Item
的 anchors
属性实现,是 Qt Quick
中非常灵活的一种布局方式。
我们可以在终端中使用 pip
安装 PySide6 模块。默认是从国外的主站上下载,因此,我们可能会遇到网络不好的情况导致下载失败。我们可以在 pip
指令后通过 -i
指定国内镜像源下载。
pip install pygame -i https://mirrors.aliyun.com/pypi/simple
国内常用的 pip
下载源列表:
- 阿里云 https://mirrors.aliyun.com/pypi/simple
- 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple
- 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple
- 中国科学技术大学 http://pypi.mirrors.ustc.edu.cn/simple
二、锚布局
在 QML 中,锚点(anchors)是一种用于定义元素之间相对位置和大小关系的机制。锚点允许你指定一个元素相对于其父元素或其他元素的位置和尺寸。通过使用锚点,你可以创建响应式布局,使 QML 界面能够根据不同屏幕尺寸和分辨率进行自适应调整。
QML 中的每个元素都有一个隐式的锚点系统,你可以通过 anchors
属性来访问它。anchors
属性提供了多个属性来设置锚点的位置。
每个 Item
都有 7 条不可见的锚线:上(top)、下(bottom)、左(left)、右(right)、水平中心(horizontalCenter)、垂直中心(verticalCenter)和 基线(baseline)。
anchors.top // 将元素的顶部边缘锚定到某个参考点的顶部边缘
anchors.bottom // 将元素的底部边缘锚定到某个参考点的底部边缘
anchors.left // 将元素的左边缘锚定到某个参考点的左边缘
anchors.right // 将元素的右边缘锚定到某个参考点的右边缘anchors.horizontalCenter // 将元素的水平中心锚定到某个参考点的水平中心
anchors.verticalCenter // 将元素的垂直中心锚定到某个参考点的垂直中心anchors.fill // 使元素填充其父元素或参考元素的整个区域
baseline
是指文本所在的线,如果Item
没有文字,则baseline
就和top
的位置相同。
我们还可以使用 margins
属性设置四个边的边距。
anchors.margins // 设置元素与其锚点之间的外边距
anchors.leftMargin // 设置元素与其锚点之间的左边距
anchors.rightMargin // 设置元素与其锚点之间的右边距
anchors.topMargin // 设置元素与其锚点之间的顶边距
anchors.bottomMargin // 设置元素与其锚点之间的底边距
我们新建一个 template.py 文件。
import sysfrom PySide6.QtWidgets import QApplication
from PySide6.QtQml import QQmlApplicationEngineif __name__ == "__main__":app = QApplication(sys.argv) # 1.创建一个QApplication类的实例engine = QQmlApplicationEngine() # 2.创建QML引擎对象engine.load("template.qml") # 3.加载QML文件sys.exit(app.exec()) # 4.进入程序的主循环并通过exit()函数确保主循环安全结束
我们新建一个 template.qml 文件。
import QtQuick.Window// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个文本(Text)元素Text {id: titleTextId // 定义一个标识text: "Custom Layout Example" // 设置文本元素的内容font.pointSize: 24 // 设置文本的字体大小color: "#FFCCCC" // 设置字体颜色// 使用锚点(anchors)系统来定位文本元素anchors.top: parent.top // 将顶部的锚点定位到父元素的顶部anchors.topMargin: 20 // 设置顶部边距为20像素anchors.horizontalCenter: parent.horizontalCenter // 水平居中}// 定义一个文本(Text)元素Text {text: "This is an exmaple of using anchors for layout." // 设置文本元素的内容font.pointSize: 18 // 设置文本的字体大小color: "#FF99CC" // 设置字体颜色// 使用锚点(anchors)系统来定位文本元素anchors.top: titleTextId.bottom // 将顶部的锚点定位到指定控件父的底部anchors.topMargin: 20 // 设置顶部边距为20像素anchors.horizontalCenter: parent.horizontalCenter // 水平居中}// 定义一个Item元素Item {width: 300 // 宽度height: 300 // 高度// 使用锚点(anchors)系统来定位文本元素,这里中心的锚点定位到其父元素的中心anchors.centerIn: parentRectangle {color: "#FF6666" // 设置矩形颜色anchors.fill: parent // 填充父容器对象Text {text: "Hello Sakura!"font.pointSize: 18color: "#FFFFFF"anchors.top: parent.top // 将顶部的锚点定位到指定控件父的顶部anchors.topMargin: 10 // 设置顶部边距为10像素anchors.horizontalCenter: parent.horizontalCenter // 水平居中}}}// 定义一个矩形元素Rectangle {width: 100 // 宽度height: 50 // 高度color: "#99CCFF" // 设置矩形颜色// 使用锚点(anchors)系统来定位文本元素anchors.left: parent.left // 将左侧的锚点定位到父元素的左侧anchors.leftMargin: 20 // 设置左侧边距为20像素anchors.bottom: parent.bottom // 将底部的锚点定位到父元素的底部anchors.bottomMargin: 20 // 设置底部边距为20像素}// 定义一个矩形元素Rectangle {width: 100 // 宽度height: 50 // 高度color: "#CCCCFF" // 设置矩形颜色anchors.right: parent.right // 将右侧的锚点定位到父元素的右侧anchors.rightMargin: 20 // 设置右侧边距为20像素anchors.bottom: parent.bottom // 将底部的锚点定位到父元素的底部anchors.bottomMargin: 20 // 设置底部边距为20像素}
}
当你使用锚点时,请确保你指定的参考点(如父元素或其他元素)是有效的,并且它们在布局中是可见的。
锚点系统是基于父元素或参考元素的坐标系统来工作的,因此如果父元素或参考元素的大小或位置发生变化,依赖于它们的子元素也会相应地发生变化。
在使用锚点时,要注意避免循环依赖或相互冲突的锚点设置,这可能会导致布局问题或不可预测的行为。
三、定位器
定位器 是一种 容器元素,专门用来管理界面中的其它元素。如果定位器中的子项目不可见(visible
为 false
)、宽度或者高度为0,那么该子项目不会显示,也不会被布局。定位器可以自动布局其子项目,也就是说,其子项目不再需要显式设置 x
、y
等属性或使用锚 anchors
进行布局。
定位器 不会改变它管理的元素的大小,即便用户调整了界面尺寸,它也坚持不干涉孩子们的尺寸,这可能与你的期望不同,不过如果你希望使用“自动根据界面尺寸变化调整孩子们的尺寸”这种特性,可以使用 Qt Quick
中的 布局管理器。
定位器 包括 Row
(行定位器)、Column
(列定位器)、Grid
(栅格定位器)、Flow
(流式定位器)。
3.1、行定位器
Row
沿着一行安置它的孩子们。一旦你把一个 Item
交给 Row
来管理,那就不要再使用 Item
的x
、y
、anchors
等属性了。在一个 Row
内的 Item
,可以使用 Positioner
附加属性来获知自己在 Row
中的详细位置信息。Positioner
有 index
、isFirstItem
、isLastItem
三个属性。
Row
有一个 spacing
属性,用来指定它管理的 Item
之间的 间隔。还有一个 layoutDirection
属性,可以指定 布局方向,取值为 Qt.LeftToRight
时 从左到右 放置 Item
,这是默认行为,取值为 Qt.RightToLeft
时 从右向左 放置 Item
。
Row
还有 add
、move
、populate
三个 Transition
类型的属性,分别指定应用于 Item
添加、Item
移动、定位器初始化创建Items
三种场景的过渡动画。
修改 template.qml 文件的内容。
import QtQuick.Window// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个Row,用于水平布局Row {anchors.centerIn: parent // 将中心的锚点定位到父元素的中心spacing: 100 // 用于设置子元素之间的间隔layoutDirection: Qt.RightToLeft // 设置布局的显示方向为从右到左Rectangle {width : 100 // 宽度height: 100 // 高度color: "#CCCCFF" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 50 // 高度color: "#99CCFF" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#FF6666" // 设置矩形颜色}}
}
Row
本身也是一个Item
,可以使用anchors
布局来决定它在父Item
中的位置。如果
Row
中的Item
不是visible
,或者其宽度或高度为 0,则该项目将不会布局,在行中也不可见。
3.2、列定位器
Column
与 Row
类似,不过是在垂直方向上安排它的子Item
。Column
的 spacing
属性描述子 Item
之间的间隔。
修改 template.qml 文件的内容。
import QtQuick.Window// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个Column,用于垂直布局Column {anchors.centerIn: parent // 将中心的锚点定位到父元素的中心spacing: 100 // 用于设置子元素之间的间隔Rectangle {width : 100 // 宽度height: 100 // 高度color: "#CCCCFF" // 设置矩形颜色}Rectangle {width : 50 // 宽度height: 50 // 高度color: "#99CCFF" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#FF6666" // 设置矩形颜色}}
}
3.3、栅格定位器
Grid
在一个网格上安置它的子 Item
,它会创建一个拥有很多单元格的网格,足够容纳它的所有子 Item
。Grid
会从左到右、从上到下把它的子 Item
一个个塞到单元格里。Item
默认会被放在一个单元格左上角,即 (0, 0)
位置。
我们可以通过 Grid
的 rows
和 columns
属性 指定表格的行、列数。如果不设置,默认只有 4 列,而行数则会根据实际的 Item
数量自动计算。rowSpacing
和 columnSpacing
属性用来 指定行、列间距,单位是像素。
Grid
的 flow
属性 描述表格的流模式,Grid.LeftToRight
是默认值,这种流模式 从左到右 一个挨一个放置 Item
,一行放满再放下一行。flow
取值为 Grid.TopToBottom
时,从上到下 一个挨一个放置 Item
,一列放满再放下一列。
Grid
的 horizontalItemAlignment
和 verticalItemAlignment
属性用来 指定单元格对齐方式。默认的单元格对齐方式和 layoutDirection
以及 flow
有关。
horizontalItemAlignment
的有效值是Grid.AlignLeft
、Grid.AlignRight
和Grid.AlignHCenter
。verticalItemAlignment
的有效值是Grid.AlignTop
、Grid.AlignBottom
和Grid.AlignVCenter
。
修改 template.qml 文件的内容。
import QtQuick.Window// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个GridLayout,用于网格布局Grid {anchors.centerIn: parent // 将中心的锚点定位到父元素的中心rows: 3 // 设置行数columns: 3 // 设置列数rowSpacing: 10 // 设置行间距columnSpacing: 10 // 设置列间距horizontalItemAlignment: Grid.AlignHCenter // 设置水平对齐方式verticalItemAlignment: Grid.AlignVCenter // 设置垂直对齐方式Rectangle {width : 100 // 宽度height: 100 // 高度color: "#FF6666" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#FF6666" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#FF6666" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#99CCFF" // 设置矩形颜色}Rectangle {width : 50 // 宽度height: 50 // 高度color: "#99CCFF" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#99CCFF" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#CCCCFF" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#CCCCFF" // 设置矩形颜色}Rectangle {width : 100 // 宽度height: 100 // 高度color: "#CCCCFF" // 设置矩形颜色}}
}
3.4、流式定位器
在 QML 中,Flow
是一种非常灵活的布局方式,它允许元素根据容器的尺寸和元素的尺寸自动进行排列,类似于文本排版中的 “流” 概念,元素会按照指定的方向(通常是水平或垂直)依次排列,当一行或一列无法容纳更多元素时,会自动换行或换列。
Flow
的 flow
属性,默认取值 Flow.LeftToRight
,从左到右 安排 Item
,直到 Flow 本身的宽度不能容纳新的子 Item 时折行。当 flow
取值 Flow.TopToBottom
时,从上到下 安排 Item
,直到 Flow 本身的高度不能容纳新的子 Item
时开始在下一列上安排 Item
。在 QML 中,我们还可以通过 spacing
属性来 设置元素之间的间距。
修改 template.qml 文件的内容。
import QtQuick.Window// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个Flow,用于流式布局Flow {width: parent.width // 宽度height: parent.height // 高度 anchors.centerIn: parent // 将中心的锚点定位到父元素的spacing: 100 // 用于设置子元素之间的间隔// Repeater是一个用于根据模型(通常是列表或数组)动态生成一组子元素的有用工具Repeater{// 定义了数据源,通常是一个列表或数组。model: 18 // 设置重读的次数// 定义了如何显示模型中的每个项目,它是一个包含要实例化的 QML 元素的组件。delegate: Rectangle{width: 100height: 100color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)}}}
}
四、布局管理器
Qt Quick 中的 布局管理器 是一组用于在用户界面中排列项目的类型。布局管理器 不仅进行布局,而且会改变子 Item
的大小,所以更适用于需要改变用户界面大小的应用。因为布局管理器也是继承自 Item
,所以它们可以嵌套。布局管理器 包括 行布局(RowLayout)、列布局(ColumnLayout)、表格布局(GridLayout)。
4.1、水平布局管理器
在 QML 中,水平布局通常是通过 RowLayout
来实现的。RowLayout
是一种布局管理器,它允许你将子元素水平地排列在一行中。RowLayout
有一个 spacing
属性,用来 指定它管理的 Item
之间的间隔。还有一个 layoutDirection
属性,可以 指定布局方向,取值为 Qt.LeftToRight
时 从左到右放置 Item
,这是默认行为,取值为 Qt.RightToLeft
时 从右向左放置 Item
。
修改 template.qml 文件的内容。
import QtQuick.Window
import QtQuick.Layouts// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个RowLayout,用于水平布局RowLayout {anchors.centerIn: parent // 将中心的锚点定位到父元素的中心spacing: 100 // 用于设置子元素之间的间隔layoutDirection: Qt.RightToLeft // 设置布局的显示方向为从右到左Rectangle {implicitWidth : 100 // 设置矩形的隐式宽度implicitHeight: 100 // 设置矩形的隐式高度color: "#CCCCFF" // 设置矩形颜色}Rectangle {Layout.preferredWidth : 150 // 设置矩形的首选宽度Layout.preferredHeight : 50 // 设置矩形的首选高度color: "#99CCFF" // 设置矩形颜色}Rectangle {implicitWidth : 100 // 设置矩形的隐式宽度Layout.preferredHeight: 100 // 设置矩形的首选高度color: "#FF6666" // 设置矩形颜色}}
}
在布局中如何要设置 Item 的宽度和高度,推荐使用
implicitWidth
属性 和implicitHeight
属性设置,或者使用Layout.preferredWidth
和Layout.preferredHeight
设置。
4.2、垂直布局管理器
在 QML 中,垂直布局通常是通过 ColumnLayout
来实现的。这些布局管理器允许你将子元素垂直地排列在一起。ColumnLayout
本身也是一个 Item
,可以使用 anchors
布局来决定它在父 Item
中的位置。ColumnLayout
的 spacing
属性描述 子 Item
之间的间隔。
修改 template.qml 文件的内容。
import QtQuick.Window
import QtQuick.Layouts// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个ColumnLayout,用于垂直布局ColumnLayout {height: parent.height // 高度anchors.centerIn: parent // 将中心的锚点定位到父元素的中心Rectangle {implicitWidth : 100 // 设置矩形的隐式宽度implicitHeight: 100 // 设置矩形的隐式高度color: "#FF6666" // 设置矩形颜色}Rectangle {Layout.preferredWidth : 50 // 设置矩形的首选宽度Layout.preferredHeight : 50 // 设置矩形的首选高度color: "#99CCFF" // 设置矩形颜色}Rectangle {implicitWidth : 100 // 设置矩形的隐式宽度Layout.preferredHeight: 100 // 设置矩形的首选高度color: "#CCCCFF" // 设置矩形颜色}}
}
4.3、栅格布局管理器
在 QML 中,栅格布局是通过 GridLayout
来实现的。GridLayout
允许你将子元素放置在一个二维的网格中,并且可以指定网格的行数和列数,并控制每个元素在网格中的位置、大小和跨越多个单元格的能力。
你可以通过 GridLayout
的 rows
和 columns
属性 设定表格的行、列数,rowSpacing
和 columnSpacing
属性 指定行、列间距,单位是像素。
在每个 Item
项中,我们可以通过 Layout.row
和 Layout.column
属性 指定该项在栅格布局中的位置。我们还可以通过 Layout.rowSpan
和 Layout.columnSpan
属性 指定合并的行和列。
修改 template.qml 文件的内容。
import QtQuick.Window
import QtQuick.Layouts// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个GridLayout,用于网格布局GridLayout {width: parent.width // 宽度height: parent.height // 高度 anchors.centerIn: parent // 将中心的锚点定位到父元素的中心rows: 3 // 设置行数columns: 3 // 设置列数rowSpacing: 10 // 设置行间距columnSpacing: 10 // 设置列间距Rectangle {color: "#FF6666" // 设置矩形颜色implicitWidth: 200 // 设置矩形的隐式宽度implicitHeight: 200 // 设置矩形的隐式高度Layout.row: 0 // 设置矩形所在的行Layout.column: 0 // 设置矩形所在的列}Rectangle {color: "#FF6666" // 设置矩形颜色Layout.preferredWidth: 200 // 设置矩形的首选宽度Layout.preferredHeight: 200 // 设置矩形的首选高度Layout.row: 0 // 设置矩形所在的行Layout.column: 1 // 设置矩形所在的列}Rectangle {color: "#FF6666" // 设置矩形颜色implicitWidth: 200 // 设置矩形的隐式宽度Layout.preferredHeight: 200 // 设置矩形的首选高度Layout.row: 0 // 设置矩形所在的行Layout.column: 2 // 设置矩形所在的列}Rectangle {color: "#99CCFF" // 设置矩形颜色Layout.row: 1 // 设置矩形所在的行Layout.column: 0 // 设置矩形所在的列Layout.rowSpan: 2 // 占用二行Layout.columnSpan: 1 // 占用一列Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#99CCFF" // 设置矩形颜色Layout.row: 1 // 设置矩形所在的行Layout.column: 1 // 设置矩形所在的列Layout.rowSpan: 1 // 占用一行Layout.columnSpan: 2 // 占用两列Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#CCCCFF" // 设置矩形颜色Layout.row: 2 // 设置矩形所在的行Layout.column: 1 // 设置矩形所在的列Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#CCCCFF" // 设置矩形颜色Layout.row: 2 // 设置矩形所在的行Layout.column: 2 // 设置矩形所在的列Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}}
}
在栅格布局中,如果我们添加的子元素不指定行列信息,子元素会呈现水平布局或垂直布局。GridLayout
的 flow
属性描述 栅格布局的流模式,Grid.LeftToRight
是默认值,这种流模式从左到右一个挨一个放置 Item
,一行放满再放下一行。flow
取值为Grid.TopToBottom
时,从上到下一个挨一个放置 Item
,一列放满再放下一列。
修改 template.qml 文件的内容。
import QtQuick.Window
import QtQuick.Layouts// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个GridLayout,用于网格布局GridLayout {width: parent.width // 宽度height: parent.height // 高度 anchors.centerIn: parent // 将中心的锚点定位到父元素的中心rows: 3 // 设置行数columns: 3 // 设置列数rowSpacing: 10 // 设置行间距columnSpacing: 10 // 设置列间距flow: Grid.TopToBottom // 设置布局方式Rectangle {color: "#FF6666" // 设置矩形颜色Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#FF6666" // 设置矩形颜色Layout.rowSpan: 2 // 占用二行Layout.columnSpan: 1 // 占用一列Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#99CCFF" // 设置矩形颜色Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#99CCFF" // 设置矩形颜色Layout.rowSpan: 1 // 占用一行Layout.columnSpan: 2 // 占用二列Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#99CCFF" // 设置矩形颜色Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#CCCCFF" // 设置矩形颜色Layout.rowSpan: 2 // 占用二行Layout.columnSpan: 1 // 占用一列Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}Rectangle {color: "#CCCCFF" // 设置矩形颜色Layout.fillWidth: true // 设置矩形填充Column布局的宽度Layout.fillHeight: true // 设置矩形填充Column布局的高度}}
}
4.4、栈布局管理器
栈布局管理器 StackLayout
可以管理多个项目,但只能显示一个项目。可以通过 currentIndex
属性来 设置当前显示的项目,索引号对应布局管理器中子项目的顺序,从 0 开始。另外,StackLayout
还包含 index
和 isCurrentItem
等附加属性。
修改 template.qml 文件的内容。
import QtQuick.Window
import QtQuick.Layouts// Window控件表示一个顶级窗口
// 在QML中,元素是通过大括号{}内的属性来配置的。
Window {width: 800 // 窗口的宽度height: 600 // 窗口的高度visible: true // 显示窗口color: "lightgray" // 窗口的背景颜色// 定义一个StackLayout,用于栈布局StackLayout {id: stackLayoutId // IDwidth: parent.width // 宽度height: parent.height // 高度 anchors.centerIn: parent // 将中心的锚点定位到父元素的中心Rectangle {color: "#FF6666" // 设置矩形颜色Layout.fillWidth: true // 填充宽度Layout.fillHeight: true // 填充高度}Rectangle {color: "#66ffb0ff" // 设置矩形颜色Layout.fillWidth: true // 填充宽度Layout.fillHeight: true // 填充高度}Rectangle {color: "#6673ffff" // 设置矩形颜色Layout.fillWidth: true // 填充宽度Layout.fillHeight: true // 填充高度}}// 鼠标事件MouseArea {anchors.fill: parent // 填充父元素// 点击事件onClicked: {stackLayoutId.currentIndex = (stackLayoutId.currentIndex + 1) % stackLayoutId.count}}
}