QML实现圆角Window

本文介绍了使用QtQuick创建一个带有无边框、透明效果的窗口,并包含新建工程、打开工程和退出功能的按钮。重点展示了如何实现窗口的移动和功能操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.0
ApplicationWindow   {
    id:root
    visible: true
    width:400
    height: 300
    minimumWidth: width
    maximumWidth: width
    minimumHeight:height
    maximumHeight:height
    flags: Qt.FramelessWindowHint
    modality:Qt.ApplicationModal
    color: "#00000000"
    Rectangle{
        id:inrec
        anchors.fill:parent
        radius:30
        opacity:1
        layer.enabled: true
            layer.effect: OpacityMask {
                maskSource: Rectangle {
                    width: inrec.width
                    height: inrec.height
                    radius: inrec.radius
                }
            }
    MouseArea { 
            x:0
            y:0
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton
            property point clickPos: "0,0"
            onPressed: { 
                    clickPos  = Qt.point(mouse.x,mouse.y)
            }
            onPositionChanged: {
                    var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                    root.setX(root.x+delta.x)
                    root.setY(root.y+delta.y)
            }
    }
    Image{
        anchors.fill: parent
        source:"qrc:/back.jpg"
        smooth:true
    }
    Button{
        id:xinjiangongcheng
        x:root.width/2-width/2
        y:60
        width:100
        height:30
        text: qsTr("新建工程")
        onClicked: {
            camera.newProjectUrl()
        }
    }
    Button{
        id:dakaigongcheng
        x:xinjiangongcheng.x
        y:120
        width:100
        height:30
        text: qsTr("打开工程")
        onClicked: {
            camera.openProjectUrl()
        }
    }
    Button{
        id:quxiao
        x:xinjiangongcheng.x
        y:180
        width:100
        height:30
        text: qsTr("退出")
        onClicked: {
           Qt.quit()
        }
    }
    }
}

要在QML的Image中设置圆角,可以使用OpacityMask来实现。首先,创建一个Rectangle作为遮罩,设置其radius属性为所需的圆角大小。然后,使用OpacityMask将遮罩应用到Image上。下面是一个示例代码: ```qml import QtQuick 2.12 import QtQuick.Window 2.12 import QtGraphicalEffects 1.13 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") Image { id: normalImage width: 150 height: 150 anchors.left: parent.left anchors.leftMargin: 100 anchors.top: parent.top anchors.topMargin: 100 source: "qrc:/header.jpg" } MouseArea { id: imageRect width: 150 height: 150 anchors.top: parent.top anchors.topMargin: 100 anchors.right: parent.right anchors.rightMargin: 100 // 头像 Image { id: nameIamge anchors.fill: parent source: "qrc:/header.jpg" visible: false onStatusChanged: { if(nameIamge.status === Image.Error){ console.log("load error==============") } } } Rectangle { id: mask anchors.fill: parent radius: 10 visible: false } OpacityMask { anchors.fill: parent source: nameIamge maskSource: mask } } } ``` 在上述代码中,我们创建了一个Image来显示原始图像,并使用一个MouseArea来触发显示圆角的图像。在MouseArea中,我们使用了一个Rectangle作为遮罩,设置了其radius属性为10,以实现圆角效果。然后,使用OpacityMask将遮罩应用到Image上,从而达到显示圆角图像的效果。 希望对你有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [qml Image显示圆角图像](https://blog.csdn.net/chenyijun/article/details/119772045)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [qml Image绘制圆角(图片绘制圆角)](https://blog.csdn.net/qq_43081702/article/details/125104269)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [QML Image获取资源路径的细节](https://download.csdn.net/download/weixin_38670949/12783402)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值