弹窗控件，类似于QMessageBox

属性

  2. activeFocus : bool
  3. anchors.centerIn : Object
  4. availableHeight : real
  5. availableWidth : real
  6. background : Item
  7. bottomInset : real
  8. bottomMargin : real
  9. bottomPadding : real
  10. clip : bool
  11. closePolicy : enumeration        关闭弹窗的方式
  12. contentChildren : list<Item>
  13. contentData : list<Object>
  14. contentHeight : real
  16. 内容填充
  17. contentItem : Item
  19. contentWidth : real
  20. dim : bool    非模态状态下对话框外区域背景色是否需要设置，模态的时候其他区域是深色的（可通过Overlay对弹窗外的区域进行设置）
  21. enabled : bool
  23. 打开时转变的效果
  24. enter : Transition
  25. enter: Transition {
  26.               NumberAnimation {
  27.                   property: "opacity";
  28.                   from: 0.0;
  29.                   to: 1.0
  30.                   duration: 1000
  31.               }
  32.           }
  33. 关闭时的转变效果
  34. exit : Transition
  35. enter: Transition {
  36.               NumberAnimation {
  37.                   property: "opacity";
  38.                   from: 0.0;
  39.                   to: 1.0
  40.                   duration: 1000
  41.               }
  42.           }
  44. focus : bool
  45. font : font
  46. height : real
  47. horizontalPadding : real
  48. implicitBackgroundHeight : real
  49. implicitBackgroundWidth : real
  50. implicitContentHeight : real
  51. implicitContentWidth : real
  52. implicitHeight : real
  53. implicitWidth : real
  54. leftInset : real
  55. leftMargin : real
  56. leftPadding : real
  57. locale : Locale
  58. margins : real
  59. mirrored : bool
  60. modal : bool    模态true后不可操作其他窗口，只有关闭窗口后才可操作其他窗口，模态时Popup.NoAutoClose慎用
  61. opacity : real
  62. opened : bool
  63. padding : real
  64. palette : palette
  65. parent : Item
  66. rightInset : real
  67. rightMargin : real
  68. rightPadding : real
  69. scale : real
  70. spacing : real
  71. topInset : real
  72. topMargin : real
  73. topPadding : real
  74. transformOrigin : enumeration
  75. verticalPadding : real
  76. visible : bool        // 一个控件内套Popup 不会因为父控件是不可见的而子控件也不可见 
  77. width : real
  78. x : real
  79. y : real
  80. z : real //popup作为一个弹窗，会覆盖其他类型的控件，该参数只是有效于相同类型的popup类弹窗

可见性

  1. Rectangle{
  2.         width: 200
  3.         height: 200
  4.         color: "red"
  5.         visible: false
  6.         Popup{
  7.             width: 100
  8.             height: 60
  9.             visible: true
  10.         }
  11.     }

image.png-》image.png

z轴顺序

Popup 将其他类型的控件都进行遮盖，不管其z顺序，popup的z只是在不同得popup对象之间有效果

  1. Rectangle{
  2.         width: 200
  3.         height: 200
  4.         color: "red"
  5.         visible: true
  6.         z:1
  7.     }
  8.     Rectangle{
  9.         width: 200
  10.         height: 200
  11.         x: 100
  12.         color: "blue"
  13.         visible: true
  14.     }

默认后声明的控件z更大
image.png

  1. Popup{
  2.         width: 200
  3.         height: 200
  4.         visible: true
  5.         background: Rectangle{
  6.             color: "black"
  7.         }
  9.     }
  10.     Popup{
  11.         width: 200
  12.         height: 200
  13.         x: 100
  14.         visible: true
  15.         background: Rectangle{
  16.             color: "red"
  17.         }
  18.         z: 1
  19.     }

image.png

