QT quick-popup 팝 업 창 사용자 정의 구현

1.Popup 소개
팝 업 은 팝 업 창의 컨트롤 입 니 다.
그것 의 상용 속성 은 다음 과 같다.

anchors.centerin:Object,가운데 창 이 누구 인지 설정 합 니 다.

close Policy:enumeration,팝 업 창의 닫 기 정책 을 설정 합 니 다.기본 값 은 Popup.Close OnEscape|Popup.Close OnPressOutside 입 니 다.값 은 다음 과 같 습 니 다.

Popup.NoAutoClose:close()를 수 동 으로 호출 한 후에 만 팝 업 창 이 닫 힙 니 다(예 를 들 어 진행 상황 을 불 러 올 때 XIANG 이 아 닙 니 다).

Popup.CloseOnPress Outside:팝 업 창 밖 에 마 우 스 를 누 르 면 팝 업 창 이 닫 힙 니 다.

Popup.CloseOnPress Outside Parent:부모 항목 외 에 마 우 스 를 누 르 면 팝 업 창 이 닫 힙 니 다.

Popup.CloseOnReleaseOutside:팝 업 창 외부 에서 마우스 가 풀 리 면 팝 업 창 이 닫 힙 니 다.

Popup.CloseOn Release Outside Parent:부모 항목 에서 마 우 스 를 놓 고 누 르 면 팝 업 창 이 닫 힙 니 다.

Popup.CloseOn Escape:팝 업 창 이 활성 초점 이 있 을 때 ESC 키 를 누 르 면 팝 업 창 이 닫 힙 니 다.

dim:bool,어두 운 속성,기본 값 은 undefined 이 고 false 로 설정 하면 모드 창 이 꺼 진 후의 다른 배경 은 어 둡 지 않 습 니 다

modal:bool,모드,기본 값 은 false(비 모드,비 차단 호출)

enter:Transition,팝 업 창 에 들 어 갈 때 애니메이션 과도

exit:Transition,팝 업 창 을 종료 할 때 애니메이션 과도

그것 의 신 호 는 다음 과 같다.

void about ToHide():팝 업 창 이 숨겨 질 때 이 신 호 를 보 냅 니 다.

void about ToShow():팝 업 창 이 표 시 될 때 이 신 호 를 보 냅 니 다.

void closed():팝 업 창 이 닫 혔 을 때 이 신 호 를 보 냅 니 다.

void opened():팝 업 창 을 열 때 이 신 호 를 보 냅 니 다.

그것 의 방법 은 다음 과 같다.

void close():팝 업 창 을 닫 습 니 다.

forceActiveFocus(reason=Qt.OtherFocusReason):초점 설정 강제

void open():팝 업 창 을 엽 니 다.

그리고 지 표를 가 진 팝 업 팝 업 창 을 정의 합 니 다.
2.사용자 정의 팝 업
팝 업 의 닻 레이아웃 은 anchors.centerin 만 있 기 때문에 팝 업 이 특정한 컨트롤 의 왼쪽 위 에 있 으 려 면 사용자 정의 가 필요 합 니 다.
다음 과 같은 캡 처 를 실현 합 니 다(업로드 그룹 에 있 음).

실현 효 과 는 다음 과 같다.

우선 horizontalPosBase 와 verticalPosBase 두 가지 속성 을 실현 해 야 합 니 다.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"
}

효 과 는 다음 과 같다.

QT quick-Popup 팝 업 창 사용자 정의 구현 에 관 한 이 글 을 소개 합 니 다.더 많은 관련 QT quick-Popup 팝 업 창 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부탁드립니다!