当前位置:   article > 正文

Qt开发 | Qt控件 | QTabWidget基本用法 | QListWidget应用详解 | QScrollArea应用详解

qtabwidget

一、QTabWidget基本用法

  QTabWidgetQt 框架中的一个类,它提供了一个选项卡式的界面,允许用户通过点击不同的标签页来切换不同的内容区域。它是 Qt Widgets 模块的一部分,通常用于创建具有多个页面的应用程序界面。

  • 创建QTabWidget

    #include <QTabWidget>
    
    QTabWidget *pTabWidget = new QTabWidget(this);
    
    • 1
    • 2
    • 3
  • 相关方法

    • 添加自定义tab(标签页)

      int insertTab(int index, QWidget *page, const QString &label);
      int insertTab(int index, QWidget *page, const QIcon &icon, const QString &label);
      
      • 1
      • 2
    • tab设置

      pTabWidget->setTabPosition(QTabWidget::West);   //设置tab的位置
      pTabWidget->setTabShape(QTabWidget::Triangular);    //梯形tab
      pTabWidget->setTabsClosable(true);  //显示关闭按钮
      pTabWidget->setMovable(true);       //tab可移动
      
      • 1
      • 2
      • 3
      • 4
    • 四个信号

      • void currentChanged(int index);

        这个信号在当前显示的标签页改变时发出。参数 index 表示新选中的标签页的索引。你可以连接这个信号到一个槽函数,以便在用户切换标签页时执行某些操作。

      • void tabCloseRequested(int index);

        当用户请求关闭一个标签页时(例如,如果启用了可关闭的标签页),这个信号会被发出。参数 index 表示请求关闭的标签页的索引。你可以连接这个信号到一个槽函数,以处理标签页关闭的逻辑,比如确认关闭操作或保存数据。

      • void tabBarClicked(int index);

        当用户点击标签栏中的标签时,这个信号会被发出。参数 index 表示被点击的标签页的索引。这个信号可以用来执行一些动作,比如更新标签页的显示内容或状态。

      • void tabBarDoubleClicked(int index);

        当用户双击标签栏中的标签时,这个信号会被发出。参数 index 表示被双击的标签页的索引。这个信号可以用于执行更复杂的操作,比如直接关闭标签页或触发特定的应用程序功能。

    • 关闭tab

      //当用户请求关闭一个标签页时,将指定标签页关闭
      connect(pTabWidget, &QTabWidget::tabCloseRequested, [=](int index){
              pTabWidget->removeTab(index);
      });
      
      • 1
      • 2
      • 3
      • 4
  • tab样式表

    /* 把显示界面向上移动 */
    QTabWidget::pane {
    	border-top:1px solid #EAEAEA;
    	position:absolute;
    	top:-0.1px;
    	background-color:black;
    }
    
    QTabBar::tab {
    	width:100px;
        height:50px;
    	font-size:16px;
    	font-family:Microsoft YaHei;
    	font-weight:400;
    	background:#FFFFFF;
    	border:2px solid #FFFFFF;
    	border-bottom-color:#FFFFFF;
    	border-top-left-radius:4px;
    	border-top-right-radius:4px;
    	padding:2px;
    }
    
    QTabBar::tab:selected {
    	color:#333333;
    	border-color:#FFFFFF;
    	border-bottom-color:#4BA4F2;
    }
    QTabBar::tab:!selected {
    	color:#B2B2B2;
    	border-color:#FFFFFF;
    	border-bottom-color:#FFFFFF;
    }
    
    • 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
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    QTabBar 是 Qt 框架中的一个类,它提供了一个用于 QTabWidget 的标签条(Tab Bar)。QTabBar 允许用户通过点击不同的标签来切换 QTabWidget 中的不同标签页。

    将样式表设置如上,可实现如下效果:

    image-20240625172733375

示例:

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();
};
#endif // WIDGET_H
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

widget.cpp

#include "widget.h"
#include <QHBoxLayout>
#include <QTabWidget>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(QSize(800, 400));
    QHBoxLayout *pHLay = new QHBoxLayout(this);
    QTabWidget *pTabWidget = new QTabWidget(this);
    pTabWidget->setTabPosition(QTabWidget::West);   //设置tab的位置
    pTabWidget->setTabShape(QTabWidget::Triangular);    //梯形tab
    pTabWidget->setTabsClosable(true);  //显示关闭按钮
    pTabWidget->setMovable(true);       //tab可移动

    QWidget *w1 = new QWidget();
    w1->setStyleSheet("background-color:rgb(54, 54, 54)");
    QWidget *w2 = new QWidget();
    w2->setStyleSheet("background-color:rgb(154, 154, 54)");
    QWidget *w3 = new QWidget();
    w3->setStyleSheet("background-color:rgb(54, 54, 154)");

    pTabWidget->insertTab(0, w1, "tab1");
    pTabWidget->insertTab(1, w2, "tab2");
    pTabWidget->insertTab(2, w3, "tab3");

    pHLay->addWidget(pTabWidget);

    //当用户请求关闭一个标签页时,将指定标签页关闭
    connect(pTabWidget, &QTabWidget::tabCloseRequested, [=](int index){
        pTabWidget->removeTab(index);
    });
}

Widget::~Widget() {}
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

main.cpp

#include "widget.h"
#include <QApplication>


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

