QtQuick基础教程(三)---界面元素布局
来源:互联网 发布:知乎回答怎么复制 编辑:程序博客网 时间:2024/05/19 21:00
本文详细介绍在QtQuick 基础教程(一)提到的界面元素布局设计。
QML中4种元素布局方式:绝对坐标(包括关联坐标)、锚(Anchors)、定位器(Poisitioners)、布局(Layout)。
这几个不能混用,否则会出现不可意料的错误。
绝对坐标
绝对坐标
这种方式直接给出元素的(x,y)坐标,简单明了。缺点是屏幕调整时(比如换个手机),很可能出现位置问题。示例代码及结果如下:
Rectangle { width: 200 height: 200 color: "red" Rectangle { x: 100 y: 100 width: 100 height: 100 color: "blue" Rectangle { width: 50 height: 50 color: "green" } }}
这个例子中,红包矩形是根元素,默认坐标是黑点(0,0),蓝色矩形是红色矩形子元素,其坐标(白点)相对于父元素平移(100,100),而绿色矩形是蓝色矩形的子元素,其默认坐标(白点)是其父元素的坐标(100,100)。
坐标绑定
与绝对坐标相似,不过引用了父元素。代码如下所示,结果与上一代码相同。
Rectangle { width: 200 height: 200 color: "red" Rectangle { x: parent.x + 100 // parent.x=0 y: parent.y + 100 // parent.y=0 width: 100 height: 100 color: "blue" Rectangle { width: 50 height: 50 color: "green" } }}
锚(Anchors)
锚定位
锚是QtQuick中为方便布局提供了一种方式,提供了6种关系模式:左(left), 右(right), 垂直中心(vertical center), 顶(top), 底(bottom) and 水平中心(horizontal center)。具体如下图。
注:锚只作用于直接父元素,不要用于其他元素。
再上几个代码和示例。
例1:
Rectangle { id: rect1; color: "blue"}Rectangle { id: rect2; anchors.left: rect1.right; color: "red"}
例2:
Rectangle { id: rect1; color: "blue"}Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; color: "red"}
例3:
Rectangle { id: rect1; x: 0; color: "blue"}Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; color: "red"}Rectangle { id: rect3; x: 150; color: "blue"}
空隙和偏移
锚的空隙通过 anchors.margins 设定,共有4种:leftMargin, rightMargin, topMargin 和 bottomMargin。平移共有3种:horizontalCenterOffset, verticalCenterOffset 和 baselineOffset.。如图所示。
再来个示例代码:
Rectangle { id: rect1; color: "blue"}Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; color: "red"}
注:锚的margins**只在**设定锚关系后才生效。上段代码如果只是设定margins,但没有anchors.left: rect1.right
这句,那么margin是不生效的。
定位器(Positioners)
定位器有4种:Column、Row、Grid、Flow。定位器不改变其管理元素位置外的其他属性。下面给出其示例代码及效果。
定位器的处理定位的方式有些奇葩:前一个加到定位器中的元素是下一个元素的parent
!!!
所以,在设定当前元素大小时,要用id属性访问其父元素来操作。千万不要直接用parent
,这个bug调了我好久。。。
Column
import QtQuick 2.0Item { width: 310; height: 170 Column { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter spacing: 5 Rectangle { color: "lightblue"; radius: 10.0; width: 300; height: 50 Text { anchors.centerIn: parent font.pointSize: 24; text: "Books" } } Rectangle { color: "gold"; radius: 10.0 ;width: 300; height: 50 Text { anchors.centerIn: parent font.pointSize: 24; text: "Music" } } Rectangle { color: "lightgreen"; radius: 10.0; width: 300; height: 50 Text { anchors.centerIn: parent font.pointSize: 24; text: "Movies" } } }}
Row
import QtQuick 2.0Rectangle { width: 320; height: 110 color: "#c0c0c0" Row { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter spacing: 5 Rectangle { width: 100; height: 100; radius: 20.0; color: "#024c1c" } Rectangle { width: 100; height: 100; radius: 20.0; color: "#42a51c" } Rectangle { width: 100; height: 100; radius: 20.0; color: "white" } }}
Grid
import QtQuick 2.0Rectangle { width: 112; height: 112 color: "#303030" Grid { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter columns: 2; spacing: 6 Rectangle { color: "#aa6666"; width: 50; height: 50 } Rectangle { color: "#aaaa66"; width: 50; height: 50 } Rectangle { color: "#9999aa"; width: 50; height: 50 } Rectangle { color: "#6666aa"; width: 50; height: 50 } }}
Flow
Flow类似于Grid,但不同在于它使用二级顺序,先排序第一级再排第二级。以下面代码为例,先排X向,再向Y向延伸。
import QtQuick 2.0Rectangle { color: "lightblue" width: 300; height: 200 Flow { anchors.fill: parent anchors.margins: 4 spacing: 10 Text { text: "Text"; font.pixelSize: 40 } Text { text: "items"; font.pixelSize: 40 } Text { text: "flowing"; font.pixelSize: 40 } Text { text: "inside"; font.pixelSize: 40 } Text { text: "a"; font.pixelSize: 40 } Text { text: "Flow"; font.pixelSize: 40 } Text { text: "item"; font.pixelSize: 40 } }}
布局
布局是Qt开发者最熟悉的了,这是Qt的一大特色,与QtWidgets中的Layouts功能相同。它比定位器功能要强,主要有以下几个功能:
- 设置对齐方式
- 调整自身大小及调整子对象大小(Layout不是子对象的父对象)
- 设置限制(比如最大宽度)
- 设置间距
效果与定位器相同,不再演示。
布局功能在qml中不大好用,google很久都没找到stretch属性怎么设置。
参考
coordinate system
positioning with anchors
item positioners types
QtQuick Layout
- QtQuick基础教程(三)---界面元素布局
- QtQuick 基础教程(一)
- QtQuick基础教程(二)---QML基本语法
- QtQuick基础教程(五)---QML语法
- QtQuick基础教程(四)---场景渲染(Scene Graph)
- QtQuick学习笔记(三)组件
- 界面布局(三)
- QtQuick手机滑动界面Demo
- qtquick创建UI界面文件
- XSL基础教程(三)
- VB基础教程(三)
- HTML 基础教程(三)
- xsl基础教程(三)
- javascript:基础教程(三)
- AndroidStudio基础教程(三)
- ajax编程界面布局及界面元素命名体会
- Python基础教程学习(三)
- 《SQL基础教程》笔记(三)
- Fiddler中显示IP的设置方法
- css 画矩形
- glob 文件路径查找
- Spark HA 集群搭建【1、基于文件系统的手动HA 2、基于zk的自动HA】
- shareSDK微博分享总是在发布界面跟登录授权界面跳转
- QtQuick基础教程(三)---界面元素布局
- WebService流行框架之Axis和CXF
- TortoiseSVN 检出、更新断线卡死的原因
- 成员函数指针
- 解决Fiddler查看Post参数中文乱码的问题
- 将多个txt文件合并成一个
- PHP面试题
- Android 打包Activity 供第三方调用
- iOS证书报错——Failed to locate or generate matching signing assets