关闭弹窗

  1. Popup{
  2.      id: popup
  3.      x:100
  4.      y: 100
  5.      width: 200
  6.      height: 300
  7.      visible: true
  8.      closePolicy: Popup.NoAutoClose //设置不能自动关闭弹框，只能手动调用接口关闭
  9. }
  11. /**
  12. 默认点击esc 和 谈窗外空白区域可关闭，Popup.CloseOnEscape | Popup.CloseOnPressOutside
  15. Popup.NoAutoClose    
  16. The popup will only close when manually instructed to do so.
  17. Popup.CloseOnPressOutside
  18. The popup will close when the mouse is pressed outside of it.
  19. Popup.CloseOnPressOutsideParent
  20. The popup will close when the mouse is pressed outside of its parent.
  21. Popup.CloseOnReleaseOutside
  22. The popup will close when the mouse is released outside of it.
  23. Popup.CloseOnReleaseOutsideParent
  24. The popup will close when the mouse is released outside of its parent.
  25. Popup.CloseOnEscape
  26. The popup will close when the escape key is pressed while the popup has active focus.
  28. */

自定义弹窗内容

  1. Popup{
  2.      id: popup
  3.      x:100
  4.      y: 100
  5.      width: 500
  6.      height: 300
  7.      visible: true
  8. //     closePolicy: Popup.NoAutoClose //设置不能自动关闭弹框，只能手动调用接口关闭
  9.      closePolicy: Popup.CloseOnEscape
  10.      modal: true
  11. //     dim:true
  12.      enter: Transition {
  13.               NumberAnimation {
  14.                   property: "opacity";
  15.                   from: 0.0;
  16.                   to: 1.0
  17.                   duration: 1000
  18.               }
  19.           }
  21.       exit: Transition {
  22.           NumberAnimation {
  23.               property: "opacity";
  24.               from: 1.0;
  25.               to: 0.0
  26.               duration: 1000
  27.           }
  28.       }
  30.       contentItem: Rectangle{
  31.           anchors.fill: parent
  32.           color: "gray"
  33.           Text{
  34.               id: txt
  35.               anchors.fill: parent
  36.               text: qsTr("message box area！！！！！")
  37.               font{
  38.                   pixelSize: 26
  39.               }
  40.               wrapMode: Text.WordWrap   //按字换行
  41.           }
  42.           Button{
  43.               anchors.bottom: parent.bottom
  44.               anchors.bottomMargin: 30
  45.               anchors.right: parent.right
  46.               anchors.rightMargin: 30
  47.               text: "cancel"
  48.           }
  50.           Button{
  51.               anchors.bottom: parent.bottom
  52.               anchors.bottomMargin: 30
  53.               anchors.left: parent.left
  54.               anchors.leftMargin: 30
  55.               text: "ok"
  56.           }
  57.       }
  58. }

image.png

Overlay

属性

  1. modal : Component    模态的对话框
  2. modeless : Component    非模态的对话框
  3. overlay : Overlay

非模态

  1. Popup{
  2.      id: popup
  3.      x:100
  4.      y: 100
  5.      width: 400
  6.      height: 300
  7.      visible: true
  8. //     closePolicy: Popup.NoAutoClose //设置不能自动关闭弹框，只能手动调用接口关闭
  9.      closePolicy: Popup.CloseOnEscape
  10.      modal: false
  11.      dim:true
  12.      enter: Transition {
  13.               NumberAnimation {
  14.                   property: "opacity";
  15.                   from: 0.0;
  16.                   to: 1.0
  17.                   duration: 1000
  18.               }
  19.           }
  21.       exit: Transition {
  22.           NumberAnimation {
  23.               property: "opacity";
  24.               from: 1.0;
  25.               to: 0.0
  26.               duration: 1000
  27.           }
  28.       }
  30.       contentItem: Rectangle{
  31.           anchors.fill: parent
  32.           color: "gray"
  33.           Text{
  34.               id: txt
  35.               anchors.fill: parent
  36.               text: qsTr("message box area！！！！！")
  37.               font{
  38.                   pixelSize: 26
  39.               }
  40.               wrapMode: Text.WordWrap   //按字换行
  41.           }
  42.           Button{
  43.               anchors.bottom: parent.bottom
  44.               anchors.bottomMargin: 30
  45.               anchors.right: parent.right
  46.               anchors.rightMargin: 30
  47.               text: "cancel"
  48.           }
  50.           Button{
  51.               anchors.bottom: parent.bottom
  52.               anchors.bottomMargin: 30
  53.               anchors.left: parent.left
  54.               anchors.leftMargin: 30
  55.               text: "ok"
  56.           }
  57.       }
  59.       Overlay.modal: Rectangle{
  60.             anchors.fill: parent
  61.             color: "lightsteelblue"
  62.       }
  63.       Overlay.modeless: Rectangle{
  64.             anchors.fill: parent
  65.             color: "blue"
  66.       }
  67. }

