【QT5】＜总览三＞ QT常用控件

文章目录

前言

一、QWidget---界面

二、QPushButton---按钮

三、QRadioButton---单选按钮

四、QCheckBox---多选、三选按钮

五、margin&padding---边距控制

六、QHBoxLayout---水平布局

七、QVBoxLayout---垂直布局

八、QGridLayout---网格布局

九、QSplitter---分裂器

十、QSpacerItem---隔离弹簧

十一、QLineEdit---用户输入框

十二、QDialog---对话框

十三、QScrollArea---界面滚动

十四、QTabWidget---面板切换

十五、QListWidge---列表界面

十六、QPlainTextEdit---文本编辑框

十七、QComboBox---下拉多项目框

---

前言

承接【QT5】＜总览二＞ QT信号槽、对象树及样式表。若存在版权问题，请联系作者删除！

---

一、QWidget---界面

1. 介绍：是所有用户界面对象的父类。例如：QLabel、QPushButton等。常用于做顶层窗口或子部件。

2. 使用示例：

---

二、QPushButton---按钮

1. 作用：按钮，可以检测用户的点击而进行相关操作。当选中checkable属性时，能够作为一种按压式的开关按钮。

2. 四种信号函数：

void clicked(bool checked=false)	点击并松手
void pressed()	点击按钮
void released()	松开按钮
void toggled(bool checked)	按压式开关，第一次点击为true，第二次点击为false。使用时需要添加"ui->pushButton->setCheckable(true);"语句

3. 设计一个灵活的按钮：

需求：该按钮有个默认状态的皮肤；当鼠标划过时切换为另一个状态；当鼠标点击时切换为另一个状态；当鼠标点击一次后划过时切换为另一个状态。

步骤一：获取素材并导入QT中：

步骤二：在ui设计器中将pushButton拖拽至界面，并且设置好合适的大小：

步骤三：写qss文件，将四种状态的图片加载：

运行结果：

【注意】若运行QT时加载不出图片，要注意是否修改了原图片的格式！

---

三、QRadioButton---单选按钮

1. 作用：单选按钮。将一些QRadioButton按钮添加到一个组后，与其他组的按钮就隔离开，同时该组内的QRadioButton按钮只能单选。（多选我们一般用QCheckBox）

2. 案例演示：

【1】需求：设计两组单选按钮，分别选择性别和科目。两组按钮分别选中后右击以添加到独立的两个按钮组，以隔绝开选择。

【2】核心板块：

①ui设计：

②样式表文件：

QLabel {font-size: 30px}

QRadioButton::indicator:checked#radioButton {border-image: url(:/images/check.png);}
QRadioButton::indicator:unchecked#radioButton {border-image: url(:/images/uncheck.png);}
QRadioButton::indicator:checked#radioButton_2 {border-image: url(:/images/check.png);}
QRadioButton::indicator:unchecked#radioButton_2 {border-image: url(:/images/uncheck.png);}

QRadioButton::indicator#radioButton_3 {width: 0px;}
QRadioButton::checked#radioButton_3 {background-color: rgb(107, 173, 87); border-radius: 8px; color: White;}
QRadioButton::unchecked#radioButton_3 {background-color: Yellow; border-radius: 8px;}

QRadioButton::indicator#radioButton_4 {width: 0px;}
QRadioButton::checked#radioButton_4 {background-color: rgb(107, 173, 87); border-radius: 8px; color: White;}
QRadioButton::unchecked#radioButton_4 {background-color: Yellow; border-radius: 8px;}

QRadioButton::indicator#radioButton_5 {width: 0px;}
QRadioButton::checked#radioButton_5 {background-color: rgb(107, 173, 87); border-radius: 8px; color: White;}
QRadioButton::unchecked#radioButton_5 {background-color: Yellow; border-radius: 8px;}

QRadioButton::indicator#radioButton_6 {width: 0px;}
QRadioButton::checked#radioButton_6 {background-color: rgb(107, 173, 87); border-radius: 8px; color: White;}
QRadioButton::unchecked#radioButton_6 {background-color: Yellow; border-radius: 8px;}

【3】运行结果：

---

四、QCheckBox---多选、三选按钮

1. 作用：多选、三态选择按钮。

2. 三态设定：针对一个选项有选中、半选和未选中，需要将QCheckBox属性中的trstate勾选，如下图：

3. 多选设定：针对一个组，可以同时选择多个选项，需要将按钮组的exclusive取消勾选，如下图：

4. 常用信号函数：stateChanged(int)。当参数为0时，表示未选；参数为1时，表示半选；参数为2时，表示选中。

5. 三态选择时的样式表：

QCheckBox::indicator:unchecked {...}//未选中
QCheckBox::indicator:indeterminate{...}//半选中
QCheckBox::indicator:checked {...}//选中

---

五、margin&padding---边距控制

1. 概念：

• margin：一个控件的边框到另一个控件的边框的距离，属于容器外部距离（外边距）
• padding：自身边框到自身内部另一个容器边框之间的距离，属于容器内距离（内边距）

2. 常用的样式表：

