QTquick-Popup弹出窗⼝⾃定义的实现
⽬录
1.Popup介绍
2.⾃定义Popup
1.Popup介绍
Popup是⼀个弹出窗⼝的控件
它的常⽤属性如下所⽰:
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的锚布局只有⼀个In，假如们想让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;
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
pMargin = 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中，避免当前界⾯不是主界⾯的情况,⽆法显⽰弹出窗⼝
anchors.fill: parent
text: "1234567890"
color: "#FFF"
font.pixelSize: 14
font.family: "Microsoft Yahei"
wrapMode: TextEdit.WrapAnywhere
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
}
如果我们使⽤模态的弹出窗⼝，并且想设置弹出窗⼝外的背景⾊，可以设置dal附加属性,⽐如设置为谈红⾊:
color: "#aaffdbe7"
}
效果如下所⽰:
到此这篇关于QT quick-Popup弹出窗⼝⾃定义的实现的⽂章就介绍到这了，更多相关QT quick-Popup弹出窗⼝内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。