qml窗口无边框带阴影

已于 2024-03-21 09:54:49 修改
阅读量463 收藏 5
点赞数 2
分类专栏： QT 文章标签： qt
于 2024-03-21 09:53:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010822106/article/details/136884048
版权

总结了两个方式，推荐使用第一种

  1. 使用RectangularGlow来达到阴影的目的

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0

Window {
    width: 840
    height: 680
    visible: true
    color: "transparent"
	
	x:Screen.width/2 - width/2
	y:Screen.height/2 - height/2
	
	property int titlebar_wrapper_size:40	
	id:registerWindow
	
    flags: Qt.FramelessWindowHint |
       Qt.WindowMinimizeButtonHint |
       Qt.Window
	   
	function startLogin()
	{
		var userName = registername.text

		if( userName != ""  ){
			id_mesDialog.icon = StandardIcon.Information
			id_mesDialog.text = "登陆成功"			
			id_mesDialog.open()
		}else{
			id_mesDialog.icon = StandardIcon.Critical
			id_mesDialog.text = "请输入用户名"
			id_mesDialog.open()
		}
	}
	
	MessageDialog {
		id:id_mesDialog
		title: "提示框"
		icon: StandardIcon.Question
		text: ""
		standardButtons: StandardButton.Ok
		Component.onCompleted: visible = false
	}
	   
    Item {
        anchors.fill: parent
        RectangularGlow {
            id: effect
            anchors.fill: rect
            glowRadius: 10
            spread: 0.2
            color: "#406A6F76"
            cornerRadius: rect.radius + glowRadius
        }
        Rectangle {
            id: rect
            color: "white"
            anchors.centerIn: parent
            width: registerWindow.width - 40
            height: registerWindow.height - 40
            radius: 4
			
			MouseArea {
				id:dragparentwindow
				width: parent.width
				height: 57
				property real lastMouseX: 0
				property real lastMouseY: 0
				onPressed: {
					lastMouseX = mouseX
					lastMouseY = mouseY
				}
				onMouseXChanged: registerWindow.x += (mouseX - lastMouseX)
				onMouseYChanged: registerWindow.y += (mouseY - lastMouseY)
			}
			
			Rectangle{
				id:titlebar
				width: parent.width
				Rectangle{
					id:appclose
					height: titlebar_wrapper_size
					y:0
					width: titlebar_wrapper_size
					anchors.right: parent.right
					Text{
						text: "×"
						anchors.horizontalCenter: parent.horizontalCenter
						font.pointSize: 20
					}
					MouseArea{
						width: parent.width
						height: parent.height
						hoverEnabled: true
						onEntered: appclose.color="#ddd"
						onExited: appclose.color="#fff"
						onClicked: Qt.quit()
					}
				}
				Rectangle{
					id:appminimize
					height: titlebar_wrapper_size
					y:0
					width: titlebar_wrapper_size
					anchors.right: appclose.left
					Text{
						text: '-'
						font.family: "Microsoft Yahei"
						anchors.horizontalCenter: parent.horizontalCenter
						font.pointSize: 15
					}
					MouseArea{
						width: parent.width
						height: parent.height
						hoverEnabled: true
						onEntered: appminimize.color="#ddd"
						onExited: appminimize.color="#fff"
						onClicked: registerWindow.visibility = Window.Minimized
					}
				}
				
				Text{
					text:"XTE"
					font.family: "Microsoft Yahei"
					font.pointSize: 85
					anchors.horizontalCenter: parent.horizontalCenter
					y:70
				}

				TextField{
					id:registername
					background: Rectangle {
						border.color: "#0000CD"
						border.width: 1
						radius: 5
						antialiasing:true
					 }
					width:400
					height:50
					y:420
					font.pointSize: 17
					font.family: "Microsoft Yahei"
					placeholderText: " Enter a nickname ..."
					anchors.horizontalCenter: parent.horizontalCenter
				}

				Button{
					id:login
					text:"Login"
					background: Rectangle {
						anchors.fill: parent
						radius: 3
						color: login.down ? "#0084ff" :
								 login.hovered ? "#1AAD19" : "#0084ff"

					}
					anchors.horizontalCenter: parent.horizontalCenter
					anchors.top: registername.bottom
					anchors.topMargin: 17
					font.family: "Microsoft Yahei"
					font.pointSize: 22
					onClicked: startLogin()
				}
			}
        }				
    }
}
  1. qml中的主界面是Rectangle，可以新建一个普通的widget，然后在widget类中新建QQuickView m_pQmlContainer = new QQuickView();然后根据这个QQuickView产生一个widget，作为当前窗口的子窗口，然后将当前窗口的标题栏隐藏。通过自绘来实现阴影。有个问题，MessageDialog弹出的时候，会有警告，并且不是模态的框。QQuickView(0x2de9437b5b0) must be a top level window
    main.cpp
