QT原生控件-QGroupBox的使用及样式

目录

• • @[TOC](目录)
• 前言
• 一、QGroupBox初步介绍
• 二、基本功能
• • • 1.创建
    • 2.属性设置
• 三、信号
• 四、QGroupBox样式
• • 选择器

前言

本文主要介绍的是使用代码生成的情况下对控件的介绍，包括拥有的功能及能修改的样式，也会说明在qtdesiner拖拽控件生成和使用代码生成控件的区别（如果有的话，遇到了的会说），此版本不属于最终版本，以后遇到什么新奇的点会继续更新！本文基于QT官方的文档进行的编写，QT版本为qt 5.14.0，编写环境为Windows11。不得不说官方文档真是个好东西，有时候有些不会的上去一看就能有灵感解决了，可惜没有中文版本的。

一、QGroupBox初步介绍

QGroupBox是QT中的容器控件，分组框，类似QWidget，可以装各种控件在里面，然后区别QWidget的是QGroupBox可以带标题在border处，类似下图，标题位置可在左上或者右上；QGroupBox在QT中承担的大部分作用还是起到一个装饰或者装某一类相同控件的作用，没有这么多的功能接口，所以本文主要还是以介绍怎么解决QGroupBox的标题下陷问题为主。

二、基本功能

1.创建

QGroupBox* box = new QGroupBox("标题");	//无参代表创建一个没有标题的QGroupBox

2.属性设置

1）setTitle()
设置QGroupBox的标题文字

void setTitle(const QString &title)

2）title()
获取当前QGroupBox的标题文字

QString title() const

3）setCheckable()
设置QGroupBox是否可选中，在QGroupBox中有QCheckBox的情况下

void setCheckable(bool checkable)

4）isCheckable()
检查分组框是否有复选框

bool isCheckable() const

5）setChecked()
设置分组框的选中状态（仅当有QCheckBox时有效）

void setChecked(bool checked)

6）isChecked()
检查分组框是否为选中状态

bool isChecked() const

7）setFlat()
设置分组框是否扁平显示，下图所示

void setFlat(bool flat)

7）isFlat()
检查分组框是否为扁平样式

bool isFlat() const

7）setAlignment()
设置标题文字的对齐方式

//Qt::AlignLeft: 左对齐（默认）
//Qt::AlignCenter: 居中
//Qt::AlignRight: 右对齐
void setAlignment(int alignment)

7）alignment()
获取当前标题的对齐方式

Qt::Alignment alignment() const

三、信号

1）clicked
当用户点击QGroupBox中的QCheckBox时就会发出信号，没有QCheckBox的时候点击"标题"区域也能够发出信号

void clicked(bool checked)​​

2）toggled
当QGroupBox内的QCheckBox的选中状态发生变化时触发

void toggled(bool on)

四、QGroupBox样式

选择器

::title
针对QGroupBox的标题区域样式做处理

QGroupBox::title {
    color: white;
    background: red;
}

常用样式
我们有时候需要设置QGroupBox的border样式，但是如果正常设置的话，例如下面

QGroupBox {
    border:1px solid black;
}

将会出现这样的效果
我们可以看到border的效果是有了，但是我们设置的标题区域却塌下去了，不和border在一条线上了，这种情况我们可以使用::title选择器，像下面这样

QGroupBox
{
	border:1px solid black;
	margin-top: 1.3ex;				/*第三步*/
}

QGroupBox::title
{
	subcontrol-origin:margin;		/*第一步*/
	left:10px;						/*第二步*/
}

然后我们就可以得到下面这个效果了

但是现在还有一个问题，就是如果你使用setAlignment()去让标题居中的话是居中不了的，所以我们使用了这种样式解决标题下陷的问题后，也需要使用样式去让标题居中，把left:10px去掉，改为 subcontrol-position: top center;即可，如下

本次分享就到这里了，如果有什么错误的话请指正，或者有什么疑问的，也可以在评论区一起探讨！