您所在的位置： &
详解 QML UI布局管理
详解 QML UI布局管理
QML同样允许大家使用硬编码的方式将位置数值直接写到代码中，但是这样做首先难以适应UI的调整，其次代码维护起来也很困难。本文将会解决这个问题。
本文介绍的是QML UI布局管理，先来对UI进行介绍一下，使用Qt做过UI的一定对QHBoxLayout, QVBoxLayout, 和QGridLayout这三个最重要也最常使用的layout managers非常熟悉。那么在QML中又是如何控制和管理UI布局的呢？那么我们这篇文章就为大家介绍这些基础知识。
首先，QML同样允许大家使用硬编码的方式将位置数值直接写到代码中，但是这样做首先难以适应UI的调整，其次代码维护起来也很困难。因此我们不推荐这样做。推荐大家使用的是以下三种布局管理器：Row,、Column、Grid，以及使用Anchor进行布局。
QML 中的 Row 元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
Row&{&spacing:&2Rectangle&{ &&color:&&red&;&width:&50;&height:&50&}& &Rectangle&{&color:&&green&;&width:&20;&height:&50&}&Rectangle&{&color:&&blue&;&width:&50;&height:&20&}& &} &&&
QML 中的 Column元素会将其子控件都排列在同一行，相互不重叠。我们还可以使用它的spacing 属性来定义子控件之间的距离。比如下列代码就会产生如图所示的效果：
view&sourceprint?1&Column&{&&& &&&&&&&&&&spacing:&2&&& &&&&&&&&&&Rectangle&{&color:&&red&;&width:&50;&height:&50&}&&& &&&&&&&&&&Rectangle&{&color:&&green&;&width:&20;&height:&50&}&&& &&&&&&&&&&Rectangle&{&color:&&blue&;&width:&50;&height:&20&}&&& &&}&&
QML 中的 Grid元素会将其子控件都均匀地排列在一个网格内，相互不重叠，每一个子控件都被放置在一个网格单元的（0，0）位置，也就是左上角。Grid的rows 和columns属性定义网格的行数和列数，列数默认是4。我们还可以使用Grid的spacing 属性来定义网格单元之间的距离，这里注意水平和垂直方向的spacing都是一样的。比如下列代码就会产生如图所示的效果：
view&sourceprint?1&Grid&{&&& &&&&&&&&&&columns:&3&&& &&&&&&&&&&spacing:&2&&& &&&&&&&&&Rectangle&{&color:&&red&;&width:&50;&height:&50&}&&& &&&&&&&&&Rectangle&{&color:&&green&;&width:&20;&height:&50&}&&& &&&&&&&&&&Rectangle&{&color:&&blue&;&width:&50;&height:&20&}&&& &&&&&&&&&&Rectangle&{&color:&&cyan&;&width:&50;&height:&50&}&&& &&&&&&&&&Rectangle&{&color:&&magenta&;&width:&10;&height:&10&}&&& &&}&&
我们还可以将Grid、Row 和 Column 进行混合应用。比如下面的代码会产生如图所示的效果：
view&sourceprint?01&Column&{&& &&&&&&&&&&spacing:&2&& &&&&&&&&&&&&&Rectangle&{&color:&&red&;&width:&50;&height:&50&}&& &&&&&&&&&&&&&Row&{&& &&&&&&&&&&&&&&&&&&&&&spacing:&2&& &&&&&&&&&&&Rectangle&{&color:&&yellow&;&width:&50;&height:&50&}&& &&&&&&&&&&&Rectangle&{&color:&&black&;&width:&20;&height:&50&}&& &&&&&&&&&&&Rectangle&{&color:&&blue&;&width:50;&height:&20&}&& &&&&&}&& &&&&Rectangle&{&color:&&green&;&width:&20;&height:&50&}&& &&}&&
每一个item 都可以被认为具有 7 条隐藏的&anchor lines&：left、 horizontalCenter、 right、 top、 verticalCenter、baseline、以及bottom，如下图所示：
其中baseline是指的文本所在的线，在上图中并未标出，如果item没有文字的话baselinw就和top的位置是相同的。除此之外，Anchor系统还提供了margins 和offsets。margins 是指一个item和外界之间所留有的空间，而offsets 则可以通过使用 center anchor lines来进行布局。如下图所示：
使用 QML anchoring系统，我们可以定义不同items之间的anchor lines之间的关系。例如：
view&sourceprint?1&Rectangle&{&id:&rect1;&...&}&& &Rectangle&{&id:&rect2;&anchors.left:&rect1.&anchors.leftMargin:&5;&...&}&&
我们还可以使用多个anchors：
view&sourceprint?1&Rectangle&{&id:&rect1;&...&}&& &Rectangle&{&id:&rect2;&anchors.left:&rect1.&anchors.top:&rect1.&...&}&&
通过定义多个水平或垂直的anchors，我们还可以控制item的大小，例如：
view&sourceprint?1&Rectangle&{&id:&rect1;&x:&0;&...&}&& &Rectangle&{&id:&rect2;&anchors.left:&rect1.&anchors.right:&rect3.&...&}&& &Rectangle&{&id:&rect3;&x:&150;&...&}&&
注意：出于效率方面的考虑，我们只允许对一个item的邻居和之接父亲使用anchor定义。比如下面的定义是不合法的：
Item&{&& &&&&&&id:&group1&& &&&&&&&Rectangle&{&id:&rect1;&...&}&& &&}&& &&Item&{&& &&&&&&id:&group2&& &&&&&&&Rectangle&{&id:&rect2;&anchors.left:&rect1.&...&}&&}&&
小结：详解 QML UI布局管理的内容介绍完了，希望本文对你有所帮助！【编辑推荐】【责任编辑： TEL：（010）】
关于&&的更多文章
本系列视频教程由正益无线与51CTO共同推出，目的是让大家对跨平
既然强大的Android Studio来了，有什么理由不去用呢？
中秋已过，圆圆的月亮似乎是一个害羞的姑娘，带上了一
对于设计师来说，扁平化设计是一种实打实的设计风格，
BYOD（Bring Your Own Device）指携带自己的设备办公
本书分为4个部分共24章，以插件开发为中心，围绕插件开发主要介绍SWT/JFace的应用、插件扩展点的实现，以及GEF、EMF和RCP的相关
Windows Phone专家
Android开发专家
51CTO旗下网站二次元同好交流新大陆
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
Rectangle{& & ......& & //与普通控件一样放置，但不会显示任何内容& & Control.MyToast& & {& & & & id:myToast& & & & z:10//显示在其他控件之上，保证能看见，无需设置其高度和宽度& & & & interval:1000//显示时间 fontSize:40//文字大小& & & & anchors.horizontalCenter: parent.horizontalCenter& & & & anchors.bottom: rectToolbar.top& & & & anchors.bottomMargin: 20& & & &&& & & & onSigToastDisappear://文字消失后触发的消息& & & & {& & & & & & if(!stackView.busy)& & & & & & & & stackView.pop(stackView.find(function(item) {& & & & & & & & & & return item.id === "ticketManagement";& & & & & & & & }));& & & & }& & }& & ......& &//需要显示提示消息时& & MouseArea& & & & & & {& & & & & & & & id:maBounce& & & & & & & & anchors.fill: parent& & & & & & & & onClicked:& & & & & & & & {& & & & & & & & & & myToast.showToast("退票申请成功");
& }& &......}----------------------------MyToast.qml开始-------------------------------------------import QtQuick 2.0Item{& & id: rectFrame& & width: 100& & height:50& & property bool isShow: false //是否是示toast& & property alias text: toast.text//显示的文字& & property int interval: 1000//显示时间，ms& & property int fontSize: 30//文字大小& & signal sigToastDisappear();//该toast消失后触发此消息& & function showToast(text)//显示toast函数& & {& & & & rectFrame.text =& & & & count = 1;& & & & rectFrame.isShow =& & & & toastTimer.restart();& & }& & property int count: 1& & Timer& & {& & & & id:toastTimer& & & & interval : 1000& & & & onTriggered:& & & & {& & & & & & switch(count)& & & & & & {& & & & & & case 1://透明度从0到1时触发，持续时间为1000ms& & & & & & & & toastTimer.interval = rectFrame.interval& & & & & & & & count = count+1;& & & & & & & & toastTimer.restart();& & & & & & & && & & & & & case 2://一直显示interval毫秒时触发，即将开始消失& & & & & & & & toastTimer.interval = 1000& & & & & & & & count = count+1;& & & & & & & & rectFrame.isShow =& & & & & & & & toastTimer.restart();& & & & & & & && & & & & & case 3://透明度从1到0时触发，持续时间为1000ms& & & & & & & & count = 1;& & & & & & & & toastTimer.interval = 1000& & & & & & & & rectFrame.sigToastDisappear();& & & & & & & && & & & & & }& & & & }& & }& & //背景色& & Rectangle& & {& & & & id:toastbkg& & & & anchors.fill: toast& & & & color: "#666666"& & & & opacity: rectFrame.isShow ? 1 : 0& & & & border.width:1& & & & border.color:"white"& & & & radius:3& & & & Behavior on opacity {& & & & & & NumberAnimation { duration: 1000 }& & & & }& & }& & //显示文字& & Text& & {& & & & id:toast& & & & x:0& & & & y:0& & & & color: "white"& & & & anchors.horizontalCenter: parent.horizontalCenter& & & & anchors.verticalCenter: parent.verticalCenter& & & & text:"sssssss";& & & & font.pixelSize: fontSize& & & & opacity: rectFrame.isShow ? 1 : 0& & & & Behavior on opacity {& & & & & & NumberAnimation { duration: 1000 }& & & & }& & }}----------------------------MyToast.qml结束-------------------------------------------
阅读(576)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'qml做的仿安卓toast控件',
blogAbstract:'使用方法，MyToast控件源代码见后面。Rectangle{& & ......& & //与普通控件一样放置，但不会显示任何内容& & Control.MyToast& & {& & & & id:myToast& & & & z:10//显示在其他控件之上，保证能看见，无需设置其高度和宽度& & & & interval:1000//显示时间\tfontSize:40//文字大小& & & & anchors.horizontalCenter: parent.horizontalCenter',
blogTag:'qml,toast,qt',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:9,
publishTime:2,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}后使用快捷导航没有帐号？
您尚未登录,请登录后浏览更多内容！
查看: 2622|回复: 6
在线时间48 小时帖子精华0Qter豆312 贡献43 毅力76 注册时间最后登录
Qter2级会员, 积分 119, 距离下一级还需 181 积分
目前在做把原有的QML写的项目移植到Android设备上，其中用到了第3方库文件，目前的情况是编译和部署到虚拟机都成功了，就是虚拟机端运行程序的时候提示“Unfortunately,mainview has stooped”，经高手指点看了下apk文件中的libs目录下确实没有第3方的库文件，但是我在项目的pro中用LIBS+=的方式指定了库，pro中的添加库语句是通过右击项目添加库自动生成的应该没问题吧。但是最终就是没有在apk中生产库。是不是还需要其他的操作才能达到库在apk的libs目录下呢？还是说不需要libs目录下有第3方库呢？等待高手解答
清除---qmake---重新构建---运行
在线时间699 小时帖子精华4Qter豆3537 贡献36 毅力851 注册时间最后登录
Qter豆3537
charles_gz 发表于
尝试了你说的那个方法没有效果。也尝试了通过在pro中添加QMAKE_POST_LINK += copy -f dir1 dir2 的方法也 ...
清除---qmake---重新构建---运行
在线时间48 小时帖子精华0Qter豆312 贡献43 毅力76 注册时间最后登录
Qter2级会员, 积分 119, 距离下一级还需 181 积分
通过查询和高手指点知道存在ANDROID_EXTRA_LIBS宏是专门添加第3方库的，可是我这写了
ANDROID_EXTRA_LIBS+= D：\Qt_Android\demo\lib\libbaseshapes.so& & D:\Qt_Android\demo\lib\libbasecshapes.so 最后编译生成的apk的lib目录下还是没有第3方库，郁闷了，在线等待解答
在线时间699 小时帖子精华4Qter豆3537 贡献36 毅力851 注册时间最后登录
Qter豆3537
charles_gz 发表于
通过查询和高手指点知道存在ANDROID_EXTRA_LIBS宏是专门添加第3方库的，可是我这写了
ANDROID_EXTRA_LIBS+= ...
我觉得应该是这么写吧
ANDROID_EXTRA_LIBS+= &D:/Qt_Android/demo/lib/libbaseshapes.so&
在线时间48 小时帖子精华0Qter豆312 贡献43 毅力76 注册时间最后登录
Qter2级会员, 积分 119, 距离下一级还需 181 积分
Syylc120317 发表于
我觉得应该是这么写吧
ANDROID_EXTRA_LIBS+= &D:/Qt_Android/demo/lib/libbaseshapes.so&
哦，那我一会试试，谢谢指点
在线时间48 小时帖子精华0Qter豆312 贡献43 毅力76 注册时间最后登录
Qter2级会员, 积分 119, 距离下一级还需 181 积分
Syylc120317 发表于
我觉得应该是这么写吧
ANDROID_EXTRA_LIBS+= &D:/Qt_Android/demo/lib/libbaseshapes.so&
尝试了你说的那个方法没有效果。也尝试了通过在pro中添加QMAKE_POST_LINK += copy -f dir1 dir2 的方法也不行。
在线时间48 小时帖子精华0Qter豆312 贡献43 毅力76 注册时间最后登录
Qter2级会员, 积分 119, 距离下一级还需 181 积分
Syylc120317 发表于
清除---qmake---重新构建---运行
现在在apk包中看到第3方库了，采用了非绝对路径。谢谢你的解答。
注册账号后积极上传头像的会员
坚持登陆，持之以恒！
积极发帖的会员
Powered by
X2.5. Theme By相关热词搜索：}