【Qt 学习笔记】Qt窗口 | 浮动窗口 | QDockWidget的使用及说明


  • 博客主页:Duck Bro 博客主页
  • 系列专栏:Qt 专栏
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢请大家批评指出,及时修改
  • 感谢大家点赞👍收藏⭐评论✍

Qt窗口 | 浮动窗口 | QDockWidget的使用及说明

文章编号:Qt 学习笔记 / 50


一、浮动窗口

1. 什么是浮动窗口

浮动窗口是计算机图形界面中一种常见的窗口类型,它可以悬浮在其他窗口之上并且可以自由移动。浮动窗口通常被用于显示一些特定的信息或功能,例如实时监测数据、通知消息、弹出菜单等。浮动窗口可以在屏幕上的任何位置出现,用户可以根据需要将其拖动到合适的位置。


二、QDockWidget介绍

1. 简介

QDockWidget是Qt中的一个窗口部件,它提供了一个可停靠的面板,可用于显示和编辑各种内容。

QDockWidget可以在主窗口中创建并停靠在不同的位置,如左侧、右侧、顶部或底部。它可以通过拖动和放置的方式来改变其位置和大小。QDockWidget还可以嵌套在另一个QDockWidget内部,创建一个多级的停靠窗口布局。

2. 常用属性

titleBarWidget设置自定义的标题栏部件
features设置停靠窗口的功能,
可以使用QDockWidget的DockWidgetFeature枚举值
- DockWidgetClosable
- DockWidgetMovable
- DockWidgetFloatable
allowedAreas设置停靠窗口可以停靠的区域
可以使用Qt::DockWidgetArea枚举值
- LeftDockWidgetArea
- RightDockWidgetArea
- TopDockWidgetArea
- BottomDockWidgetArea
floating设置停靠窗口是否以浮动窗口的方式显示
widget设置停靠窗口中要显示的内容部件
objectName为停靠窗口设置唯一的对象名称,用于在代码中引用和操作该窗口

3. 常用方法

方法说明
setWidget(QWidget *widget)设置QDockWidget的内容部件
widget()获取QDockWidget的内容部件
setTitleBarWidget(QWidget *widget)设置QDockWidget的标题栏部件
titleBarWidget()获取QDockWidget的标题栏部件
setAllowedAreas(Qt::DockWidgetAreas areas)设置QDockWidget允许停靠的区域
allowedAreas()获取QDockWidget允许停靠的区域
setFloating(bool floating)设置QDockWidget是否浮动
isFloating()判断QDockWidget是否浮动
setMinimumSize(const QSize &size)设置QDockWidget的最小尺寸
setMaximumSize(const QSize &size)设置QDockWidget的最大尺寸
minimumSize()获取QDockWidget的最小尺寸
maximumSize()获取QDockWidget的最大尺寸
setWindowTitle(const QString &title)设置QDockWidget的窗口标题
windowTitle()获取QDockWidget的窗口标题

三、代码创建浮动窗口

1. 创建浮动窗口

浮动窗⼝的创建是通过 QDockWidget类 提供的构造⽅法 QDockWidget()函数 动态创建的

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDockWidget>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //创建浮动窗口
    QDockWidget* dockwidget = new QDockWidget();
    //使用 addDockWidget 方法, 把浮动窗口加入到子窗口中
    this->addDockWidget(Qt::BottomDockWidgetArea,dockwidget);
    //设置窗口标题
    dockwidget->setWindowTitle("浮动窗口");
}

MainWindow::~MainWindow()
{
    delete ui;
}

运行代码,中间的窗口就是浮动窗口
在这里插入图片描述

2. 设置浮动窗口允许停靠的位置

浮动窗⼝是位于中⼼部件的周围。可以通过 QDockWidget类 中提供 setAllowedAreas() 函数设置其
允许停靠的位置。

其中可以设置允许停靠的位置有:
• Qt::LeftDockWidgetArea 停靠在左侧
• Qt::RightDockWidgetArea 停靠在右侧
• Qt::TopDockWidgetArea 停靠在顶部
• Qt::BottomDockWidgetArea 停靠在底部
• Qt::AllDockWidgetAreas 以上四个位置都可停靠

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDockWidget>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //创建浮动窗口
    QDockWidget* dockwidget = new QDockWidget();
    //使用 addDockWidget 方法, 把浮动窗口加入到子窗口中
    this->addDockWidget(Qt::BottomDockWidgetArea,dockwidget);
    //设置窗口标题
    dockwidget->setWindowTitle("浮动窗口");
    //设置窗口只允许左和上停靠
    dockwidget->setAllowedAreas(Qt::LeftDockWidgetArea | Qt::TopDockWidgetArea);

}

MainWindow::~MainWindow()
{
    delete ui;
}

运行代码,浮动窗口只能在左和上边停靠
在这里插入图片描述


在这里插入图片描述

在HTML2Canvas将HTML内容转换为图像的过程中,字体显示尺寸有时可能会变小,这通常是由于浏览器和canvas之间的默认CSS渲染差异造成的。为了解决这个问题,你可以采取以下几个步骤: 1. 设置合适的font-size单位:使用`px`而不是`em`、`rem`或`vw`等相对单位,因为canvas对相对单位的处理可能不如预期。 ```html <canvas id="myCanvas"></canvas> <style> body, canvas { font-family: Arial, sans-serif; /* 使用一致的字体 */ font-size: 16px; /* 明确设置字体大小像素值 */ } </style> ``` 2. 预加载字体:如果你使用的是自定义字体,可以预先在HTML文档中定义并应用,确保canvas渲染前已经下载完成。 3. 使用canvas的measureText方法调整字体大小:虽然这个方法不能直接改变元素的实际大小,但它可以帮助你在渲染前计算文字的确切尺寸。 ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); let fontSize = 16; // 开始的字体大小 // 假设你有一个文本节点需要渲染 const textNode = document.querySelector('#myText'); const width = ctx.measureText(textNode.textContent).width; // 如果宽度小于预期,适当增加字体大小 while (width < expectedWidth) { fontSize += 1; ctx.font = `${fontSize}px Arial`; width = ctx.measureText(textNode.textContent).width; } ``` 4. 浏览器兼容性问题:对于一些老旧的浏览器,可能无法正确支持某些现代字体技术。在这种情况下,考虑提供备选方案,如使用系统默认字体或者提供字体替换服务。 注意:以上方法并不能保证完全解决所有情况,因为不同的浏览器可能有不同的渲染规则。如果问题依然存在,你可能需要查看具体的浏览器兼容性指南,或者尝试使用专门针对这类问题优化的库,比如html2canvas提供的配置选项或者其他的canvas渲染工具。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Duck Bro

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值