当前位置：网站首页>Qt界面优化：Qt窗体控件设置

Qt界面优化：Qt窗体控件设置

2022-08-08 18:58:00 【51CTO】

Qt界面优化：Qt窗体控件设置

文章目录

Qt界面优化：Qt窗体控件设置
一、效果图

1.鼠标移动点击效果
2. Qt托盘效果

二、使用步骤

1. 背景图片的添加
2. 控件样式的更改
3. Qt窗体透明化
4. Qt托盘的添加
5. Qt去边框的添加

总结

一、效果图

1.鼠标移动点击效果

Qt界面优化：Qt窗体控件设置_个人开发

2. Qt托盘效果

相信大家在使用QQ，微信，网易云等应用时，会发现他们在关闭界面后，会最小化到右下方，生成一个小图标，点击该图标后，便又会弹出相关界面，此即为托盘效果。

如下图所示，关闭界面后，所做软件不会直接关闭，会在右下方生成一个小图标，双击后，会重新打开该界面，右击，会弹出菜单栏，可进行关闭、最大化和最小化等操作，同时，我也加入了一个弹窗按钮，单击该图标，会弹出相关的通知，如下图2所示。

Qt界面优化：Qt窗体控件设置_qt_02

Qt界面优化：Qt窗体控件设置_ui_03

二、使用步骤

1. 背景图片的添加

.h部分（添加到私有属性中）：

       
       QLabel 
       
       * 
       
       bglabel;
      
1.

.cpp部分：

       
       //背景图片的添加
       
       bglabel
       
       =
       
       ui
       
       ->
       
       label;
       
       bglabel 
       
       ->
       
       setPixmap(
       
       QPixmap(
       
       ":images//background.png"));
       
       //此处为你要添加的图片路径
       
       bglabel 
       
       ->
       
       setScaledContents(
       
       true);
      
1.
2.
3.
4.

.cpp第二行为你要添加的图片的路径，我这里添加的路径结果目录为pro同级目录中的images文件中的background.png图片。

.ui界面：

将label控件添加到窗体中，右击，选择放到后面选项，即可实现背景的更改（如果添加的label被控件遮挡，需要将控件设置为透明，才可完全显示出来）。

注：也可以通过更改样式表来改变控件，如背景，字体颜色，渐变等，但背景添加效果与使用label，通过代码来实现相比，略显逊色。

2. 控件样式的更改

Qt控件样式的更改，可以通过两种方法实现，一种为直接通过ui界面中右击控件，选择更改样式表来实现控件颜色，背景，渐变，字体样式，颜色等的更改。
还可以通过如下图的代码来实现相关的控件优化：

.cpp部分：

       
       //控件的透明化
       
       ui
       
       ->
       
       tabWidget
       
       ->
       
       setStyleSheet(
       
       "background-color:rgba(0,0,0,0);");
       
       //tabWidget为你想要修改的控件的名称
       
       //按钮的美化
       
       ui
       
       ->
       
       pushButton
       
       ->
       
       setStyleSheet(
       
       //正常状态样式
       
       "QPushButton{"
       
       "background-color:#E4F2F8;"
       
       //设置按钮背景色
       
       "border-radius:10px;"
       
       //设置圆角半径
       
       "}"
       
       "QPushButton:hover{"
       
       "background-color:#999999;"
       
       //设置按钮点击时的背景颜色
       
       "color:white;"
       
       "}");
       
       //设置字体颜色
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

3. Qt窗体透明化

.cpp部分：

       
       setWindowOpacity(
       
       0.85); 
       
       //0.85为透明度所占比，数字越小，透明度越低
      
1.

4. Qt托盘的添加

.h部分：

       
       private:
       
       QSystemTrayIcon 
       
       *
       
       SysIcon;
       
       QAction 
       
       *
       
       min; 
       
       //最小化
       
       QAction 
       
       *
       
       max; 
       
       //最大化
       
       QAction 
       
       *
       
       restor; 
       
       //恢复
       
       QAction 
       
       *
       
       quit; 
       
       //退出
       
       QMenu 
       
       *
       
       menu;
       
       void 
       
       closeEvent(
       
       QCloseEvent 
       
       * 
       
       event);
       
       public 
       
       slots:
       
       void 
       
       on_activatedSysTrayIcon(
       
       QSystemTrayIcon::
       
       ActivationReason 
       
       reason);
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