二、QListWidget应用详解

  QListWidget 是 Qt 框架中的一个类,它提供了一个列表框,允许用户以列表的形式展示项目,并允许用户通过点击或双击来选择项目。QListWidget 继承自 QListView,并且是 QWidget 的子类。QListWidget 有两种显示模式:列表模式与图标模式。默认是列表模式。

enum ViewMode
{
    ListMode,	//列表模式
    IconMode	//图标模式
}
  • 1
  • 2
  • 3
  • 4
  • 5

1.列表模式

1.1 基本操作

  • 创建QListWidget

    QListWidget* pListWidget = new QListWidget(this);
    
    • 1
  • 创建item

    QListWidgetItem* pLwItem1 = new QListWidgetItem(QIcon(":/resources/kits.png"), "构建套件");
    
    • 1
  • 添加item

    pListWidget->addItem(pLwItem1);
    
    • 1
  • 返回列表控件中指定坐标的列表项

    QListWidgetItem* pItem = pListWidget->itemAt(pos);
    
    • 1

    它的作用是返回在列表控件(QListWidget)中,指定坐标p处的列表项(QListWidgetItem)的指针。

  • 返回当前的列表项

    QListWidgetItem* item = pListWidget->currentItem();
    
    • 1
  • 删除列表项

    pListWidget->removeItemWidget(item);
    
    • 1
  • 添加多个列表项

    QStringList  m_textList;
    m_textList << u8"基本设置" << u8"云盘设置" << u8"下载设置" << u8"接管设置" << u8"任务管理" << u8"提醒" << u8"悬浮窗" << u8"高级设置";
    m_pListWidget->addItems(m_textList);
    
    • 1
    • 2
    • 3
  • 设置控件无边框

    m_pListWidget->setFrameShape(QFrame::NoFrame);
    
    • 1
  • 设置控件的焦点策略

    m_pListWidget->setFocusPolicy(Qt::NoFocus);
    
    • 1

示例:

widget.h

#pragma once

#include <QtWidgets/QWidget>
#include <QVBoxLayout>
#include <QLineEdit>
#include <QListWidget>
#include <QTabWidget>
#include <QLabel>
#include <QPushButton>

class widget : public QWidget
{
    Q_OBJECT

public:
    widget(QWidget* parent = nullptr);
    ~widget();

private:
    QVBoxLayout* pMainVLayout;
    QVBoxLayout* pLeftVLayout;
    QVBoxLayout* pRightVLayout;
    QHBoxLayout* pTopHLayout;
    QHBoxLayout* pBottomHLayout;
    QWidget* pLeftWidget;
    QWidget* pRightWidget;
    QWidget* pBottomWidget;

    QListWidget* pListWidget;
    QTabWidget* pTabWidget;
    QLineEdit* pSelectEdit;
    QLabel* pLabel;

    QPushButton* pOKBtn;
    QPushButton* pCancelBtn;
    QPushButton* pApplyBtn;
};
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

widget.cpp

#pragma execution_character_set("utf-8")
#include "widget.h"

widget::widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(QSize(800, 500));
    //整体
    pMainVLayout = new QVBoxLayout(this);
    pTopHLayout = new QHBoxLayout;
    /** 左侧 **/
    pLeftWidget = new QWidget;
    pLeftVLayout = new QVBoxLayout(pLeftWidget);

    pSelectEdit = new QLineEdit;
    pSelectEdit->setObjectName(QString::fromUtf8("pSelectEdit"));
    pSelectEdit->setFixedWidth(300);

    pListWidget = new QListWidget;
    pListWidget->setObjectName(QString::fromUtf8("pListWidget"));
    pListWidget->setFixedWidth(300); //设置固定宽度

    //创建item
    QListWidgetItem* pLwItem1 = new QListWidgetItem(QIcon(":/resources/kits.png"), "构建套件");
    QListWidgetItem* pLwItem2 = new QListWidgetItem(QIcon(":/resources/env.png"), "环境");
    QListWidgetItem* pLwItem3 = new QListWidgetItem(QIcon(":/resources/editor.png"), "编辑");
    QListWidgetItem* pLwItem4 = new QListWidgetItem(QIcon(":/resources/vim.png"), "FakeVim");
    QListWidgetItem* pLwItem5 = new QListWidgetItem(QIcon(":/resources/help.png"), "帮助");

    //添加item
    pListWidget->addItem(pLwItem1);
    pListWidget->addItem(pLwItem2);
    pListWidget->addItem(pLwItem3);
    pListWidget->addItem(pLwItem4);
    pListWidget->addItem(pLwItem5);

    //添加到左侧布局中
    pLeftVLayout->addWidget(pSelectEdit);
    pLeftVLayout->addWidget(pListWidget);

    /** 右侧 **/
    pRightWidget = new QWidget;
    pRightWidget->setFixedWidth(500);
    pRightVLayout = new QVBoxLayout(pRightWidget);

    pLabel = new QLabel;
    pLabel->setObjectName(QString::fromUtf8("pLabel"));
    pLabel->setAlignment(Qt::AlignLeft);
    pLabel->setText("文本编辑器");

    pTabWidget = new QTabWidget;
    QWidget* w1 = new QWidget;
    QWidget* w2 = new QWidget;
    QWidget* w3 = new QWidget;

    //添加标签页
    pTabWidget->insertTab(0, w1, "构建套件");
    pTabWidget->insertTab(1, w2, "Qt版本");
    pTabWidget->insertTab(2, w3, "编译器");

    //添加到右侧布局中
    pRightVLayout->addWidget(pLabel);
    pRightVLayout->addWidget(pTabWidget);
    

    //添加到顶部布局中
    pTopHLayout->addWidget(pLeftWidget);
    pTopHLayout->addWidget(pRightWidget);

    /*底部*/
    pBottomWidget = new QWidget;
    pBottomHLayout = new QHBoxLayout(pBottomWidget);
    pBottomHLayout->addSpacing(500);

    pOKBtn = new QPushButton;
    pOKBtn->setObjectName(QString::fromUtf8("pOKBtn"));
    pOKBtn->setFixedHeight(40);
    pOKBtn->setText("确定");

    pCancelBtn = new QPushButton;
    pCancelBtn->setObjectName(QString::fromUtf8("pCancelBtn"));
    pCancelBtn->setFixedHeight(40);
    pCancelBtn->setText("取消");

    pApplyBtn = new QPushButton;
    pApplyBtn->setObjectName(QString::fromUtf8("pApplyBtn"));
    pApplyBtn->setFixedHeight(40);
    pApplyBtn->setText("应用");

    //添加到底部布局中
    pBottomHLayout->addWidget(pOKBtn);
    pBottomHLayout->addWidget(pCancelBtn);
    pBottomHLayout->addWidget(pApplyBtn);
    pBottomHLayout->setSpacing(10);

    //添加到整体布局中
    pMainVLayout->addLayout(pTopHLayout);
    pMainVLayout->addWidget(pBottomWidget);
}

