C++实践之Qt学习（六）：Qt设计器之常用控件、布局和样式

最新推荐文章于 2024-10-12 15:22:43 发布

努力学习_提高自己

最新推荐文章于 2024-10-12 15:22:43 发布

阅读量3.1k

点赞数 6

分类专栏： Qt

本文链接：https://blog.csdn.net/jiratao/article/details/118961558

版权

Qt 专栏收录该内容

12 篇文章 86 订阅

订阅专栏

文章目录

常用控件
布局
- Qt布局介绍
- 设置布局的方式
样式
- 外部样式表

常用控件

按钮

在这里插入图片描述
Buttons分类中包含了Qt中常用的按钮控件，其中常用的有：

普通按钮

Push Button：即常用的普通按钮，通常用来进行点击后执行某个命令。
设置按钮图片：
在这里插入图片描述

还可以设置按钮的三态图：

ui->play_button->setStyleSheet(
	"QPushButton{border-image:url(:/new/icons/icons/play.png);}"
   	"QPushButton:hover{border-image: url(:/new/icons/icons/play-hover.png);}"
   	"QPushButton:pressed{border-image: url(:/new/icons/icons/play-pressed.png);}");

单选按钮

Radio Button：单选按钮，通常由2个或以上的单选按钮组成一组，同一组内的单选按钮只能有一个被选中。

单选按钮的分组规则：“同一个父窗体”或“一个button group”，这就是分组。如果没有进行分组，则默认拥有相同父窗体的radio buttons都将具有相互排他性，所以如果你想在一个窗体中表达多组radio buttons的效果，需要显式地对它们进行分组，可以使用QGroupBox或者QButtonGroup。建议使用QButtonGroup，因为它仅仅是一个容器，不会有任何视觉表现，并且对于包含在它里面的子buttons，QButtonGroup提供比QGroupBox方便的信号槽操作。

如何给单选按钮分组：

一种是通过将单选按钮放到一个Group Box中，另一种是选中要分组的单选按钮后右键，选择”指定到按钮组“，并新建按钮组（如果已经有按钮组，可以指定加入到某一个组中）：
在这里插入图片描述

分组后，在程序中就可以按组进行单选了：

代码中如何判断哪个按钮被选中

对该对象调用isChecked()方法，可判断该单选按钮是否被选中

单选按钮的样式

不能直接设置单选按钮的图片，要设置的是单选按钮的指示器的图片：

ui->radioButton->setStyleSheet(
            "QRadioButton::indicator{border-image: url(:/uncheck);}"
            "QRadioButton::indicator:checked{border-image: url(:/checked);}");

多选按钮

Check Box：复选框，可以提供多个复选框进行多个选中。
在这里插入图片描述
代码中如何判断复选框是否选中

也是通过isChecked()方法来判断：

    if (ui->chkSport->isChecked())
    {
        std::cout << "运动" << std::endl;
    }
    if (ui->chkMovie->isChecked())
    {
        std::cout << "电影" << std::endl;
    }
    if (ui->chkMusic->isChecked())
    {
        std::cout << "音乐" << std::endl;
    }

其他的按钮

Tool Button：工具按钮，可以隐藏文字只显示图片，通常用在工具栏上的快捷操作。

Command Link Button：命令连接按钮，默认带一个箭头图标，通常用于进行向导之类的窗口中

Dialog Button Box：对话框按钮盒，默认包含了对话框中的确认和取消两个按钮，其中OK按钮会发射accepted信号，cancel按钮发射rejected信号。

显示控件

在这里插入图片描述
Display Widgets分类下都是和显示相关的控件，比较常用的有：

Label：简单的显示控件，可以显示文字和图片，通过设置其text属性可以设置文本内容，设置其pixmap属性可以设置其中的图片，设置可以通过设计器直接设置：
在这里插入图片描述
另外scaledContents属性可以进行内容的缩放，如果设置了pixmap，则可以按控件尺寸进行图片的缩放。

相应的其实是通过调用setText(const QString &)和setPixmap(const QPixmap &)函数来设置其中显示的文本和图片，但是要注意，如果同时调用这两个方法是不会同时起作用的，后调用的设置会覆盖前面的设置。
在这里插入图片描述

如果要设置带背景图，带文字的Label，可以通过编辑控件的样式表，使用样式中的背景图来设置。

设置文字颜色和字体：
在这里插入图片描述
其中palette是调色板，用来设置整个控件上的颜色，包括文本颜色、按钮上的文字颜色等，下方还有预览效果

不过直接在样式表中修改更加简单。

其他显示控件

Text Browser：文本显示控件，默认是只读，可以修改其”Readonly“属性使其可输入。
TextBrowser可以支持文本的自动换行，并且超出显示范围时会自动添加滚动条支持滚动浏览。
Calendar Widget：日历控件，显示一个日历，同时可以使用selectedDate()方法来返回当前选中的日期，返回值是一个QDate类型的数据。
LCD Number：模仿 LCD 数字的显示组件，可以显示整数或浮点数，显示整数时可以不同进制显示
Progress Bar：进度条，一般用于显示任务进度，可用于数值的百分比显示。