.cpp部分

       
       //托盘
       
       menu 
       
       = 
       
       new 
       
       QMenu(
       
       this);
       
       menu
       
       ->
       
       setStyleSheet(
       
       "background-color:rgba(255,255,255);");
       
       QIcon 
       
       icon(
       
       ":images//CalenderLogo.png");
       
       SysIcon 
       
       = 
       
       new 
       
       QSystemTrayIcon(
       
       this);
       
       SysIcon
       
       ->
       
       setIcon(
       
       icon);
       
       SysIcon
       
       ->
       
       setToolTip(
       
       "YXSmarter");
       
       min 
       
       = 
       
       new 
       
       QAction(
       
       "窗口最小化",
       
       this);
       
       connect(
       
       min,
       
       &
       
       QAction::
       
       triggered,
       
       this,
       
       &
       
       MainWindow::
       
       hide);
       
       max 
       
       = 
       
       new 
       
       QAction(
       
       "窗口最大化",
       
       this);
       
       connect(
       
       max,
       
       &
       
       QAction::
       
       triggered,
       
       this,
       
       &
       
       MainWindow::
       
       showMaximized);
       
       restor 
       
       = 
       
       new 
       
       QAction(
       
       "恢复原来的样子",
       
       this);
       
       connect(
       
       restor,
       
       &
       
       QAction::
       
       triggered,
       
       this,
       
       &
       
       MainWindow::
       
       showNormal);
       
       quit 
       
       = 
       
       new 
       
       QAction(
       
       "退出",
       
       this);
       
       connect(
       
       quit,
       
       &
       
       QAction::
       
       triggered,
       
       qApp,
       
       &
       
       QApplication::
       
       quit);
       
       connect(
       
       SysIcon,
       
       &
       
       QSystemTrayIcon::
       
       activated,
       
       this,
       
       &
       
       MainWindow::
       
       on_activatedSysTrayIcon);
       
       menu
       
       ->
       
       addAction(
       
       min);
       
       menu
       
       ->
       
       addAction(
       
       max);
       
       menu
       
       ->
       
       addAction(
       
       restor);
       
       menu
       
       ->
       
       addSeparator(); 
       
       //分割
       
       menu
       
       ->
       
       addAction(
       
       quit);
       
       SysIcon
       
       ->
       
       setContextMenu(
       
       menu);
       
       SysIcon
       
       ->
       
       show();
       
       close();
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

函数实现部分

       
       void 
       
       MainWindow::
       
       closeEvent(
       
       QCloseEvent 
       
       * 
       
       event){ 
       
       //关闭事件
       
       if(
       
       SysIcon
       
       ->
       
       isVisible())
       
          {
       
       this
       
       ->
       
       hide();
       
       event
       
       ->
       
       ignore();
       
          }
       
       else {
       
       event
       
       ->
       
       accept();
       
          }
       
}
       
       void 
       
       MainWindow::
       
       on_activatedSysTrayIcon(
       
       QSystemTrayIcon::
       
       ActivationReason 
       
       reason)
       
{ 
       
       //对托盘中的菜单项的事件处理
       
       switch (
       
       reason) {
       
       case 
       
       QSystemTrayIcon::
       
       Trigger:
       
       SysIcon
       
       ->
       
       showMessage(
       
       "YXSmarter",
       
       "欢迎使用云曦智划！");
       
       break;
       
       case 
       
       QSystemTrayIcon::
       
       DoubleClick:
       
       this
       
       ->
       
       show();
       
       break;
       
       default:
       
       break;
       
    }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

5. Qt去边框的添加

.cpp部分

       
       this
       
       ->
       
       setWindowFlags(
       
       Qt::
       
       FramelessWindowHint 
       
       | 
       
       Qt::
       
       WindowSystemMenuHint 
       
       | 
       
       Qt::
       
       WindowMinimizeButtonHint);
      
1.

窗体可拖动

.h部分：

       
       private:
       
       void 
       
       mouseMoveEvent(
       
       QMouseEvent 
       
       *
       
       event);
       
       void 
       
       mousePressEvent(
       
       QMouseEvent 
       
       *
       
       event);
       
       void 
       
       mouseReleaseEvent(
       
       QMouseEvent 
       
       *
       
       event);
       
       QPoint 
       
       z;
      
1.
2.
3.
4.
5.

.cpp部分

       
       void 
       
       MainWindow::
       
       mouseMoveEvent(
       
       QMouseEvent 
       
       *
       
       event)
       
{
       
       QWidget::
       
       mouseMoveEvent(
       
       event);
       
       QPoint 
       
       y 
       
       =
       
       event
       
       ->
       
       globalPos(); 
       
       //鼠标相对于桌面左上角的位置，鼠标全局位置
       
       QPoint 
       
       x 
       
       =
       
       y
       
       -
       
       this
       
       ->
       
       z;
       
       this
       
       ->
       
       move(
       
       x);
       
}
       
       void 
       
       MainWindow::
       
       mousePressEvent(
       
       QMouseEvent 
       
       *
       
       event)
       
{
       
       QWidget::
       
       mousePressEvent(
       
       event);
       
       QPoint 
       
       y 
       
       =
       
       event
       
       ->
       
       globalPos(); 
       
       //鼠标相对于桌面左上角，鼠标全局位置
       
       QPoint 
       
       x 
       
       =
       
       this
       
       ->
       
       geometry().
       
       topLeft();   
       
       //窗口左上角相对于桌面位置，窗口位置
       
       this
       
       -> 
       
       z 
       
       =
       
       y
       
       -
       
       x ;
       
       //定值不变
       
}
       
       void 
       
       MainWindow::
       
       mouseReleaseEvent(
       
       QMouseEvent 
       
       *
       
       event)
       
{
       
       QWidget::
       
       mouseReleaseEvent(
       
       event);
       
       this
       
       ->
       
       z
       
       =
       
       QPoint();
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.