C++ Qt5学习笔记2020-12-4（pushbutton文字增加下划线，broder-radius圆角四个角和弯折程度，修改checkbox复选框中的小方框）_qt qpushbutton显示下划线

1、pushbutton文字增加下划线：

qss中增加text-decoration:underline;属性：

ui->qq_name->setStyleSheet("QPushButton#qq_name{background:transparent;color:white;text-decoration:underline;}");
1

运行结果：

2、broder-radius圆角的使用：

资料来自：https://blog.csdn.net/goforwardtostep/article/details/52084538

(1)broder-radius四角的属性：

border-top-left-radius //设置左上角圆角; 
border-top-right-radius //设置右上角圆角; 
border-bottom-left-radius //设置左下角圆角; 
border-bottom-right-radius //设置右下角圆角; 
border-radius //设置四个角圆角;
1
2
3
4
5

只设置上面的两个角变圆：

ui->groupBox->setStyleSheet("QGroupBox#groupBox{border:0px;border-top-left-radius:2px;border-top-right-radius:2px;border-image:url(:/new/prefix1/source/3.png);}");
1

（注意：边角变圆以后，可能会出现白色的角，之前提到过，那是因为变圆以后，但它的父控件还是矩形，所以要么把父控件透明，要么把父控件的边角也变圆）

(2)设置圆角横纵两个方向的弯曲程度：
只需要在border-radius中使用两个参数就可以了：
border-radius: 15px 50px
第一个参数设置X轴方向的半径
第二个参数设置Y轴方向的半径

对比一下：
一个参数：border-radius: 15px

两个参数：border-radius: 15px 50px

3、修改checkbox复选框中的小框：

本来想更改checkbox的小方框的颜色为灰色，在qss中添加代码：

//indicator表示checkbox的小框
QCheckBox#checkBox::indicator{border:1px solid rgb(166,166,166);}
1
2

执行结果：

虽然修改成功了，但是点击以后不显示勾了。

找了一些资料，在https://blog.csdn.net/liang19890820/article/details/50976944提供的官方资料：

QCheckBox{
        spacing: 5px;
        color: white;
}
QCheckBox::indicator {
        width: 17px;
        height: 17px;
}
QCheckBox::indicator:enabled:unchecked {
        image: url(:/Images/checkBox);
}
QCheckBox::indicator:enabled:unchecked:hover {
        image: url(:/Images/checkBoxHover);
}
QCheckBox::indicator:enabled:unchecked:pressed {
        image: url(:/Images/checkBoxPressed);
}
QCheckBox::indicator:enabled:checked {
        image: url(:/Images/checkBoxChecked);
}
QCheckBox::indicator:enabled:checked:hover {
        image: url(:/Images/checkBoxCheckedHover);
}
QCheckBox::indicator:enabled:checked:pressed {
        image: url(:/Images/checkBoxCheckedPressed);
}
QCheckBox::indicator:enabled:indeterminate {
        image: url(:/Images/checkBoxIndeterminate);
}
QCheckBox::indicator:enabled:indeterminate:hover {
        image: url(:/Images/checkBoxIndeterminateHover);
}
QCheckBox::indicator:enabled:indeterminate:pressed {
        image: url(:/Images/checkBoxIndeterminatePressed);
}
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

原来checkbox的是通过背景图片来实现的呀，也许原先是没有边框的。可能是我设置的qss把它原本的样式覆盖了，也可能是我设置的1像素的边框导致图片不显示了。

由上面的资料，checkbox提供的关于小框的样式修改的是它的宽高和背景图片：
所以需要改边框颜色，还不如直接改变它的背景图片。

去阿里图标库找了个复选框，大小改为14像素作为背景图片，然后设置qss：

    ui->checkBox->setStyleSheet("QCheckBox#checkBox{color:rgb(166,166,166);}"
                                "QCheckBox#checkBox::indicator:checked{image: url(:/new/prefix1/source/checkbox_checked.png)}"
                                "QCheckBox#checkBox::indicator:unchecked{image: url(:/new/prefix1/source/checkbox_unchecked.png)}");
    ui->checkBox_2->setStyleSheet("QCheckBox#checkBox_2{color:rgb(166,166,166);}"
                                  "QCheckBox#checkBox_2::indicator:checked{image: url(:/new/prefix1/source/checkbox_checked.png)}"
                                  "QCheckBox#checkBox_2::indicator:unchecked{image: url(:/new/prefix1/source/checkbox_unchecked.png)}");
1
2
3
4
5
6

运行结果：

修改前：

修改后：

点击前：

点击后：