1.popup介绍
popup是一个弹出窗口的控件
它的常用属性如下所示:
- anchors.centerin : object,用来设置居中在谁窗口中.
- closepolicy : enumeration,设置弹出窗口的关闭策略,默认值为默认值为popup.closeonescape|popup.closeonpressoutside,取值有:
- popup.noautoclose : 只有在手动调用close()后，弹出窗口才会关闭(比如加载进度时,不xiang)。
- popup.closeonpressoutside : 当鼠标按在弹出窗口外时，弹出窗口将关闭。
- popup.closeonpressoutsideparent : 当鼠标按在其父项之外时，弹出窗口将关闭。
- popup.closeonreleaseoutside : 当鼠标在弹出窗口外部松开按下时，弹出窗口将关闭。
- popup.closeonreleaseoutsideparent : 当鼠标在其父项松开按下时，弹出窗口将关闭。
- popup.closeonescape : 当弹出窗口具有活动焦点时，按下esc键时，弹出窗口将关闭。
- dim : bool,昏暗属性,默认为undefined,设置为false,则模态窗口弹出后的其它背景不会昏暗
- modal : bool,模态,默认为false(非模态,非阻塞调用,指出现该对话框时,也可以与父窗口进行交互,此时dim是无效果的)
- enter : transition,进入弹出窗口时的动画过渡
- exit : transition,退出弹出窗口时的动画过渡
它的信号如下所示:
- void abouttohide(): 当弹出窗口即将隐藏时，会发出此信号。
- void abouttoshow(): 当弹出窗口即将显示时，会发出此信号。
- void closed(): 当弹出窗口关闭时发出此信号。
- void opened(): 打开弹出窗口时发出此信号。
它的方法如下所示:
- void close(): 关闭弹出窗口。
- forceactivefocus(reason = qt.otherfocusreason): 强制设置焦点
- void open() : 打开弹出窗口。
然后我们来自定义实现一个带指标的popup弹出窗口.
2.自定义popup
由于popup的锚布局只有一个anchors.centerin,假如们想让popup位于某个控件的左上方时,必须得自定义一个.
实现截图如下所示(已上传群里):
实现效果如下所示:
首先我们需要实现horizontalposbase和verticalposbase两个属性.来实现popup位于目标对象的哪个方位.
- 一个是设置popup在目标对象的水平方向的位置
- 一个是popup在目标对象的垂直方向的位置.
由于我们已经知道了方位,那么指标的坐标也就可以自动计算出来了.
具体实现代码如下所示:
// 指示器方向,根据horizontalposbase和verticalposbase 自动计算 enum indicatorstyle { indicatorleft, indicatorright, indicatortop, indicatorbottom } function updateindicatorpos(indicatorstyle) { switch (indicatorstyle) { case indicatorpopup.indicatorleft: indicator.x = - indicator.width*0.4; indicator.y = back.height <= mytarget.height ? (back.height)/2-indicatorlen : verticalposbase === indicatorpopup.topalign ? (mytarget.height)/2 -indicatorlen : verticalposbase === indicatorpopup.verticalalign ? (back.height)/2 -indicatorlen : back.height - (mytarget.height)/2 -indicatorlen; break; case indicatorpopup.indicatorright: indicator.x = width - indicator.width*1.2; indicator.y = back.height <= mytarget.height ? (back.height)/2-indicatorlen : verticalposbase === indicatorpopup.topalign ? (mytarget.height)/2 -indicatorlen : verticalposbase === indicatorpopup.verticalalign ? (back.height)/2 -indicatorlen : back.height - (mytarget.height)/2 -indicatorlen; break; case indicatorpopup.indicatortop: indicator.x = back.width <= mytarget.width ? (back.width)/2-indicatorlen : horizontalposbase === indicatorpopup.posbasetoright ? (mytarget.width)/2 -indicatorlen : horizontalposbase === indicatorpopup.posbasetohorizontal ? (back.width)/2 -indicatorlen : back.width - (mytarget.width)/2 -indicatorlen; indicator.y = - indicator.width*0.4; break; case indicatorpopup.indicatorbottom: indicator.x = back.width <= mytarget.width ? (back.width)/2-indicatorlen : horizontalposbase === indicatorpopup.posbasetoright ? (mytarget.width)/2 -indicatorlen : horizontalposbase === indicatorpopup.posbasetohorizontal ? (back.width)/2 -indicatorlen : back.width - (mytarget.width)/2 -indicatorlen; indicator.y = height - indicator.height*1.2; break; } console.log("indicator",indicator.x,indicator.y,indicator.width,indicator.height) } function updatepopuppos() { var indicatorstyle; switch (horizontalposbase) { case indicatorpopup.posbasetoleft: // popup位于目标水平左侧 x = mytarget.x - width - targetspacing; y = verticalposbase === indicatorpopup.topalign ? mytarget.y : verticalposbase === indicatorpopup.verticalalign ? mytarget.y + mytarget.height/2 - height/2 : mytarget.y - height + mytarget.height indicatorstyle = indicatorpopup.indicatorright; break; case indicatorpopup.posbasetohorizontal: // popup水平中间 x = mytarget.x + mytarget.width/2 - width/2; y = verticalposbase === indicatorpopup.posbasetotop ? mytarget.y - height - targetspacing : verticalposbase === indicatorpopup.posbasetobottom ? mytarget.y + mytarget.height + targetspacing : mytarget.y + mytarget.height + targetspacing indicatorstyle = verticalposbase === indicatorpopup.posbasetotop ? indicatorpopup.indicatorbottom : indicatorpopup.indicatortop; break; case indicatorpopup.posbasetoright: // popup位于目标水平右侧 x = mytarget.x + mytarget.width + targetspacing; y = verticalposbase === indicatorpopup.topalign ? mytarget.y : verticalposbase === indicatorpopup.verticalalign ? mytarget.y + mytarget.height/2 - height/2 : mytarget.y - height + mytarget.height indicatorstyle = indicatorpopup.indicatorleft console.log("posbasetoright",x,y,indicatorstyle); break; } back.anchors.leftmargin = indicatorstyle === indicatorpopup.indicatorleft ? indicatorlen : 0 back.anchors.rightmargin = indicatorstyle === indicatorpopup.indicatorright ? indicatorlen : 0 back.anchors.bottommargin = indicatorstyle === indicatorpopup.indicatorbottom ? indicatorlen : 0 back.anchors.topmargin = indicatorstyle === indicatorpopup.indicatortop ? indicatorlen : 0 leftpadding = indicatorstyle === indicatorpopup.indicatorleft ? indicatorlen : 0 rightpadding = indicatorstyle === indicatorpopup.indicatorright ? indicatorlen : 0 bottompadding = indicatorstyle === indicatorpopup.indicatorbottom ? indicatorlen : 0 toppadding = indicatorstyle === indicatorpopup.indicatortop ? indicatorlen : 0 console.log(x,y,indicatorstyle); updateindicatorpos(indicatorstyle); }
比如我们想让这个popup位于目标的左侧,顶部对齐,就可以这样写(无需指定popup的x,y坐标了):
button { id: btn text: "水平左侧-顶部对齐" onclicked: { popup.backgroundcolor = "#12b7f5" popup.horizontalposbase = indicatorpopup.posbasetoleft popup.verticalposbase = indicatorpopup.topalign popup.indicatoropen(btn) } } indicatorpopup { id: popup width : 180 height: 200 modal: false focus: true parent: overlay.overlay // overlay.overlay表示主窗口的意思,附加到任何的item、popup中,避免当前界面不是主界面的情况,无法显示弹出窗口 textarea { anchors.fill: parent text: "1234567890" color: "#fff" font.pixelsize: 14 font.family: "microsoft yahei" wrapmode: textedit.wrapanywhere } closepolicy: popup.closeonescape | popup.closeonpressoutside }
如果我们使用模态的弹出窗口,并且想设置弹出窗口外的背景色,可以设置overlay.modal附加属性,比如设置为谈红色:
overlay.modal: rectangle { color: "#aaffdbe7" }
效果如下所示:
需要了解更多c/c++开发分享34.qt quick-Popup弹出窗口自定义，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/643593.html