widget::~widget() {}
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101

main.cpp

#include "loginInCode.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    loginInCode w;
    w.show();
    return a.exec();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

运行结果

image-20240625214812477

结构上类似于Qt的首选项

image-20240625214854170

1.2 添加自定义item

  1. 新建自定义的widget类,

  2. 将自定义的Item添加到列表

    QListWidgetItem* pLwItem6 = new QListWidgetItem;
    pListWidget->addItem(pLwItem6);
    pLwItem6->setSizeHint(QSize(200, 80));
    
    CUserItem* pUserItem = new CUserItem;
    pListWidget->setItemWidget(pLwItem6, pUserItem);
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

1.3 如何添加右键菜单

  • 设置菜单策略(必须设置,不然无法显示菜单)

    pListWidget->setContextMenuPolicy(Qt::CustomContextMenu);
    
    • 1
  • 连接信号槽

    //QWidget的信号:void customContextMenuRequested(const QPoint &pos);
    connect(pListWidget, &QListWidget::customContextMenuRequested, this, &Widget::on_PopupRightMenu);
    
    
    
    • 1
    • 2
    • 3
    • 4

1.4 QListWidget如何删除item

  QListWidget有两种删除方式:

  • 方式一:知道item的名字,根据名字删除–动态删除

    这种可用于用户掉线,信息丢失等情况

    QList<QListWidgetItem*> list;
    list = pListWidget->findItems("Kits", Qt::MatchCaseSensitive);
    
    QListWidgetItem* sel = list[0];
    int r = pListWidget->row(sel);
    
    //作用是从列表控件中移除并返回指定行的列表项。如果指定行没有列表项,则返回nullptr。
    QListWidgetItem* item = pListWidget->takeItem(r);
    pListWidget->removeItemWidget(item);
    
    delete item;
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 方式二:右键点击删除,或者选中删除

    QListWidgetItem* item = pListWidget->currentItem();
    pListWidget->removeItemWidget(item);
    delete item;
    
    • 1
    • 2
    • 3

示例:上面两小节

widget.h

#pragma once

#include <QtWidgets/QWidget>
#include <QVBoxLayout>
#include <QLineEdit>
#include <QListWidget>
#include <QTabWidget>
#include <QLabel>
#include <QPushButton>
#include <QMenu>
#include <QAction>
#include <QMessageBox>

class widget : public QWidget
{
    Q_OBJECT

public:
    widget(QWidget* parent = nullptr);
    ~widget();

private:
    QVBoxLayout* pMainVLayout;
    QVBoxLayout* pLeftVLayout;
    QVBoxLayout* pRightVLayout;
    QHBoxLayout* pTopHLayout;
    QHBoxLayout* pBottomHLayout;
    QWidget* pLeftWidget;
    QWidget* pRightWidget;
    QWidget* pBottomWidget;

    QListWidget* pListWidget;
    QTabWidget* pTabWidget;
    QLineEdit* pSelectEdit;
    QLabel* pLabel;

    QPushButton* pOKBtn;
    QPushButton* pCancelBtn;
    QPushButton* pApplyBtn;
    QMenu* m_pRightMenu;

private:
    void initRightMenu();

private slots:
    void on_PopupRightMenu(const QPoint& pos);
};
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

widget.cpp

#pragma execution_character_set("utf-8")
#include "widget.h"