#include <QApplication>
#include <QQuickView>
#include "mainWidget.h"
#include <QDebug>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QApplication app(argc, argv);
	MainWidget mainWidget;
	mainWidget.SetQmlFile(QStringLiteral("qrc:/main.qml"));
	mainWidget.show();  
	
    return app.exec();
}

mainWidget.h

#ifndef __MAIN_WIDGET_H_
#define __MAIN_WIDGET_H_
#include <QQuickView>
#include <QWidget>
#include <QPixmap>
#include <QPaintEvent>

class MainWidget : public QWidget
{
	Q_OBJECT
public:
	explicit MainWidget(QWidget *parent = nullptr);
	~MainWidget();
	void SetQmlFile(QString strQmlFile);
	
private:
	QQuickView *m_pQmlContainer;
	QPixmap m_shadow;
	
protected:
	void paintEvent(QPaintEvent *e);
};

#endif

mainWidget.cpp

#include "mainWidget.h"
#include <QHBoxLayout>
#include <QQmlContext>
#include <QDebug>
#include <QPainter>

MainWidget::MainWidget(QWidget *parent): QWidget(parent),m_shadow(":/window_shadow.png")
{
	m_pQmlContainer = new QQuickView();
    QHBoxLayout* layout = new QHBoxLayout(this);
	QWidget* pWidget = QWidget::createWindowContainer(m_pQmlContainer,this);
	
	layout->addWidget(pWidget);
	layout->setContentsMargins(5,3,5,7);
	setLayout(layout);
	
	setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinimizeButtonHint);	
	m_pQmlContainer->rootContext()->setContextProperty("window",this);
	setFixedSize(910,610);
}

MainWidget::~MainWidget()
{
	
}

void MainWidget::SetQmlFile(QString strQmlFile)
{
	m_pQmlContainer->setSource(strQmlFile);
}

void MainWidget::paintEvent(QPaintEvent* e)
{
	QPainter painter(this);

    QRect bottom(5, 136, 200, 7);
    QRect top(5, 0, 200, 3);
    QRect left(0, 3, 5, 133);
    QRect right(205, 3, 5, 133);
    QRect topRight(205, 0, 5, 3);
    QRect topLeft(0, 0, 5, 3);
    QRect bottomLeft(0, 136, 5, 7);
    QRect bottomRight(205, 136, 5, 7);

    QRect tBottom(5, this->height() - 7, this->width() - 10, 7);
    QRect tTop(5, 0, this->width() - 10, 3);
    QRect tLeft(0, 3, 5, this->height() - 10);
    QRect tRight(this->width() - 5, 3, 5, this->height() - 10);
    QRect tTopLeft(0, 0, 5, 3);
    QRect tTopRight(this->width() - 5, 0, 5, 3);
    QRect tBottomLeft(0, this->height() - 7, 5, 7);
    QRect tBottomRight(this->width() - 5, this->height() - 7, 5, 7);

    painter.drawPixmap(tBottom, m_shadow, bottom);
    painter.drawPixmap(tTop, m_shadow, top);
    painter.drawPixmap(tLeft, m_shadow, left);
    painter.drawPixmap(tRight, m_shadow, right);
    painter.drawPixmap(tTopRight, m_shadow, topRight);
    painter.drawPixmap(tTopLeft, m_shadow, topLeft);
    painter.drawPixmap(tBottomLeft, m_shadow, bottomLeft);
    painter.drawPixmap(tBottomRight, m_shadow, bottomRight);
	

}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.0
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.2