QPushButton{
	margin: 0px;            //上下左右的外边距
	margin-top: 100px;      //顶部的外边距
	margin-bottom: 50px;    //底部的外边距
	margin-left: 5px;       //左边的外边距
	margin-right: 10px;     //右边的外边距

    border-width: 5px;      //描边上下左右的宽度5px
	border-color: black;    //描边的颜色
	border-style: solid;    //描边风格：solid为实心填充

    padding-top: 100px;     //内边距：距离容器顶部其他部分
	padding-bottom: 100px;  //内边距：距离容器底部其他部分
}

---

六、QHBoxLayout---水平布局

1. 作用：水平布局，联合控制多个控件的水平布局。

2. 重要属性：

• layoutSpacing：控制控件间距离
• layoutStretch：控制控件的拉伸因子
• sizePolicy：控制大小策略

3. 实例说明：

运行时发现：扩大或缩小界面，这些控件不会跟着变化。要想跟着变化，需要在widget.cpp的构造函数中添加"this->setLayout(ui->horizontalLayout);"。

---

七、QVBoxLayout---垂直布局

垂直布局：与水平布局QHBoxLayout类似，只是换成了垂直方向。水平布局和垂直布局都可以多层嵌套使用，用于规范界面和保证缩放界面的比例关系。

---

八、QGridLayout---网格布局

1. 作用：网格布局（栅格布局）

2. 说明：与水平、垂直类似，只是以网格的形式来规范控件。

---

九、QSplitter---分裂器

1. 作用：分裂器。使一个界面中间的线条左右/上下拖动来控制分界面的大小。

2. 重要属性：

• orientation：设置水平或垂直方向。
• opaqueResize：为true时，实时更新子控件大小；为false时，拖动时显示灰色线条，拖动到位并释放鼠标后再显示分割线条。
• handleWidth：设置分割线的宽度。
• childrenCollapsible：勾选后用户可以将子部件的大小调整为0.

3. 注意事项：

• 若不想拖动时将子部件拖至0，不仅需要取消勾选childrenCollapsible，还需要设置子部件的最小宽度/高度。
• 若想让QSplitter和子控件随着屏幕大小而改变，可以将整个QSplitter塞到水平布局QHBoxLayout，然后在构造函数中设置相关布局。

---

十、QSpacerItem---隔离弹簧

1. 作用：隔离弹簧。配合布局使用，控制控件之间的距离。

2. 注意事项：

• 在ui设计器里会有弹簧的样子出现，但实际运行则不会显示。

---

十一、QLineEdit---用户输入框

1. 作用：用户键盘输入控件。

2. 实例演示：

【1】需求：制作一个仿QQ登录界面。

【2】核心部分展示：

①ui设计器：

②演示表文件：

QPushButton#pushButton {
    border-image: url(:/down.png);
}

QPushButton#pushButton_2 {
    border-image: url(:/right.png);
}

QWidget#Widget {
    background-color: White;
}

QWidget#widget1 {
    background-color: Grey;
}

QWidget#widget1_2 {
    background-color: Grey;
}

QLineEdit {
    border: none;
}

【3】运行展示：

---

十二、QDialog---对话框

1. 作用：对话框。

2. 创建及使用：

//头文件中声明
QDialog *diaglog;

//源文件中构造器中实例化
dialog = new QDialog(this);

//弹出后不可再点击原先界面
dialog->setModal(true);

//显示对话框
dialog->show();

//设置无边框
dialog->setWindowFlag(Qt::FramelessWindowHint);

//设置透明，可用于上层圆角控件显示
dialog->setAttribute(Qt::WA_TranslucentBackground);

//弹出后不会马上关闭
dialog->exec();

3. 制作支付对话框：

【1】注意：创建项目时以QDialog为父类。

【2】ui设计器：由于QDialog无法通过border-radius来设置圆角边框，因此将QDialog设置为透明并且上层使用QFrame。

【3】主要的控件样式表：

①按钮：两个按钮的样式表类似，只是圆角的位置不同，因此只展示左边按钮的样式表。设置按钮圆角及边缘线宽度和实线类型，设置按压按钮时颜色变为灰色。

QPushButton {
	color: rgb(30, 144, 255);
	border-top: 1px;
	border-right: 1px;
	border-style: solid;
	border-color: Grey;
}

QPushButton:pressed {
	background-color: Grey;
	border-bottom-left-radius: 25px;
}

②QFrame：设置圆角以及背景为白色。

QFrame {
	border-radius: 25px;
	background-color: White;
}

【4】运行结果：由于我们设定了“取消”和“确定”按钮的槽，使其在点击后就会关闭当前对话框。

---

十三、QScrollArea---界面滚动

1. 作用：界面滚动。

2. 注意事项：

• 只有当QScrollArea的宽度或高度超出原有界面时，才会出现横向或纵向滚动条。
• 若不想使用滚动条，可以将下图中的属性设置为“关”。

3. 实例演示：

【1】需求：设计一个能滚动的界面，且只有滚动条，没有上下的按键。

【2】ui设计器：

【3】QScrollArea控件的样式表：①修改了滑块的颜色、宽度；②取消了上下两个按键；③鼠标停留则滑块颜色加深。