widget::widget(QWidget *parent)
    : QWidget(parent)
{
    this->setWindowTitle("首选项-Qt Creator");
    this->resize(QSize(800, 500));
    //整体
    pMainVLayout = new QVBoxLayout(this);
    pTopHLayout = new QHBoxLayout;
    /** 左侧 **/
    pLeftWidget = new QWidget;
    pLeftVLayout = new QVBoxLayout(pLeftWidget);

    pSelectEdit = new QLineEdit;
    pSelectEdit->setObjectName(QString::fromUtf8("pSelectEdit"));
    pSelectEdit->setFixedWidth(300);

    pListWidget = new QListWidget;
    pListWidget->setObjectName(QString::fromUtf8("pListWidget"));
    pListWidget->setFixedWidth(300); //设置固定宽度
    pListWidget->setContextMenuPolicy(Qt::CustomContextMenu);

    //创建item
    QListWidgetItem* pLwItem1 = new QListWidgetItem(QIcon(":/resources/kits.png"), "构建套件");
    QListWidgetItem* pLwItem2 = new QListWidgetItem(QIcon(":/resources/env.png"), "环境");
    QListWidgetItem* pLwItem3 = new QListWidgetItem(QIcon(":/resources/editor.png"), "编辑");
    QListWidgetItem* pLwItem4 = new QListWidgetItem(QIcon(":/resources/vim.png"), "FakeVim");
    QListWidgetItem* pLwItem5 = new QListWidgetItem(QIcon(":/resources/help.png"), "帮助");

    //添加item
    pListWidget->addItem(pLwItem1);
    pListWidget->addItem(pLwItem2);
    pListWidget->addItem(pLwItem3);
    pListWidget->addItem(pLwItem4);
    pListWidget->addItem(pLwItem5);

    //添加到左侧布局中
    pLeftVLayout->addWidget(pSelectEdit);
    pLeftVLayout->addWidget(pListWidget);

    /** 右侧 **/
    pRightWidget = new QWidget;
    pRightWidget->setFixedWidth(500);
    pRightVLayout = new QVBoxLayout(pRightWidget);

    pLabel = new QLabel;
    pLabel->setObjectName(QString::fromUtf8("pLabel"));
    pLabel->setAlignment(Qt::AlignLeft);
    pLabel->setText("文本编辑器");

    pTabWidget = new QTabWidget;
    QWidget* w1 = new QWidget;
    QWidget* w2 = new QWidget;
    QWidget* w3 = new QWidget;

    //添加标签页
    pTabWidget->insertTab(0, w1, "构建套件");
    pTabWidget->insertTab(1, w2, "Qt版本");
    pTabWidget->insertTab(2, w3, "编译器");

    //添加到右侧布局中
    pRightVLayout->addWidget(pLabel);
    pRightVLayout->addWidget(pTabWidget);
    

    //添加到顶部布局中
    pTopHLayout->addWidget(pLeftWidget);
    pTopHLayout->addWidget(pRightWidget);

    /*底部*/
    pBottomWidget = new QWidget;
    pBottomHLayout = new QHBoxLayout(pBottomWidget);
    pBottomHLayout->addSpacing(500);

    pOKBtn = new QPushButton;
    pOKBtn->setObjectName(QString::fromUtf8("pOKBtn"));
    pOKBtn->setFixedHeight(40);
    pOKBtn->setText("确定");

    pCancelBtn = new QPushButton;
    pCancelBtn->setObjectName(QString::fromUtf8("pCancelBtn"));
    pCancelBtn->setFixedHeight(40);
    pCancelBtn->setText("取消");

    pApplyBtn = new QPushButton;
    pApplyBtn->setObjectName(QString::fromUtf8("pApplyBtn"));
    pApplyBtn->setFixedHeight(40);
    pApplyBtn->setText("应用");

    //添加到底部布局中
    pBottomHLayout->addWidget(pOKBtn);
    pBottomHLayout->addWidget(pCancelBtn);
    pBottomHLayout->addWidget(pApplyBtn);
    pBottomHLayout->setSpacing(10);

    //添加到整体布局中
    pMainVLayout->addLayout(pTopHLayout);
    pMainVLayout->addWidget(pBottomWidget);

    initRightMenu();
    connect(pListWidget, &QListWidget::customContextMenuRequested, this, &widget::on_PopupRightMenu);
}

widget::~widget() {}

void widget::initRightMenu()
{
    m_pRightMenu = new QMenu(this);

    QAction* pAc1 = new QAction(u8"动作1", this);
    QAction* pAc2 = new QAction(u8"动作2", this);
    QAction* pAc3 = new QAction(u8"动作3", this);
    QAction* pAc4 = new QAction(u8"删除", this);

    m_pRightMenu->addAction(pAc1);
    m_pRightMenu->addAction(pAc2);
    m_pRightMenu->addAction(pAc3);
    m_pRightMenu->addAction(pAc4);

    connect(pAc1, &QAction::triggered, [=] {
        QMessageBox::information(this, "title", "ac1");
        });

    connect(pAc4, &QAction::triggered, [=] {

        // 动态删除
        //QList<QListWidgetItem*> list;
        //list = pListWidget->findItems("帮助", Qt::MatchCaseSensitive);  //Qt::MatchCaseSensitive:匹配区分大小写

        //QListWidgetItem* sel = list[0];
        //int r = pListWidget->row(sel);

        //QListWidgetItem* item = pListWidget->takeItem(r);
        //pListWidget->removeItemWidget(item);

        //delete item;

        QListWidgetItem* item = pListWidget->currentItem();
        pListWidget->removeItemWidget(item);
        delete item;
        });
}

void widget::on_PopupRightMenu(const QPoint& pos)
{
    //判断当前坐标处是否是列表项
    QListWidgetItem* pItem = pListWidget->itemAt(pos);
    if (!pItem)
    {
        return;
    }

    m_pRightMenu->exec(QCursor::pos());
}
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156

main.cpp

#include "loginInCode.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    loginInCode w;
    w.show();
    return a.exec();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

运行结果

image-20240625214812477