image.png

模态

  1.      modal: true
  2. //     dim:true

image.png

模态非弹窗区域点击

  1. Popup{
  2.      id: popup
  3.      x:100
  4.      y: 100
  5.      width: 400
  6.      height: 300
  7.      visible: true
  8. //     closePolicy: Popup.NoAutoClose //设置不能自动关闭弹框，只能手动调用接口关闭
  9.      closePolicy: Popup.CloseOnEscape
  10.      modal: true
  11. //     dim:true
  12.      enter: Transition {
  13.               NumberAnimation {
  14.                   property: "opacity";
  15.                   from: 0.0;
  16.                   to: 1.0
  17.                   duration: 1000
  18.               }
  19.           }
  21.       exit: Transition {
  22.           NumberAnimation {
  23.               property: "opacity";
  24.               from: 1.0;
  25.               to: 0.0
  26.               duration: 1000
  27.           }
  28.       }
  30.       contentItem: Rectangle{
  31.           anchors.fill: parent
  32.           color: "gray"
  33.           Text{
  34.               id: txt
  35.               anchors.fill: parent
  36.               text: qsTr("message box area！！！！！")
  37.               font{
  38.                   pixelSize: 26
  39.               }
  40.               wrapMode: Text.WordWrap   //按字换行
  41.           }
  42.           Button{
  43.               anchors.bottom: parent.bottom
  44.               anchors.bottomMargin: 30
  45.               anchors.right: parent.right
  46.               anchors.rightMargin: 30
  47.               text: "cancel"
  48.               onClicked: {
  49.                   console.log("cancel")
  50.               }
  51.           }
  53.           Button{
  54.               anchors.bottom: parent.bottom
  55.               anchors.bottomMargin: 30
  56.               anchors.left: parent.left
  57.               anchors.leftMargin: 30
  58.               text: "ok"
  59.               onClicked: {
  60.                   console.log("ok")
  61.               }
  62.           }
  63.       }
  65.       Overlay.modal: Rectangle{
  66.             anchors.fill: parent
  67. //            color: "lightsteelblue"
  68.             color: "#33003322"      //rgba
  69.             Popup{
  70.                 width: parent.width
  71. //                height: parent.height
  72.                 height: 90
  73.                 visible: true
  74.                 closePolicy: Popup.NoAutoClose
  75.                 background: Rectangle{
  76.                     color: "transparent"    //透明色 使得下层的Popup可见
  77. //                    color:  "gray"
  78.                 }
  80.                 Button{
  81.                     width: 50
  82.                     height: 50
  83.                     anchors.right: parent.right
  84.                     onClicked: {
  85.                         console.log("clicked")
  86.                     }
  87.                 }
  88.             }
  89.       }
  90.       Overlay.modeless: Rectangle{
  91.             anchors.fill: parent
  92. //            color: "blue"     //英文字符
  93. //            color: "#202030"    //rgb
  94.             color: "#20323022"      //rgba
  95.       }
  96. }

image.png