qt 练习题目2 完整记录

最新推荐文章于 2024-04-12 22:20:34 发布

wowocpp

最新推荐文章于 2024-04-12 22:20:34 发布

阅读量764

点赞数 2

分类专栏： qt

本文链接：https://blog.csdn.net/wowocpp/article/details/114261946

版权

qt 专栏收录该内容

150 篇文章 15 订阅

订阅专栏

qt 练习题目2 完整记录

(感谢开源作者)

smart_manager_app.rar
F:\qt_work\qt5_code_plus_jack\app_example\smart_manager_app

在这里插入图片描述
(保证按照这个文章，一遍就能成功，各种细节，一定要具备)。
最后有源码下载地址

1

首先创建工程 smart_manager_app
在这里插入图片描述

2

添加类的名称 SmartManagerWidget
在这里插入图片描述

3

复制 image目录到项目目录下面并且添加 main.qrc 文件。
在这里插入图片描述

添加前缀

添加文件

4

修改ui文件
在这里插入图片描述

5

在主widget窗口中添加两个子widget控件。
上面是 widgetTitle ------ QWidget，---- 高度固定70
下面是 stackedWidget ------ QStackedWidget

在这里插入图片描述
把widgetTitle 拉大一点，按照理想的布局，放在那个地方。
先不要给 SmartManagerWidget添加一个垂直布局。

6

继续往 widgetTitle 里面添加子控件
labIco
labTitle
widgetTop
widgetMenu
horizontalSpacer

在这里插入图片描述

7

依次添加
labIco
labTitle
widgetTop

在widgetTop 中添加 ToolButton
在这里插入图片描述

设置QToolButton的时候，
可以提前设置一下iconsize为32x32
然后就是 button的setMinimumWidth 为85

第一个 ToolButton做好之后，
复制第一个ToolButton，粘贴3次。
然后修改objectname text 和icon
这样能够保证大小一致，其他属性一致

8 重点设置

添加widgetMenu
然后添加：btnMenu_Min

在这里插入图片描述
复制2个 button ，
修改 object_name

添加一个垂直弹簧
在这里插入图片描述

重点: widgetTitle 之所以能够保持70这个长度，
是和这个地方的 sizeHint High = 40 加上 btnMenu_Min的最小高度为30.
一起决定了widgetTitle 的 sizeHint是70.
然后 widgetTitle的高度 sizepolicy 为Fixed.
Fixed 是依据sizeHint 的尺寸做的决定。

9

然后在 widgetTop和widgetMenu之间添加一个水平弹簧
在这里插入图片描述

10

按照顺序修改布局

修改widgetMenu为网格布局
修改 space 和margin 为 0

修改widgetTop为水平布局
修改 space 和margin 为0

修改widgetTitle为水平布局
修改 space = 7和margin= 0

修改SmartManagerWidget为垂直布局
修改 space =0 和margin =0

一定要按照顺序
子控件先添加布局
然后是父控件，然后再上一层。
这样。
不然widgetTitle ，有可能会被stackedWidget覆盖。
应该是 widgetTitle在自动布局的时候，会根据里面的子控件的尺寸，计算得出一个sizehint
然后这个sizehint，是和自动布局的sizepolicy 相关的。
在这里插入图片描述

11

在这里插入图片描述
自动布局的时候，Fixed属性和 geometry没有关系。
Fixed和 sizeHint属性有关系，
只有弹簧控件可以设置sizeHint，其他控件不能直接设置。

12

运行一下，看看效果
在这里插入图片描述
给widgetTitle 添加，完整的标题栏。
类似如下的形式。

在这里插入图片描述
fontawesome

void SmartManagerWidget::SetWidgetTitlePanel()
{
    FontAwesomeIcons::Instance().setIcon((QAbstractButton*)ui->btnMenu_Min,
                                         //QChar(0xf068),
                                         QChar(int(FontAwesomeIcons::IconIdentity::icon_minus)),
                                         12);

    FontAwesomeIcons::Instance().setIcon((QAbstractButton*)ui->btnMenu_Max,
                                         //QChar(0xf067),
                                         QChar(int(FontAwesomeIcons::IconIdentity::icon_plus)),
                                         12);

    FontAwesomeIcons::Instance().setIcon((QAbstractButton*)ui->btnMenu_Close,
                                         //QChar(0xf00d),
                                         QChar(int(FontAwesomeIcons::IconIdentity::icon_remove)),
                                         12);


    FontAwesomeIcons::Instance().setIcon((QLabel*)ui->labIco,
                                         //QChar(0xf073),
                                         QChar(int(FontAwesomeIcons::IconIdentity::icon_calendar)),
                                         30);

    ui->labTitle->setText("智能访客管理平台");
    ui->labTitle->setFont(QFont("Microsoft Yahei", 20));
}