2.图标模式

  • 设置为图标模式

    pListWidget->setViewMode(QListView::IconMode);  //设置图标模式
    
    • 1
  • 图标模式如何固定列数显式、设置Item间隙

    pListWidget->setFixedWidth(180 * 3 + 30);       //设置固定宽度
    
    //设置水平、竖直滑动条的属性
    pListWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);  //屏蔽水平滑动条
    pListWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);     //垂直滑动条需要时才显示
    
    • 1
    • 2
    • 3
    • 4
    • 5
  • QListWidget样式表

    //样式表:给item添加背景色以便更好的识别每个item
    QString qss = "QListWidget{border:none; background:rgb(251,251,251);} \
        QListWidget::item{background:blue; margin-left:20px;margin-right:20px;margin-top:10px;}";
    pListWidget->setStyleSheet(qss);
    
    • 1
    • 2
    • 3
    • 4
  • 循环添加图标

    for (int i = 0; i < 15; i++)    //往pListWidget中循环添加图标56
    {
        QIcon icon = QIcon(":/Widget/resources/env.png");
        QString name = QString(u8"用户%1").arg(QString::number(i));
        QListWidgetItem* item1 = new QListWidgetItem(icon, name);
        item1->setSizeHint(QSize(180, 180));    //180包含了margin-left等间隙的值
        pListWidget->addItem(item1);
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

示例:

widget.h

#pragma once

#include <QtWidgets/QWidget>
#include <QVBoxLayout>
#include <QListWidget>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = Q_NULLPTR);

private:
    QVBoxLayout* pMainVLayout;
    QListWidget* pListWidget;
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

widget.cpp

#include "Widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    this->resize(QSize(600, 500));
    pMainVLayout = new QVBoxLayout(this);

    pListWidget = new QListWidget(this);
    pListWidget->setFixedWidth(180 * 3 + 30);       //设置固定宽度
    pListWidget->setViewMode(QListView::IconMode);  //设置图表模式

    //设置水平、竖直滑动条的属性
    pListWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);  //屏蔽水平滑动条
    pListWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);     //垂直滑动条需要时才显示

    //样式表:给item添加背景色以便更好的识别每个item
    QString qss = "QListWidget{border:none; background:rgb(251,251,251);} \
        QListWidget::item{background:blue; margin-left:20px;margin-right:20px;margin-top:10px;}";
    pListWidget->setStyleSheet(qss);

    for (int i = 0; i < 15; i++)    //往pListWidget中循环添加图标56
    {
        QIcon icon = QIcon(":/Widget/resources/env.png");
        QString name = QString(u8"用户%1").arg(QString::number(i));
        QListWidgetItem* item1 = new QListWidgetItem(icon, name);
        item1->setSizeHint(QSize(180, 180));    //180包含了margin-left等间隙的值
        pListWidget->addItem(item1);
    }



    pMainVLayout->addWidget(pListWidget);
}
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

main.cpp

#include "Widget.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

运行结果

image-20240626151228748

三、QScrollArea应用详解

  QScrollArea 是 Qt 框架中的一个类,它提供了一个可以滚动的区域,用来显示比其自身尺寸更大的内容。QScrollArea 可以包含任何 QWidget 作为其子控件。

  • 创建QScrollArea
    m_pScrollArea = new QScrollArea(this);
    
    • 1
  • 相关方法
    • 设置控件无边框
      m_pScrollArea->setFrameShape(QFrame::NoFrame);
      
      • 1
    • 设置控件滑动条策略
      m_pScrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);	//设置水平滑动条策略为无滑动条
      m_pScrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);		//设置竖直滑动条策略为在需要时显示
      
      • 1
      • 2
    • 给滑动区域设置widget
      m_pScrollArea->setWidget(widget);
      
      • 1

  下面模仿迅雷可以上下滑动的设置界面。大体上是将子窗口创建起来,添加到滑动区域中。
示例:

SCrollAreaDemo.h

#pragma once

#include "CBaseSetWidget.h"
#include "GaojiSetWidget.h"
#include <QtWidgets/QWidget>
#include <QListWidget>
#include <QScrollArea>
#include <QScrollBar>
#include <QHBoxLayout>
#include <QStringList>
#include <QVector>

class ScrollAreaDemo : public QWidget
{
    Q_OBJECT

public:
    ScrollAreaDemo(QWidget *parent = Q_NULLPTR);

private:
    QListWidget* m_pListWidget;
    QScrollArea* m_pScrollArea;
    QStringList  m_textList;

    CBaseSetWidget* m_pBaseSetWidget;
    QWidget* m_pYunpanSetWidget;
    QWidget* m_pDownloadWidget;
    QWidget* m_pJieguanWidget;
    QWidget* m_pRenwuWidget;
    QWidget* m_pTixingWidget;
    QWidget* m_pXuanfuWidget;
    GaojiSetWidget* m_pGaojiWidget;

    QVector<QWidget*> m_vecWidget;

    bool signFlag = false;

private:
    void slotItemClicked(QListWidgetItem* item);
    void slotValueChanged(int value);
};
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

SCrollAreaDemo.cpp

#include "ScrollAreaDemo.h"
#include <string>

using namespace std;