Rectangle {
    id: loginWin
	anchors.fill: parent
    SystemPalette { id: activePalette }

    //背景图片
    Image
    {
        id: background
        anchors { top: parent.top; bottom: parent.bottom }
        anchors.fill: parent
        source: "./background.jpeg"
        fillMode: Image.PreserveAspectCrop
    }
	
	MouseArea {
		anchors.fill: parent
		property variant previousPosition
		onPressed: {
			previousPosition = Qt.point(mouseX,mouseY)
		}
		onPositionChanged: {
			if(pressedButtons == Qt.LeftButton){
				var dx = mouseX - previousPosition.x
				var dy = mouseY - previousPosition.y
				window.pos = Qt.point(window.pos.x + dx,window.pos.y + dy)
			}
		}
	}
	
	MessageDialog {
		id:id_mesDialog
		title: "提示框"
		icon: StandardIcon.Question
		text: ""
		standardButtons: StandardButton.Ok
		Component.onCompleted: visible = false
	}
	
	function login()
	{
		var userName = line.text
		var password = linePassword.text
		if( userName == "admin" && password == "123456" ){
			id_mesDialog.icon = StandardIcon.Information
			id_mesDialog.text = "登陆成功"
			
			id_mesDialog.open()
		}else{
			id_mesDialog.icon = StandardIcon.Critical
			id_mesDialog.text = "用户名或密码错误"
			id_mesDialog.open()
		}
	}

    //顶栏
    Item
    {
        id: topBar
        width: loginWin.width; height: loginWin.height*0.05
        anchors.top: loginWin.top
        anchors.topMargin: 20

        Text
        {
            id: title
            anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
            text: "登陆"
            font.bold: true
            font.pointSize: loginWin.height * 0.05 * 0.7
            color: "dark red"
        }
    }

    //空白栏
    Item
    {
        id: space
        width: loginWin.width; height: loginWin.height * 0.1
        anchors.top: topBar.bottom
    }	

    // 登录框
    Rectangle {
        id: loginRect
        width: loginWin.width * 0.8
        height: loginWin.height * 0.3
        anchors { top: space.bottom; horizontalCenter: parent.horizontalCenter }
        border.color: "#707070"
        color: "transparent"

        LineInput
        {
            id: line
            width: loginRect.width * 0.8; height: loginRect.height * 0.2
            fontSize:height * 0.7
            anchors { horizontalCenter: loginRect.horizontalCenter; top: loginRect.top; topMargin: 8 }
            hint: "请输入用户号"
        }

        LineInput
        {
			id: linePassword
            width: loginRect.width * 0.8; height: loginRect.height * 0.2
            fontSize:height * 0.7
            anchors { horizontalCenter: loginRect.horizontalCenter; bottom: loginButton.top;  bottomMargin: loginRect.height * 0.1 }
            hint: "请输入密码"
        }

        Button
        {
            id: loginButton
            width: loginRect.width * 0.35; height: loginRect.height * 0.2
            anchors { left: loginRect.left; leftMargin: 28; bottom: loginRect.bottom; bottomMargin: 8 }
            text: "登陆"
            onClicked: login()
        }

        Button
        {
            id: quitButton
            width: loginRect.width * 0.35; height: loginRect.height * 0.2
            anchors { right: loginRect.right; rightMargin: 28; bottom: loginRect.bottom; bottomMargin: 8 }
            text: "退出"
            onClicked: window.close()
        }
    }
}