13

给widgetTitle界面的QToolButton添加qss
使它看起来美观一些

在之前设置的widgetTop里面，设置QToolButton的时候，
可以提前设置一下iconsize为32x32
然后就是 button的setMinimumWidth 为85

通过 setMinimumWidth 这个方法，使大小不一的toolbutton，变得大小一致。

这样，就不用再添加如下代码拉

    QSize icoSize(32, 32);
    int icoWidth = 85;

    ui->btnMain->setIconSize(icoSize);
    ui->btnMain->setMinimumWidth(icoWidth);

    ui->btnConfig->setIconSize(icoSize);
    ui->btnConfig->setMinimumWidth(icoWidth);

    ui->btnData->setIconSize(icoSize);
    ui->btnData->setMinimumWidth(icoWidth);

    ui->btnHelp->setIconSize(icoSize);
    ui->btnHelp->setMinimumWidth(icoWidth);

    ui->btnExit->setIconSize(icoSize);
    ui->btnExit->setMinimumWidth(icoWidth);

需要把下面这个吃透

    QString qssA = "QWidget QAbstractButton{  \
            border-style:none;           \
            border-radius:0px;           \
            padding:5px;                 \
            color:#DCDCDC;               \
            background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #484848,stop:1 #383838);  \
            }                            \
            QWidget QAbstractButton:hover,QWidget QAbstractButton:pressed,QWidget QAbstractButton:checked{   \
            border-style:solid;                          \
            border-width:0px 0px 2px 0px;                \
            padding:4px 4px 2px 4px;                     \
            border-color:#00BB9E;                        \
            background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252);    \
            }";

    ui->widgetTop->setStyleSheet( qssA);

在这里插入图片描述

14 给widgetMenu加入qss特效

在这里插入图片描述

void SmartManagerWidget::SetWidgetMenuPanel()
{
    QString qssB = "QToolButton#btnMenu,QPushButton#btnMenu_Min,QPushButton#btnMenu_Max,QPushButton#btnMenu_Close{ \
            border-radius:3px;   \
            color:#DCDCDC;       \
            padding:3px;         \
            margin:0px;          \
            background:none;     \
            border-style:none;   \
            }                    \
            QToolButton#btnMenu:hover,QPushButton#btnMenu_Min:hover,QPushButton#btnMenu_Max:hover{    \
            color:#FFFFFF;                                                                            \
            margin:1px 1px 2px 1px;                                                                   \
            background-color:rgba(51,127,209,230);                                                    \
            }                                                                                         \
            QPushButton#btnMenu_Close:hover{                                                          \
            color:#FFFFFF;                                                                            \
            margin:1px 1px 2px 1px;                                                                   \
            background-color:rgba(238,0,0,128);                                                       \
            }";

     ui->widgetMenu->setStyleSheet( qssB);
}

15

设置stackedWidget添加页面
page1
page2
page3
page4

在这里插入图片描述

15

给widgetTop 对应的按钮添加事件

//设置顶部导航按钮
QList<QToolButton *> tbtns = ui->widgetTop->findChildren<QToolButton *>();
foreach (QToolButton *btn, tbtns) {
    connect(btn, SIGNAL(clicked()), this, SLOT(widgetTopToolButtonClick()));
}
void SmartManagerWidget::widgetTopToolButtonClick()
{
    QToolButton *b = (QToolButton *)sender();
    QString name = b->text();

    QList<QToolButton *> tbtns = ui->widgetTop->findChildren<QToolButton *>();
    foreach (QToolButton *btn, tbtns) {
        if (btn == b) {
            btn->setChecked(true);
        } else {
            btn->setChecked(false);
        }
    }

    if (name == "主界面") {
        ui->stackedWidget->setCurrentIndex(0);
    } else if (name == "系统设置") {
        ui->stackedWidget->setCurrentIndex(1);
    } else if (name == "警情查询") {
        ui->stackedWidget->setCurrentIndex(2);
    } else if (name == "调试帮助") {
        ui->stackedWidget->setCurrentIndex(3);
    } else if (name == "用户退出") {
        exit(0);
    }
}

