目录

• 1.Popup介绍
• 2.自定义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);     }

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: Rectangle {    color: "#aaffdbe7"}