ScrollAreaDemo::ScrollAreaDemo(QWidget *parent)
    : QWidget(parent)
{
    this->setFixedSize(QSize(150 + 1000 + 30 + 20,  900));
	this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);
	this->setStyleSheet("background:rgb(26, 26, 26);");
    
	/*ListWidget*/
    m_pListWidget = new QListWidget(this);
    m_pListWidget->setFixedWidth(150);
	m_pListWidget->setFrameShape(QFrame::NoFrame);	//设置控件边框形状为无边框
	m_pListWidget->setFocusPolicy(Qt::NoFocus);	//设置控件的焦点策略

    m_textList << u8"基本设置" << u8"云盘设置" << u8"下载设置" << u8"接管设置" << u8"任务管理" << u8"提醒" << u8"悬浮窗" << u8"高级设置";
    m_pListWidget->addItems(m_textList);    //添加多个列表项

	//lw的样式表;R"()";常用来写json
	string lw_qss = R"(
		QListWidget
		{
			/*border:1px solid gray;    边界线:宽度、颜色*/
			background:rgb(26, 26, 26);   /* 列表背景色*/
			color:rgb(200, 200, 200);     /*前景色、文字颜色*/
			font-size:15px;
			border-radius:1px;	/*圆角*/
		}

		QListWidget::item
		{
			height:40px;
			padding-left:10px; /*控制文本与left左边的距离 */
		}
		
		QListWidget::item:!active
		{
			background:rgb(26, 26, 26);
			margin:5px 20px 1px 20px;   /*上右下左,控制item与ListWidget的距离*/
		}
		/*悬浮到项目上时发生右偏移*/
		QListWidget::item:hover
		{
			background:rgb(56, 56, 56);
			padding-left:30px;
		}
		/*选中项目时,边框圆角与背景色发生改变*/
		QListWidget::item:selected
		{
			border-radius:15px;
			background:lightblue;
		}

		/*上次选择后保留的状态,鼠标离开后显示*/
		QListWidget::item:selected:!active
		{
			background:rgb(51,51,51);
			color:#3F85FF;
		})";
	m_pListWidget->setStyleSheet(QString::fromStdString(lw_qss));

	/* QScrollArea */
	m_pScrollArea = new QScrollArea(this);
	m_pScrollArea->setFixedWidth(1000 + 30);
	m_pScrollArea->setFrameShape(QFrame::NoFrame);	//设置控件无边框
	m_pScrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);	//设置控件的水平与竖直策略
	m_pScrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);

	string verticalbar_qss = R"(
		QScrollBar{width:16px;background:rgb(26, 26, 26);margin:0px, 0px, 0px, 0px;}
		QScrollBar::handle:vertical{width:8px;background:rgba(162, 163, 165, 100%);border-radius:4px;min-height:40;}
              QScrollBar::handle:vertical:hover{width:8px;background:rgba(115,118,118, 100%);border-radius:4px;min-height:40;}
              QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{background:rgb(26, 26, 26);border-radius:4px;}
              QScrollBar::top-arrow:vertical,QScrollBar::bottom-arrow:vertical{border: none;background: none;color: none;}
              QScrollBar::add-line:vertical{border:none;background:none;}
              QScrollBar::sub-line:vertical{border:none;background:none;}
		)";

	//这里是难点
	m_pScrollArea->verticalScrollBar()->setStyleSheet(QString::fromStdString(verticalbar_qss));

	/*基本设置使用自定义类,其他部分使用图片代替*/
	m_pBaseSetWidget = new CBaseSetWidget;
	m_vecWidget.push_back(m_pBaseSetWidget);

	m_pYunpanSetWidget = new QWidget;
	m_pYunpanSetWidget->setStyleSheet("background-image:url(:/ScrollAreaDemo/resources/YunPanSet.png);background-repeat: no-repeat;background-color:rgb(51, 51, 51)");
	m_pYunpanSetWidget->setFixedSize(1000, 478);
	m_vecWidget.push_back(m_pYunpanSetWidget);

	m_pDownloadWidget = new QWidget;
	m_pDownloadWidget->setStyleSheet("background-image:url(:/ScrollAreaDemo/resources/XiaZai.png);background-repeat: no-repeat;background-color:rgb(51, 51, 51)");
	m_pDownloadWidget->setFixedSize(1000, 337);
	m_vecWidget.push_back(m_pDownloadWidget);

	m_pJieguanWidget = new QWidget;
	m_pJieguanWidget->setStyleSheet("background-image:url(:/ScrollAreaDemo/resources/JieGuanSet.png);background-repeat: no-repeat;background-color:rgb(51, 51, 51)");
	m_pJieguanWidget->setFixedSize(1000, 340);
	m_vecWidget.push_back(m_pJieguanWidget);

	m_pRenwuWidget = new QWidget;
	m_pRenwuWidget->setStyleSheet("background-image:url(:/ScrollAreaDemo/resources/RenwuGuanli.png);background-repeat: no-repeat;background-color:rgb(51, 51, 51)");
	m_pRenwuWidget->setFixedSize(1000, 413);
	m_vecWidget.push_back(m_pRenwuWidget);

	m_pTixingWidget = new QWidget;
	m_pTixingWidget->setStyleSheet("background-image:url(:/ScrollAreaDemo/resources/TiXing.png);background-repeat: no-repeat;background-color:rgb(51, 51, 51)");
	m_pTixingWidget->setFixedSize(1000, 728);
	m_vecWidget.push_back(m_pTixingWidget);

	m_pXuanfuWidget = new QWidget;
	m_pXuanfuWidget->setStyleSheet("background-image:url(:/ScrollAreaDemo/resources/XuanFuChuang.png);background-repeat: no-repeat;background-color:rgb(51, 51, 51)");
	m_pXuanfuWidget->setFixedSize(1000, 206);
	m_vecWidget.push_back(m_pXuanfuWidget);

	m_pGaojiWidget = new GaojiSetWidget;
	m_vecWidget.push_back(m_pGaojiWidget);

	QWidget* widget = new QWidget;

	QVBoxLayout* pVLay = new QVBoxLayout(widget);

	/*将所有的“设置Widget”添加进来*/
	for (auto w : m_vecWidget)
	{
		pVLay->addWidget(w);
		pVLay->addSpacing(15);
	}

	pVLay->setContentsMargins(0, 5, 0, 5);

	//给QScrollArea设置Widget
	m_pScrollArea->setWidget(widget);

	//整体布局
	QHBoxLayout* hlay = new QHBoxLayout(this);
	hlay->addWidget(m_pListWidget);
	hlay->setSpacing(0);
	hlay->addWidget(m_pScrollArea);

	/*点击listWidget的Item切换显示区域*/
	connect(m_pListWidget, &QListWidget::itemClicked, this, &ScrollAreaDemo::slotItemClicked);

	/*滚动鼠标中建时ScrollBar值变化的信号槽*/
	connect(m_pScrollArea->verticalScrollBar(), &QScrollBar::valueChanged,this, &ScrollAreaDemo::slotValueChanged);
}