QScrollBar:vertical {
     background-color: White;
	 width: 20px;
 }

 QScrollBar::handle:vertical {
    background: rgba(200,200,200,50%);
	border-radius: 10px;
 }

 QScrollBar::handle:vertical:hover {
    background: rgba(200,200,200,90%);
	border-radius: 10px;
 }

 QScrollBar::add-line:vertical {
    width: 0px;
	height: 0px;
 }

 QScrollBar::sub-line:vertical {
    width: 0px;
	height: 0px;
 }

---

十四、QTabWidget---面板切换

1. 作用：面板切换。

2. 实例演示：

【1】需求：与QListWidget配合，在QListWidget中点击对应项，QTabWidget跳转界面。

【2】ui设计器：

【3】关键控件的样式表：

①QListWidget：设置了背景色、取消了外边框、设置了选中项时的背景和字体颜色。

 QListView {
	background-color: rgba(170,170,170, 50%);
	color: black;
	border: none;
}

QListView::item:selected {
	background-color: White;
	color: black;
}

②QTabWidget：隐藏了默认的标签，取消了外边框。

QTabBar::tab {
	width: 0px;
	height: 0px;
}

QTabWidget{
		border: none;
}

【4】注意问题：运行时默认会有一个蓝色框选中QListWidget的第一个项。要取消这样的选中，需要在属性focusPolicy中选择NoFocus。

---

十五、QListWidge---列表界面

1. 作用：列表界面。列表中的项可以动态增加、删除等操作。

2. 常用函数：

//假设创建了QListWidget对象listWidget
//新增项
listWidget->addItem("张三");
listWidget->addItem("李四");
listWidget->addItem("王五");

//删除项
listWidget->takeItem(0);

//插入项，在前面插入
listWidget->insertItem(0, "张三");

//槽currentRowChanged(int currentRow)中获取列表项目编号和内容
listWidget->item(currentRow)->text()

3. 仿QQ好友列表制作：

【1】ui设计器：

①qqItem.ui：由三部分组成，左边将两个QLabel放置于QWidget上，用于显示头像和手机图标；右边的QLabel显示网名。

②widget.ui：显示主要的QListWidget界面。

【2】主要技术点：新建qqitem.ui和qqitem.cpp，将qqitem对象放置于QWidget的项当中。

qqitem.cpp中的构造函数：

QQitem::QQitem(QString path, bool isShow, QString name, QWidget *parent) :
    QWidget(parent),
    ui(new Ui::QQitem)
{
    ui->setupUi(this);
    //加载头像
    QImage image(path);
    ui->head->setPixmap(QPixmap::fromImage(image.scaled(ui->head->width(), ui->head->height())));
    //加载手机图标
    QImage image2(":/phone.png");
    ui->phone->setPixmap(QPixmap::fromImage(image2.scaled(ui->phone->width(), ui->phone->height())));
    ui->phone->setVisible(isShow);
    //加载名字
    ui->name->setText(name);
}

Widget.cpp中的构造函数：

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->setLayout(ui->verticalLayout);

    //创建QQItem对象
    QQitem *qq0 = new QQitem(":/wsl.png", true, "小清新");
    QQitem *qq1 = new QQitem(":/hqr.jpg", true, "Emiya Shirou");

    //加入listWidget中
    QListWidgetItem *item0 = new QListWidgetItem;
    QListWidgetItem *item1 = new QListWidgetItem;
    ui->listWidget->addItem(item0);
    ui->listWidget->addItem(item1);
    ui->listWidget->setItemWidget(item0, qq0);
    ui->listWidget->setItemWidget(item1, qq1);
}

【3】注意事项：qqitem.ui中设计其长度时需要注意与QListWidget保持一致，否则加载不了！

---

十六、QPlainTextEdit---文本编辑框

1. 作用：与用户交互文本数据。QPlainTextEdit读写数据均通过QTextDocument对象来实现。

2. 基本使用：

【1】读取所有内容：

QTextDocument *document = ui->plainTextEdit->document();
QString str = document->toPlainText();

【2】读取每一行内容：

QTextDocument *document = ui->plainTextEdit->document();
//文本框中总行数
int total = document->lineCount();
//逐行处理文本信息
for(int i = 0; i < total; ++i){
    QString str = document->findBlockByLineNumber(i).text();
    qDebug() << str << endl;
}

【3】写入文本内容：

QTextDocument *document = ui->plainTextEdit->document();
document->setPlainText("hhhhh");

---

十七、QComboBox---下拉多项目框

1. 作用：下拉多条项目。

2. 基本使用：

【1】加入项目：

ui->comboBox->addItem(str);

【2】清空项目：

ui->comboBox->clear();          //删除所有项目
ui->comboBox->removeItem(i);    //删除第i条项目

【3】添加默认项目：

在ui设计器中可以双击该框，然后点击+新增项目，如下图所示。

【4】获得当前选中的项目名：

ui->comboBox->currentText();

【5】其他操作：【QT学习十二】QComboBox_qt combo box-CSDN博客。

---