输入控件

在这里插入图片描述
Qt提供了很多的输入控件，常用的有：

Line Edit：单行文本编辑框，可以通过设置属性使其成为密码输入框
Text Edit：文本编辑框，可以编辑和显示纯文本和富文本（HTML、MD），可对用户输出进行快速响应，并优化了处理大型文档的能力
Plain Text Edit：用来编辑和显示多行简单纯文本内容
Spin Box、Double Spin Box：数字调整框
Combo Box：组合下拉框
Time Edit、Date Edit、Date/Time Edit：时间、日期编辑框、日期时间编辑框
Dial：表盘式数值输入控件

数据项控件

在这里插入图片描述
Item Widgets继承自Item Views，功能较多，使用上要简单一些，因此建议使用。缺点是处理大数据量时性能相对较低。

Item Views类控件是MVC（Model、View、Controller）架构的一种简化，数据和展现及实现逻辑分开，数据在Model中存储和操作，View负责展现、界面操作及逻辑控制；Item Widgets则将数据、展现及控制合并在一起，开发中没有Item Views灵活，实际上Item Widgets就是在Item Views的基础上绑定了一个默认的存储并提供了相关方法。

List Widget：列表控件，以一列的方式展示数据
Tree Widget：树形控件
Table Widget：表格控件，以行列形式展示数据，比较常用，例如显示多名学生信息、显示公司内员工信息等

容器控件

在这里插入图片描述
容器控件是为了容纳其他控件使用的，例如Group Box进行分组，Tab Widget用来创建标签页，Scroll Area可以用来设计复杂的滚动页面（例如页面上的控件是动态添加进去的，需要自适应滚动）。

其他的控件使用较少。

布局

Qt布局介绍

当我们在界面上摆放了多个控件后，控件之间是杂乱无章的，当窗口尺寸变化时，也不会自动调整，这就需要使用布局来解决这个问题。

布局控件在设计器的Layouts分类下：
在这里插入图片描述
这里还少了一个分裂器布局，在工具栏上：

当我们将控件纳入到指定的布局中，控件的摆放位置以及大小都会受到布局的限制。

注意，在设置布局时，别忘了设置顶层布局，也就是窗体的布局，顶层布局的作用是确保窗口大小在调整时能正确的调整控件的大小。

Horizontal Layout：水平布局，被纳入水平布局中的控件将总是以水平方向排列

Vertical Layout：垂直布局，控件将按照垂直方向排列

Grid Layout：栅格布局，此布局以网格样式管理控件，其中每个格子的大小是相同的

From Layout：窗体布局（类似于表单），该布局以两列形式排列控件，其中左侧列的宽度将会比较少且固定，右侧列的控件大小可以改变

Spliter：分裂器是一个可以包含其他控件的控件，内部控件会被一个分割条分隔开，并且拖动分隔条可以改变内部控件的大小，通常用来配合其他的布局进行界面控件的排列控制。

示例：
在这里插入图片描述

PS：设定编辑区的最大高度，树形控件的最大宽度

运行效果：
在这里插入图片描述

设置布局的方式

1、先拖布局，再将控件拖入到布局中

2、选中需要纳入布局的控件，之后点击工具栏上的布局快捷按钮，或者右键后选择”布局“

样式

Qt中可以通过设置控件的styleSheet属性给控件进行一些美化操作，这里的styleSheet属性可以直接设置一些现有的资源属性：
在这里插入图片描述

另外，还可以通过读取外部样式表的方式来设置控件样式。

Qt中的样式和HTML中的CSS样式表很像，在Qt中的外部样式表需要简历qss文件，其中编写样式属性，然后需要将qss样式表文件添加到资源文件qrc中，之后就可以读取设置了。

外部样式表

1、创建一个文本文件，并将后缀名保存为qss：
在这里插入图片描述

2、编写样式规则

样式规则类似于CSS样式，由选择符和属性组成，例如：

QPushButton {
color: white;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88d, stop: 0.1 #99e, stop: 0.49 #77c, stop: 0.5 #66b, stop: 1 #77c);
border-width: 1px;
border-color: #339;
border-style: solid;
border-radius: 7;
padding: 3px;
font-size: 10px;
padding-left: 5px;
padding-right: 5px;
min-width: 50px;
max-width: 50px;
min-height: 13px;
max-height: 13px;
}

QPushButton:hover {
background-color: #333333;
border-color: #444444;
}

QPushButton:pressed {
background-color: #111111;
border-color: #333333;
color: yellow;
}

QPushButton:disabled {
color: #333333;
}

3、添加到qrc资源中：
在这里插入图片描述
4、应用样式

样式规则有针对某个控件的，有针对全局的，例如要对全局应用样式，则可以：

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 加载样式资源文件
    QFile f(":/style.qss");
    f.open(QFile::ReadOnly);
    a.setStyleSheet(f.readAll());

    MyFirstWnd w;
    w.show();
    return a.exec();
}