void ScrollAreaDemo::slotItemClicked(QListWidgetItem* item)
{
	signFlag = true;
	QString itemText = item->text();
	QPoint widgetPos;

	int size = m_textList.size();
	for (int i = 0; i < size; i++)
	{
		if (itemText == m_textList[i])
		{
			widgetPos = m_vecWidget[i]->pos();
		}
	}

	m_pScrollArea->verticalScrollBar()->setValue(widgetPos.y());
}

void ScrollAreaDemo::slotValueChanged(int value)
{
	if (!signFlag)
	{
		int itemSize = m_vecWidget.size();
		for (int i = 0; i < itemSize; i++)
		{
			//visibleRegion()用来获取当前控件的可视区域,
			if (!m_vecWidget[i]->visibleRegion().isEmpty())
			{
				m_pListWidget->item(i)->setSelected(true);	//设置列表项的选中状态
				return;
			}
			else
			{
				m_pListWidget->item(i)->setSelected(false);
			}
		}
	}

	signFlag = false;
}

  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191

GaojiSetWidget.h

#pragma once

#include <QWidget>


class GaojiSetWidget : public QWidget
{
	Q_OBJECT

public:
	GaojiSetWidget(QWidget* parent = Q_NULLPTR);
	~GaojiSetWidget();

private:

};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

GaojiSetWidget.cpp

#include "GaojiSetWidget.h"
#include <QVBoxLayout>
#include <QLabel>

GaojiSetWidget::GaojiSetWidget(QWidget* parent)
	: QWidget(parent)
{
	QLabel* pLabel1 = new QLabel(this);
	pLabel1->setFixedSize(1000, 541);
	QPixmap* pixmap = new QPixmap(":/ScrollAreaDemo/resources/GaojiSet_1.png");
	pixmap->scaled(pLabel1->size(), Qt::KeepAspectRatio);
	pLabel1->setScaledContents(true);
	pLabel1->setPixmap(*pixmap);

	QLabel* pLabel2 = new QLabel(this);
	pLabel2->setFixedSize(1000, 685);
	pixmap = new QPixmap(":/ScrollAreaDemo/resources/GaojiSet_2.png");
	pixmap->scaled(pLabel2->size(), Qt::KeepAspectRatio);
	pLabel2->setScaledContents(true);
	pLabel2->setPixmap(*pixmap);
	QVBoxLayout* pVLay = new QVBoxLayout(this);
	pVLay->addWidget(pLabel1);
	pVLay->setSpacing(0);
	pVLay->addWidget(pLabel2);
	pVLay->setContentsMargins(0, 0, 0, 0);
}

GaojiSetWidget::~GaojiSetWidget()
{
}
  • 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
  • 27
  • 28
  • 29
  • 30

CBaseSetWidget.h

#pragma once
#include <QWidget>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QCheckBox>
#include <QLabel>
#include <QLineEdit>
#include <QRadioButton>
#include <QPushButton>

class CBaseSetWidget : public QWidget
{
public:
	CBaseSetWidget(QWidget* parent = Q_NULLPTR);
	~CBaseSetWidget();

private:
	QLabel* pBasesetLabel;
	QCheckBox* pCheckKaijiqidong;
	QCheckBox* pCheckMiandarao;
	QLabel* p1;
	QLabel* p2;
	QCheckBox* pCheckBosskey;
	QLineEdit* pLineEdit;
	QCheckBox* pCheckNewShowMainUI;
	QLabel* pXiazaimoshi;
	QRadioButton* pQuansuxiazai;
	QRadioButton* pXiansuxiazai;
	QPushButton* pBtnModify;
	QLabel* label_cfginfo;

	QVBoxLayout* pMainVlay;
	QHBoxLayout* pHlay1;
	QVBoxLayout* pVlay1;
	QHBoxLayout* pHlay2;
	QHBoxLayout* pHlay3;
	QHBoxLayout* pHlay4;
	QVBoxLayout* pVlay2;
	QHBoxLayout* pHlay5;
	QHBoxLayout* pHlay6;
};
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

CBaseSetWidget.cpp

#include "CBaseSetWidget.h"
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QCheckBox>
#include <QLabel>
#include <QLineEdit>
#include <QRadioButton>
#include <QPushButton>

