QT quick-Popup彈出窗口自定義的實(shí)現(xiàn)
更新時(shí)間：2021年07月02日 09:01:07 作者：諾謙
本文主要介紹了QT quick-Popup彈出窗口自定義的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1.Popup介紹
Popup是一個(gè)彈出窗口的控件
它的常用屬性如下所示:
- anchors.centerIn : Object,用來(lái)設(shè)置居中在誰(shuí)窗口中.
- closePolicy : enumeration,設(shè)置彈出窗口的關(guān)閉策略,默認(rèn)值為默認(rèn)值為Popup.CloseOnEscape|Popup.CloseOnPressOutside,取值有:
- Popup.NoAutoClose : 只有在手動(dòng)調(diào)用close()后，彈出窗口才會(huì)關(guān)閉(比如加載進(jìn)度時(shí),不XIANG)。
- Popup.CloseOnPressOutside : 當(dāng)鼠標(biāo)按在彈出窗口外時(shí)，彈出窗口將關(guān)閉。
- Popup.CloseOnPressOutsideParent : 當(dāng)鼠標(biāo)按在其父項(xiàng)之外時(shí)，彈出窗口將關(guān)閉。
- Popup.CloseOnReleaseOutside : 當(dāng)鼠標(biāo)在彈出窗口外部松開(kāi)按下時(shí)，彈出窗口將關(guān)閉。
- Popup.CloseOnReleaseOutsideParent : 當(dāng)鼠標(biāo)在其父項(xiàng)松開(kāi)按下時(shí)，彈出窗口將關(guān)閉。
- Popup.CloseOnEscape : 當(dāng)彈出窗口具有活動(dòng)焦點(diǎn)時(shí)，按下ESC鍵時(shí)，彈出窗口將關(guān)閉。
- dim : bool,昏暗屬性,默認(rèn)為undefined,設(shè)置為false,則模態(tài)窗口彈出后的其它背景不會(huì)昏暗
- modal : bool,模態(tài),默認(rèn)為false(非模態(tài),非阻塞調(diào)用,指出現(xiàn)該對(duì)話框時(shí),也可以與父窗口進(jìn)行交互,此時(shí)dim是無(wú)效果的)
- enter : Transition,進(jìn)入彈出窗口時(shí)的動(dòng)畫(huà)過(guò)渡
- exit : Transition,退出彈出窗口時(shí)的動(dòng)畫(huà)過(guò)渡
它的信號(hào)如下所示:
- void aboutToHide(): 當(dāng)彈出窗口即將隱藏時(shí)，會(huì)發(fā)出此信號(hào)。
- void aboutToShow(): 當(dāng)彈出窗口即將顯示時(shí)，會(huì)發(fā)出此信號(hào)。
- void closed(): 當(dāng)彈出窗口關(guān)閉時(shí)發(fā)出此信號(hào)。
- void opened(): 打開(kāi)彈出窗口時(shí)發(fā)出此信號(hào)。
它的方法如下所示:
- void close(): 關(guān)閉彈出窗口。
- forceActiveFocus(reason = Qt.OtherFocusReason): 強(qiáng)制設(shè)置焦點(diǎn)
- void open() : 打開(kāi)彈出窗口。
然后我們來(lái)自定義實(shí)現(xiàn)一個(gè)帶指標(biāo)的popup彈出窗口.
2.自定義Popup
由于Popup的錨布局只有一個(gè)anchors.centerIn,假如們想讓Popup位于某個(gè)控件的左上方時(shí),必須得自定義一個(gè).
實(shí)現(xiàn)截圖如下所示(已上傳群里):
實(shí)現(xiàn)效果如下所示:
首先我們需要實(shí)現(xiàn)horizontalPosBase和verticalPosBase兩個(gè)屬性.來(lái)實(shí)現(xiàn)Popup位于目標(biāo)對(duì)象的哪個(gè)方位.
- 一個(gè)是設(shè)置popup在目標(biāo)對(duì)象的水平方向的位置
- 一個(gè)是popup在目標(biāo)對(duì)象的垂直方向的位置.
由于我們已經(jīng)知道了方位,那么指標(biāo)的坐標(biāo)也就可以自動(dòng)計(jì)算出來(lái)了.
具體實(shí)現(xiàn)代碼如下所示:
// 指示器方向,根據(jù)horizontalPosBase和verticalPosBase 自動(dòng)計(jì)算
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位于目標(biāo)水平左側(cè)
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位于目標(biāo)水平右側(cè)
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);
}
比如我們想讓這個(gè)popup位于目標(biāo)的左側(cè),頂部對(duì)齊,就可以這樣寫(xiě)(無(wú)需指定popup的X,Y坐標(biāo)了):
Button {
id: btn
text: "水平左側(cè)-頂部對(duì)齊"
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中,避免當(dāng)前界面不是主界面的情況,無(wú)法顯示彈出窗口
TextArea {
anchors.fill: parent
text: "1234567890"
color: "#FFF"
font.pixelSize: 14
font.family: "Microsoft Yahei"
wrapMode: TextEdit.WrapAnywhere
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
}
如果我們使用模態(tài)的彈出窗口,并且想設(shè)置彈出窗口外的背景色,可以設(shè)置Overlay.modal附加屬性,比如設(shè)置為談紅色:
Overlay.modal: Rectangle {
color: "#aaffdbe7"
}
效果如下所示:
到此這篇關(guān)于QT quick-Popup彈出窗口自定義的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)QT quick-Popup彈出窗口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
C++實(shí)現(xiàn)LeetCode(2.兩個(gè)數(shù)字相加)
這篇文章主要介紹了C++實(shí)現(xiàn)LeetCode(兩個(gè)數(shù)字相加),本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了C++在vscode中的多文件編程問(wèn)題解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
C語(yǔ)言解讀數(shù)組循環(huán)右移問(wèn)題
這篇文章主要介紹了C語(yǔ)言解讀數(shù)組循環(huán)右移問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
C++利用兩個(gè)棧實(shí)現(xiàn)隊(duì)列的方法
這篇文章主要給大家介紹了關(guān)于C++利用兩個(gè)棧實(shí)現(xiàn)隊(duì)列的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用C++具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
VC編程控件類HTControl之CHTGDIManager GDI資源管理類用法解析
這篇文章主要介紹了VC編程控件類HTControl之CHTGDIManager GDI資源管理類用法解析,需要的朋友可以參考下2014-08-08
數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組翻轉(zhuǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組翻轉(zhuǎn)的實(shí)現(xiàn)方法的相關(guān)資料,這里用幾種實(shí)現(xiàn)方法來(lái)實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
C語(yǔ)言報(bào)錯(cuò)：Buffer Overflow的原因和解決辦法
Buffer Overflow是C語(yǔ)言中常見(jiàn)且危險(xiǎn)的內(nèi)存錯(cuò)誤之一,它通常在程序試圖向緩沖區(qū)（如數(shù)組或內(nèi)存塊）寫(xiě)入超過(guò)其容量的數(shù)據(jù)時(shí)發(fā)生,本文將詳細(xì)介紹Buffer Overflow的產(chǎn)生原因,提供多種解決方案,需要的朋友可以參考下2024-07-07
使用C++實(shí)現(xiàn)MySQL數(shù)據(jù)庫(kù)連接池
這篇文章主要為大家詳細(xì)介紹了如何使用C++實(shí)現(xiàn)MySQL數(shù)據(jù)庫(kù)連接池,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2024-03-03
C語(yǔ)言中一些將字符串轉(zhuǎn)換為數(shù)字的函數(shù)小結(jié)
這篇文章主要介紹了C語(yǔ)言中一些將字符串轉(zhuǎn)換為數(shù)字的函數(shù)小結(jié),分別為atoi()函數(shù)和atol()函數(shù)以及atof()函數(shù),需要的朋友可以參考下2015-08-08
C++代碼和可執(zhí)行程序在x86和arm上的區(qū)別介紹
這篇文章主要介紹了C++代碼和可執(zhí)行程序在x86和arm上的區(qū)別,X86和ARM是占據(jù)CPU市場(chǎng)的兩大處理器，各有優(yōu)劣，本文給大家詳細(xì)介紹了兩者的區(qū)別，需要的朋友可以參考下2022-07-07