qml 自定义弹窗案例-QT开发中文网

下面是一个使用QML自定义弹窗的简单案例：

import QtQuick 2.0
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    
    Button {
        text: "显示弹窗"
        onClicked: customPopup.open()
    }
    
    Popup {
        id: customPopup
        width: 200
        height: 150
        
        contentItem: Rectangle {
            color: "white"
            border.color: "black"
            border.width: 1
            
            Text {
                anchors.centerIn: parent
                text: "这是一个自定义弹窗"
                font.pixelSize: 16
            }
            
            Button {
                anchors.bottom: parent.bottom
                width: parent.width
                
                text: "关闭"
                onClicked:
                {
                    customPopup.close()
                }
            }
        }
        
        focus:true // 弹窗获取焦点，可以响应键盘事件
        
        // 屏蔽背景点击和按下Esc键关闭弹窗的默认行为
        activeFocusOnPress:false 
        closePolicy:{
            ClosePolicy { escapeKeyEnabled:false; } 
        } 
        
        onClosed:
        {
            // 弹窗关闭后，恢复焦点到主界面上，避免焦点异常问题
            mainView.forceActiveFocus()
        }
        
    }
}

这个案例中，通过在主界面上放置一个按钮来触发显示自定义弹窗。当按钮被点击时，调用customPopup.open()方法打开自定义弹窗。弹窗使用Popup组件实现，通过设置contentItem属性来定义弹窗的内容。弹窗中包含一个文本显示和一个关闭按钮。点击关闭按钮时，调用customPopup.close()方法关闭弹窗。

请注意，这只是一个简单的示例，你可以根据自己的需求进一步扩展和美化弹窗的样式和功能。

内容由零声教学AI助手提供，问题来源于学员提问