Qt-QML-Popup,弹层界面编写

随着接触Qt的时间的增加，也逐渐的发现了Qt 的一些不人信话的一些地方，不由的想起一句话，也不知道是在哪里看到的了“一切变成语言都是垃圾，就C++还可以凑合用”大致意思是这样。最近项目的祝界面框架都基本写完了，那自我感觉良好，感觉自己QML牛逼的不得了了，全部用的都是自己YY出来的空间，今天小伙伴在同伴代码后，用到了我的模块，给我说了一个BUG，

我一听，卧槽，BUG！BUG！BUG！，你确定是我的问题吗，你要确定好了啊，是不是你的环境问题，我这怎么没有这个问题。

大致说一下背景，项目在开发完成后呢，大部分和默认情况呢，都是全屏运行，界面呢，都属出自本宝宝的手哈，所以了，在QML中了，我默认是调用的QML的“showFullScreen()”

而小伙伴反应是在全屏下，我的空间是被遮住了，在主界面的后面显示，每次都需要调出资源管理器来显示我的界面，这就不爽了，我这里怎么就没有了

再次和小伙伴干起来，是不是你用的不对，你没有看我写的Demo么，没有看么，我的怎么没有问题，奈何，MMP，我是公司唯一一个使用两个显示器 的，每次程序都是运行在我的扩展屏上面，这个问题是没有出现，但是当我运行在主屏上面的时候，就会发现这样的问题了，赶紧害羞的修BUG

“showFullScreen()”这个函数呢，英文字面意思就是全屏显示程序，这个函数默认是调用了系统的“FullScreen”,如下图

接着跳转到帮助文档看FullScreen，如下

后面的届时我复制下来

The window occupies one entire screen, is not resizable, and there is no titlebar. On some platforms which do not support showing multiple simultaneous windows, this can be the usual visibility when the window is not hidden.

这是原文，

有道翻译结果

大致意思了，就是这个FunnScreen函数了，在某些平台上面，只能支持一个界面全屏显示，也就是说，当某个界面在全屏显示的状态下，其他界面是被遮盖的。参考这个BUG的出现，那我才，windows就是其中一个了，很遗憾，那么，怎么办了，其实如果可以用Dialog就可以轻松解决了，奈何我搞了一下午，就是不能把Dialog的边框去掉，这里需要有牛逼的小伙伴给我指点一下，QML下的Dialog怎么把边框给去掉了。但是呢，总得先把这个BUG给解决了，不然老板给和我谈谈人生了。所以，这里需要祭出我今天新学习的神器了，Popup

这是一些Popup的一些布局显示，那么我理解了，就是中间的白色区域，就可以显示我们要弹出的内容了，剩下的那些，都是对这个Popup的美化。

下面上测试代码

import QtQuick 2.5
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
import QtQuick.Window 2.2
ApplicationWindow {
    id:root
    visible: true
    width: 800
    height: 600
    title: qsTr("测试程序")

    Rectangle
    {
        width: 100
        height: 30
        anchors.right: parent.right
        anchors.top: parent.top
        color: "#FF0000"

        MouseArea
        {
            anchors.fill: parent
            onClicked: {
                if(root.width != Screen.width)
                {
                    showFullScreen()
                    test.text = "ShoeNurmal"
                }
                else
                {
                    showNormal()
                    test.text = "ShowFullScreen"
                }
            }
        }
        Text {
            id: test
            anchors.centerIn: parent
            text: qsTr("ShowFullScreen")
        }
    }

    Rectangle
    {
        width: 100
        height: 30
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.topMargin: 50
        color: "#FFFF00"

        MouseArea
        {
            anchors.fill: parent
            onClicked: {
                if(textpopup.text == 'Popup')
                {
                    myPopup.open()
                    textpopup.text = "Popup close"

                }
                else
                {
                    myPopup.close()
                    textpopup.text = "Popup"
                }
            }
        }
        Text {
            id: textpopup
            anchors.centerIn: parent
            text: qsTr("Popup")
        }
    }

    Popup
    {
        id:myPopup
        width: 400
        height: 300
        x:(root.width-width)/2
        y:(root.height-height)/2
        modal: true
        focus: true
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

        Rectangle
        {
//            width: 400
//            height: 300
            anchors.fill: parent
            Text {
                id: mytext
                font.pixelSize: 24
                text: qsTr("Popup 内容显示模块")
            }
        }
    }

}

运行测试截图

非全屏

全屏

抱歉，我不知道怎么能截下来，每次截图会把这个状态改变了，只能用相机拍下来了

目前完美解决了这个我自己洗的BUG

现在，我真的是在写BUG，哈哈

欢迎大家指正