没有合适的资源?快使用搜索试试~ 我知道了~
Qt Quick编程之Qt Quick元素布局,适合Qt初学者
需积分: 5 0 下载量 97 浏览量
2024-05-13
09:35:51
上传
评论
收藏 576KB PDF 举报
温馨提示
试读
31页
Qt Quick编程之Qt Quick元素布局,在Qt Quick中有两套与元素布局相关的类库,一套叫作Item Positioner(定位器),一套叫作Item Layout(布局)。其实我们前面还讲了一个锚布局,它通过Item的anchors属性实现,是Qt Quick中非常灵活的一种布局方式。 定位器包括Row(行定位器)、Column(列定位器)、Grid(表格定位器)、Flow(流式定位器)。 布 局 管 理 器 包 括 行 布 局 (RowLayout)、 列 布 局 (ColumnLayout)、 表 格 布 局(GridLayout)。 这里主要介绍定位器和布局管理器。
资源推荐
资源详情
资源评论
Qt Quick 编程之 Qt Quick 元素布局
在 Qt Quick 中有两套与元素布局相关的类库,一套叫作 Item Positioner(定位器),
一套叫作 Item Layout(布局)。其实我们前面还讲了一个锚布局,它通过 Item 的
anchors 属性实现,是 Qt Quick 中非常灵活的一种布局方式。
定位器包括 Row(行定位器)、Column(列定位器)、Grid(表格定位器)、Flow
(流式定位器)。
布 局 管 理 器 包 括 行 布 局 (RowLayout)、 列 布 局 (ColumnLayout)、
表 格 布 局(GridLayout)。
我们先讲定位器,然后再讲布局管理器。
1 定位器
定位器是一种容器元素,专门用来管理界面中的其他元素,与传统的 Qt Widgets
中的布局管理器类似。使用定位器,你可以很方便地把众多的元素组织在一起,
形成非常规则的界面效果。不过有一点要注意的是,定位器不会改变它管理的元
素的大小,即便用户调整了界面尺寸,它也坚持不干涉孩子们的尺寸。这可能与
你的期望不同,也与你使用 Qt Widgets 中的布局管理器的经验不同,不过如果你
希望使用“自动根据界面尺寸变化调整孩子们的尺寸”这种特性,可以使用 Qt
Quick 中的布局管理器,它们的行为与你的经验和期望完全一致。
常用的定位器元素有下列几种:
● Row
● Column
● Grid
● Flow
咱们一一来看。
1.1 Row
Row 沿着一行安置它的孩子们,在你需要水平放置一系列的 Item 时,它比锚布
局更加方便。一旦你把一个 Item 交给 Row 来管理,那就不要再使用 Item 的 x、
y、anchors 等属性了,Row 会安排得妥妥的。在一个 Row 内的 Item,可以使用
Positioner 附加属性来获知自己在 Row 中的详细位置信息。
Positioner 有 index、isFirstItem、isLastItem 三个属性。
我们来看示例 row.qml:
import QtQuick 2.2
Rectangle {
width: 360;
height: 240;
color: "#EEEEEE";
id: rootItem;
Text {
id: centerText;
text: "A Single Text.";
anchors.centerIn: parent;
font.pixelSize: 24;
font.bold: true;
}
function setTextColor(clr){
centerText.color = clr;
}
Row {
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
spacing: 4;
ColorPicker {
color: Qt.rgba(Math.random(),
Math.random(), Math.random(), 1.0);
onColorPicked: setTextColor(clr);
}
ColorPicker {
color: Qt.rgba(Math.random(),
Math.random(), Math.random(), 1.0);
onColorPicked: setTextColor(clr);
}
ColorPicker {
color: Qt.rgba(Math.random(),
Math.random(), Math.random(), 1.0);
onColorPicked: setTextColor(clr);
}
ColorPicker {
color: Qt.rgba(Math.random(),
Math.random(), Math.random(), 1.0);
onColorPicked: setTextColor(clr);
}
}
}
执行“qmlscene row.qml”命令,效果如图 1 所示。
图 1 行定位器
因为 Row 本身是一个 Item,所以你可以使用锚布局来定位一个 Row,示例中这
么做了,使用 anchors.left 和 anchors.bottom 属性把 Row 定位在界面的左下角。
Row 有一个 spacing 属 性 ,用来指定它管 理 的 Item 之间 的 间 隔 。还有一个
layoutDirection 属性,可以指定布局方向,取值为 Qt.LeftToRight 时从左到右放置
Item,这是默认行为,取值为 Qt.RightToLeft 时从右向左放置 Item。
Row 还有 add、move、populate 三个 Transition 类型的属性,分别指定应用于 Item
添加、Item 移动、定位器初始化创建 Items 三种场景的过渡动画,等我们学习了
动画相关的内容之后再来实验这些属性。
1.2 Colomun
Column 与 Row 类似,不过是在垂直方向上安排它的子 Item。在你需要垂直放置
一系列的 Item 时,它比锚布局更加方便。
Column 本身也是一个 Item,可以使用 anchors 布局来决定它在父 Item 中的位置。
Column 的 spacing 属性描述子 Item 之间的间隔。
看示例 column.qml:
import QtQuick 2.2
Rectangle {
width: 360;
height: 240;
color: "#EEEEEE";
id: rootItem;
Text {
id: centerText;
text: "A Single Text.";
anchors.centerIn: parent;
font.pixelSize: 24;
font.bold: true;
}
function setTextColor(clr){
centerText.color = clr;
}
Column {
anchors.left: parent.left;
anchors.leftMargin: 4;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 4;
spacing: 4;
ColorPicker {
color: Qt.rgba(Math.random(),
Math.random(), Math.random(), 1.0);
onColorPicked: setTextColor(clr);
}
ColorPicker {
color: Qt.rgba(Math.random(),
Math.random(), Math.random(), 1.0);
onColorPicked: setTextColor(clr);
剩余30页未读,继续阅读
资源评论
icysmile131
- 粉丝: 2635
- 资源: 64
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功