Button.qml

import QtQuick 2.0

Rectangle {
    id: container

    property string text: "Button"

    signal clicked

    width: buttonLabel.width + 20; height: buttonLabel.height + 5
    border { width: 1; color: Qt.darker(activePalette.button) }
    antialiasing: true
    radius: 8

    // color the button with a gradient
    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: {
                if (mouseArea.pressed)
                    return activePalette.dark
                else
                    return activePalette.light
            }
        }
        GradientStop { position: 1.0; color: activePalette.button }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: container.clicked();
    }

    Text {
        id: buttonLabel
        anchors.centerIn: container
        color: activePalette.buttonText
        text: container.text
    }
}

LineInput.qml

import QtQuick 2.0

FocusScope {
    id: wrapper

    // 定义可通过元对象系统访问的属性
    property alias text: input.text
    property alias hint: hint.text
    property int fontSize: 18

    // 自定义信号
    signal accepted

    Rectangle {
        anchors.fill: parent
        border.color: "#707070"
        color: "#c1c1c1"
        radius: 4

        // 输入栏隐藏文本
        Text {
            id: hint
            anchors { fill: parent; leftMargin: 14 }
            verticalAlignment: Text.AlignVCenter
			horizontalAlignment: input.activeFocus ? Text.AlignLeft : Text.AlignHCenter
            text: "Enter word"
            font.pixelSize: fontSize
            color: "#707070"
            opacity: input.length ? 0 : 1
        }

        TextInput {
            id: input
            focus: true
            anchors { left: parent.left; leftMargin: 14; right: parent.right; top: parent.top; bottom: parent.bottom }
            verticalAlignment: Text.AlignVCenter
			horizontalAlignment: Text.AlignHCenter
            font.pixelSize: fontSize
            color: "black"
            maximumLength: 8

            onAccepted: wrapper.accepted()
        }
    }
}

window_shadow.png是这样的,大小为210*143，并且主窗口设置了margin,layout->setContentsMargins(5,3,5,7)，留出来的边框用于自绘阴影。
window_shadow.png的效果