CBaseSetWidget::CBaseSetWidget(QWidget* parent)
	:QWidget(parent)
{
	setWindowFlags(Qt::FramelessWindowHint);
	setAttribute(Qt::WA_StyledBackground);
	this->setStyleSheet("background-color:rgb(51, 51, 51);color:rgb(200,200,200);");

	QLabel* pBasesetLabel = new QLabel(this);
	pBasesetLabel->setText(u8"基本设置");

	QCheckBox* pCheckKaijiqidong = new QCheckBox(this);
	pCheckKaijiqidong->setText(u8"开机启动");

	QCheckBox* pCheckMiandarao = new QCheckBox(this);
	pCheckMiandarao->setFixedWidth(140);
	pCheckMiandarao->setText(u8"开启免打扰模式");

	QLabel* p1 = new QLabel(this);
	p1->setText("?");

	QCheckBox* pCheckBosskey = new QCheckBox(this);
	pCheckBosskey->setFixedWidth(105);
	pCheckBosskey->setText(u8"开启老板键");

	QLineEdit* pLineEdit = new QLineEdit(this);
	pLineEdit->setFixedWidth(100);
	pLineEdit->setStyleSheet("border-style:solid;border-width:1px;border-color:rgb(79,79,79);");
	QLabel* p2 = new QLabel(this);
	p2->setText("Alt+D");

	QCheckBox* pCheckNewShowMainUI = new QCheckBox(this);
	pCheckNewShowMainUI->setText(u8"新建时显示主界面");

	QLabel* pXiazaimoshi = new QLabel(this);
	pXiazaimoshi->setText(u8"下载模式");
	
	QRadioButton* pQuansuxiazai = new QRadioButton(this);
	pQuansuxiazai->setText(u8"全速下载");

	QRadioButton* pXiansuxiazai = new QRadioButton(this);
	pXiansuxiazai->setText(u8"极速下载");
	pXiansuxiazai->setFixedWidth(90);

	QPushButton* pBtnModify = new QPushButton(this);
	pBtnModify->setText(u8"修改设置");
	pBtnModify->setStyleSheet("background-color:#1A1A1A;color:#5F5F5F");

	QLabel* label_cfginfo = new QLabel(this);
	label_cfginfo->setText(u8"限制时间段: 00:00-23:59 最大下载速度:不限速");

	QVBoxLayout* pMainVlay = new QVBoxLayout(this);
	pMainVlay->addWidget(pBasesetLabel);
	pMainVlay->addSpacing(20);

	QHBoxLayout* pHlay1 = new QHBoxLayout(this);
	pHlay1->addSpacing(35);

	QVBoxLayout* pVlay1 = new QVBoxLayout(this);
	pVlay1->addWidget(pCheckKaijiqidong);
	pVlay1->addSpacing(20);

	QHBoxLayout* pHlay2 = new QHBoxLayout;
	pHlay2->addWidget(pCheckMiandarao);
	pHlay2->addWidget(p1);

	pVlay1->addLayout(pHlay2);  // 添加免打扰的水平布局
	pVlay1->addSpacing(20);

	QHBoxLayout* pHlay3 = new QHBoxLayout;
	pHlay3->addWidget(pCheckBosskey);
	pHlay3->addWidget(pLineEdit);
	pHlay3->addWidget(p2);

	pVlay1->addLayout(pHlay3);
	pVlay1->addSpacing(20);

	pVlay1->addWidget(pCheckNewShowMainUI);
	pVlay1->addSpacing(20);

	pVlay1->addWidget(pXiazaimoshi);  // 下载模式
	pVlay1->addSpacing(20);

	QHBoxLayout* pHlay4 = new QHBoxLayout;  //  下载模式下面的水平布局
	pHlay4->addSpacing(30);

	QVBoxLayout* pVlay2 = new QVBoxLayout(this);

	QHBoxLayout* pHlay5 = new QHBoxLayout;
	pHlay5->addWidget(pQuansuxiazai);
	pHlay5->addWidget(p2);
	pVlay2->addLayout(pHlay5);
	pVlay2->addSpacing(20);
	
	// 限速下载
	QHBoxLayout* pHlay6 = new QHBoxLayout;
	pHlay6->addWidget(pXiansuxiazai);
	pHlay6->addWidget(pBtnModify);
	pHlay6->addWidget(label_cfginfo);
	pHlay6->addStretch();

	pVlay2->addLayout(pHlay6);

	pHlay4->addLayout(pVlay2);

	pVlay1->addLayout(pHlay4);
	pHlay1->addLayout(pVlay1);

	pMainVlay->addLayout(pHlay1);
	pMainVlay->setContentsMargins(20, 20, 20, 20);
}

CBaseSetWidget::~CBaseSetWidget()
{
}
  • 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
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123

main.cpp

#include "ScrollAreaDemo.h"
#include <QtWidgets/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    ScrollAreaDemo w;
    w.show();
    return a.exec();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

运行结果

image-20240626181415806

四、PC客户端界面布局案例分析

  以WPS为例,

  • 无边框窗口
  • 整体使用TabWidget,每个Widget使用Web导入
    如稻壳商城并不是用Qt来做的,是网页,前端将网页做好后放到服务端中,客户端获取后端的一些网页然后进行显示,详细见web混合开发
  • 整体可移动、拉伸
  • 工具栏可折叠

界面布局建议

  • 合理使用widget进行分块布局,大部分界面效果都能实现
  • 跨平台,web是最好的解决方案,使用chrome技术,做混合开发,CEF、QCefView、QWebEngineView
  • 合理使用样式表
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/962240
推荐阅读
  

闽ICP备14008679号