16

给widgetMenu 对应的按钮添加事件

void SmartManagerWidget::on_btnMenu_Min_clicked()
{
    showMinimized();
}

void SmartManagerWidget::on_btnMenu_Max_clicked()
{
    static bool max = false;
    static QRect location = this->geometry();

    if (max) {
        this->setGeometry(location);
    } else {
        location = this->geometry();
        this->setGeometry(qApp->desktop()->availableGeometry());
    }

    this->setProperty("canMove", max);
    max = !max;
}

void SmartManagerWidget::on_btnMenu_Close_clicked()
{
    close();
}

在这里插入图片描述

在这里插入图片描述
ui->widgetTitle->setPalette(QPalette(QColor("#44444444")));

17

给widgetTitle 添加qss

    QString qssC = ".QWidget{ \
            background:#484848; \
            }\
            .QLabel{\
              color:#FFFFFF;    \
            }";
   ui->widgetTitle->setStyleSheet(qssC);

在这里插入图片描述

18

给stackedWidget的page1页面
添加控件，如下所示
在这里插入图片描述

在这里插入图片描述

19

在 widgetLeftMain里面
添加一个ToolButton控件
在这里插入图片描述

然后复制这个toolbutton控件成3个
然后修改txt 和objectName

然后添加一个垂直弹簧

然后是widgetLeftMain垂直布局

20

一对多就用QMultiMap
QMap<QPushButton *, QImage *>
单从数据存储方面，我个人常用QMultiHash。

请问一下比如有多个 button，每个button，各自对应5个图片。
怎么样，定义变量和数据结构，使button和5个图片，是对应的，
就是通过这个button，能够找到这5个图片变量。

21

page2 页面设置

在这里插入图片描述

page3

在这里插入图片描述

去掉边框

this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint);

添加
private:
QPoint m_startPoint;

然后添加:
protected:
void mousePressEvent(QMouseEvent *event);
void mouseMoveEvent(QMouseEvent *event);

void ManagePlatWidget::mousePressEvent(QMouseEvent *event)
{
    if ((event->button() == Qt::LeftButton)||(event->button() == Qt::RightButton) ){
        m_startPoint = frameGeometry().topLeft() - event->globalPos();
        qDebug() <<"mousePressEvent m_startPoint = "<< m_startPoint <<endl ;
    }
}

void ManagePlatWidget::mouseMoveEvent(QMouseEvent *event)
{

        //move方法的作用是设置QWidget部件的pos坐标的
        //即设置左上角的坐标
        //通过设置左上角的坐标，来达到移动窗口的目的
        qDebug() <<"mouseMoveEvent m_startPoint = "<< m_startPoint <<",event button = "<<event->button() <<endl ;
        this->move(event->globalPos() + m_startPoint);

}

在这里插入图片描述

遇到问题

调色板的作用和文字颜色之间的关系
//qApp->setPalette(QPalette(QColor("#44444444")));

下面这个图片
在这里插入图片描述
经过qss之后，得到的是下面的图片。

专门写一个demo

下面的图片，
在这里插入图片描述
得到的是如下的效果

为 border 等专门写一个 demo.
为 setPalette 专门写一个demo

整体源码

https://download.csdn.net/download/wowocpp/15542035
smart_manager_app.rar

wowocpp

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
qt 练习题目2 完整记录

qt 练习题目2 完整记录(保证按照这个文章，一遍就能成功，各种细节，一定要具备)。1首先创建工程 smart_manager_app2添加类的名称 SmartManagerWidget3复制 image目录到项目目录下面并且添加 main.qrc 文件。添加前缀添加文件4修改ui文件5在主widget窗口中添加两个子widget控件。上面是 widgetTitle ------ QWidget，---- 高度固定70下面是 stackedWi
复制链接

扫一扫