u010822106
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML实现窗口无边框以及可拖动拉伸
06-22
为了实现无边框窗口，我们需要将`ApplicationWindow`的`flags`属性设置为`Qt::FramelessWindowHint`。这样，窗口就会失去默认的边框和标题栏。 ```qml import QtQuick 2.0 import QtQuick.Controls 2.5 ...
QML 阴影边框实现
Marrrrrco的博客
06-09 1462
QML教程是真的难找， 项目为了实现UI设计里的四周带阴影的矩形框找了各种办法，dropShadow只能实现最多两个边的阴影，最后考虑用innerShadow，试过很多种写法都打不到效果，下面这种也是摸索了很久出来的，分享一哈。代码附上：图片显示的渐变效果是gradient属性...
QML无边框窗口（可拖动）
遇己
03-22 1013
-
QML实现 无边框 可移动 可缩放窗体
最新发布
qthello
04-26 335
利用QML实现无边框窗体，要求可移动，可缩放。
QML无边框最大化窗口时遮住了任务栏，程序默认置顶的问题
zjgo007的专栏
04-20 919
在QML窗口使用无边框，并且默认程序最大化显示后，此时程序显示默认自动变成了全屏显示，程序自动遮挡住了系统任务栏。当使用多屏幕显示时，切换不同程序，程序的界面显示错误，使用录屏软件录屏无效等莫名其妙的错误
qml DropShadow实现css drop-shadow的阴影效果
xiaoliming1的博客
06-19 609
前段时间ui给了一个带阴影效果的矩形框，费了一些力气才整出来，记录一下。
Qt/QML 窗口阴影边框实现
热门推荐
luoyayun361的专栏
03-23 1万+
前言在Qt界面开发中，很多时候为了UI的整体美观，都会在窗体添加阴影边框，这样会让整个窗体更加漂亮，用户体验会更好，那么，接下来介绍几种在项目中常用的添加阴影边框的方式，其中包括QWidget和QML两个体系的实现方法。而QGraphics体系的阴影边框实现和QWidget是一样的， 可以通用。正文一，QWidget实现阴影边框QWidget实现阴影边框有几种常用的方式，如下：1.设置带阴影边框的背
qml阴影的实现
weixin_42101997的博客
01-19 2895
qml代码阴影的实现 注意：隐隐外层必须是Rectangle组件。 import QtQuick 2.5 import QtQuick.Window 2.2 import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick.Window 2.0 import QtQuick.Controls 1.4 import QtQuick...
QML c++交互 无边框 透明 可以拖动的 窗口的 demo
03-16
在本文中，我们将深入探讨如何使用Qt的QML与C++进行交互，创建一个无边框、透明且可拖动的窗口。QML是Qt框架的一部分，它提供了一种声明式语言来构建用户界面，而C++则可以用于处理更底层的逻辑和系统交互。这种结合...
qml无边框窗口拉伸闪烁解决方案
06-17
qml，实现无边框窗口移动，最大化和最小化，拉伸等功能，解决无边框窗口拉伸窗口闪烁和抖动问题。 下载多了出项目例子！！！！！！！！！！！
QML无边框窗口，兼容所有平台
04-19
本文将深入探讨如何利用QML创建一个无边框窗口，并确保这个窗口在所有平台上具有良好的兼容性。 标题"QML无边框窗口，兼容所有平台"暗示了我们将讨论如何使用QML来创建一个没有传统操作系统边框的窗口，同时保持跨...
QML无边框窗口，兼容windows（升级版）
04-19
在本文中，我们将深入探讨如何在QML中创建无边框窗口，并且使其在Windows操作系统上兼容。QML，全称Quantum MetaLanguage，是Qt框架下的一种声明式编程语言，用于构建用户界面。无边框窗口在许多应用程序中被用作...
【Qt6 QML 无边框可拖动+登录窗口切换】
redfox6843的专栏
05-19 434
【Qt6 QML 无边框可拖动+登录窗口切换】
最简单的方式实现QML无边框窗口边缘拖动调整大小
luoyayun361的专栏
02-11 5445
前言 使用Qt在开发桌面程序时，通常会去除默认的程序边框，从而实现自定义的标题栏。然而当设置窗口属性为Qt.FramelessWindowHint后，窗口的拖动，以及在边缘拖动缩放的功能就没有了，在以前的Qt版本中，就需要自己写很多繁琐代码来实现这些功能，尽管Qt为此也提供了一个类 QSizeGrip，但是它仅仅只能在窗口角落进行调整，在窗口上下左右边缘是不行的。 庆幸的是，在Qt5.15中官方在QWindow中提供了两个新的方法：startSystemMove和startSystemResize。这些方法
QML阴影（Shadows）
世界需要程序员，而我就是其中一员！
05-08 636
2D对象的路径可以使用阴影增强显示效果。阴影是一个区域的轮廓线使用偏移量，颜色和模糊来实现的。所以你需要指定一个阴影颜色（shadowColor），阴影X轴偏移值（shadowOffsetX），阴影Y轴偏移值（shadowOffsetY）和阴影模糊（shadowBlur）。这些参数的定义都使用2D context来定义。2D context是唯一的绘制操作接口。
【QML记录】无边框窗口实现拖动
BlackNigg的博客
11-08 799
需要拖动自定义菜单栏时，若窗口在最大化状态即先进行窗口化再移动。
qt qml 无边框无下划线能显示默认文字的 文本框
weixin_44945317的博客
09-14 735
qt qml 无边框无下划线能显示默认文字的 文本
qml button无边框
11-02
要设置QML按钮无边框，可以使用Qt的FramelessWindowHint属性。以下是一些可能的实现方法： 1. 在Widget类中，使用QQmlApplicationEngine加载QML文件时，设置engine的FramelessWindowHint属性： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值