界面优化 - 控件样式示例

目录

一、样式属性

1. 盒模型 (Box Model)

二、控件样式示例

1. 按钮

2. 复选框

3. 单选框

4. 输入框

5. 列表

6. 菜单栏

7. 登录界面

---

一、样式属性

1. 盒模型 (Box Model)

在文档 Customizing Qt Widgets Using Style Sheets 的 The Box Model 章节介绍了盒模型.

一个遵守盒模型的控件, 由上述几个部分构成.

• Content 矩形区域: 存放控件内容. 比如包含的文本/图标等.
• Border 矩形区域: 控件的边框.
• Padding 矩形区域: 内边距. 边框和内容之间的距离.
• Margin 矩形区域: 外边距. 边框到控件 geometry 返回的矩形边界的距离

默认情况下, 外边距, 内边距, 边框宽度都是 0.

可以通过一些 QSS 属性来设置上述的边距和边框的样式.

QSS 属性	说明
margin	设置四个方向的外边距. 复合属性.
padding	设置四个方向的内边距. 复合属性.
border-style	设置边框样式
border-width	边框的粗细
border-color	边框的颜色
border	复合属性, 相当于 border-style + border-width + border-color

---

代码示例: 设置边框和内边距

1) 在界面上创建一个 label

2) 修改 main.cpp, 设置全局样式

• border: 5px solid red 相当于 border-style: solid; border-width: 5px; border-color: red; 三个属性的简写形式.
• padding-left: 10px; 是给左侧设置内边距.

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

    QString style = "";
    style += "QLabel { border: 5px solid red; padding-left: 10px; }";
    a.setStyleSheet(style);

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

3) 运行程序, 可以看到样式发生了变化

---

代码示例: 设置外边距

为了方便确定控件位置, 演示外边距效果, 我们使用代码创建一个按钮.

1) 修改 widget.cpp, 创建按钮, 并设置样式.

#include <QPushButton>
#include <QDebug>

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

    QPushButton* button = new QPushButton(this);
    button->setGeometry(0, 0, 100,100);
    button->setText("按钮");
    button->setStyleSheet("QPushButton { border: 5px solid green; margin: 20px; }");

    const QRect& rect = button->geometry();
    qDebug() << rect;

}

2) 运行程序, 可以看到, 当前按钮的边框被外边距挤的缩小了. 但是获取到的按钮的 Geometry 是不变的.

二、控件样式示例

1. 按钮

代码示例: 自定义按钮

1) 界面上创建一个按钮

 2) 右键 -> 改变样式表, 使用 Qt Designer 设置样式

QPushButton{
	font-size : 20px;
	border-radius : 10px;
	border : 5px solid rgb(0, 255, 127);
	background-color : rgb(78, 253, 255)
}

QPushButton:pressed{
	background-color : rgb(85, 170, 255)
}

3) 执行程序, 可以看到效果

 属性小结：

属性	说明
font-size	设置文字大小.
border-radius	设置圆角矩形. 数值设置的越大, 角就 "越圆".
background-color	设置背景颜色.

2. 复选框

代码示例: 自定义复选框

1) 创建⼀个 resource.qrc 文件, 并导入以下图片.

使用黑色作为默认形态.

使用天蓝色作为 hover 形态.

使用蓝色作为 pressed 形态.

• 注意这里的文件命名

使用 阿里矢量图标库,  可以下载到上述图片.下载的时候可以手动选择颜色.

 2) 创建⼀个复选框

3) 编辑复选框的样式

QCheckBox {
	font-size: 50px;
}

QCheckBox::indicator {
	width: 50px;
	height: 50px;
}

QCheckBox::indicator:unchecked {
	image: url(:/checkbox-unchecked.png);
}

QCheckBox::indicator:unchecked:hover {
	image: url(:/checkbox-unchecked_hover.png);
}

QCheckBox::indicator:unchecked:pressed {
	image: url(:/checkbox-unchecked_pressed.png);
}

QCheckBox::indicator:checked {
	image: url(:/checkbox-checked.png);
}
QCheckBox::indicator:checked:hover {
	image: url(:/checkbox-checked _hover.png);
}

QCheckBox::indicator:checked:pressed {
	image: url(:/checkbox-checked_pressed.png);
}

4) 运行程序, 可以看到此时的复选框就变的丰富起来了.(此处截图看不出来效果)

 属性小结：

要点	说明
::indicator	子控件选择器. 选中 checkbox 中的对钩部分.
:hover	伪类选择器. 选中鼠标移动上去的状态.
:pressed	伪类选择器. 选中鼠标按下的状态.
:checked	伪类选择器. 选中 checkbox 被选中的状态.
:unchecked	伪类选择器. 选中 checkbox 未被选中的状态.
width	设置子控件宽度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸).
height	设置子控件高度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸).
image	设置子控件的图片. 像 QSpinBox, QComboBox 等可以使用这个属性来设置子控件的图片.

3. 单选框

代码示例: 自定义单选框

1) 创建 resource.qrc 文件, 并导入以下图片.

使用黑色作为默认形态.

使用蓝色作为 hover 形态.

使用红色作为 pressed 形态.

• 注意这里的文件命名.

2) 在界面上创建两个单选按钮

3) 在 Qt Designer 中编写样式

• 此处为了让所有 QRadioButton 都能生效, 把样式设置在 Widget 上了. 并且使用后代选择器选中了 QWidget 里面的 QRadioButton .

QWidget QRadioButton {
	font-size: 20px;
}

QWidget QRadioButton::indicator {
	width: 20px;
	height: 20px;
}

QWidget QRadioButton::indicator:unchecked {
	image: url(:/radio-unchecked.png);
}

QWidget QRadioButton::indicator:unchecked:hover {
	image: url(:/radio-unchecked_hover.png);
}

QWidget QRadioButton::indicator:unchecked:pressed {
	image: url(:/radio-unchecked_pressed.png);
}

QWidget QRadioButton::indicator:checked {
	image: url(:/radio-checked.png);
}

QWidget QRadioButton::indicator:checked:hover {
	image: url(:/radio-checked_hover.png);
}

QWidget QRadioButton::indicator:checked:pressed {
	image: url(:/radio-checked_pressed.png);
}

 4) 运行程序, 观察效果

属性小结：

要点	说明
::indicator	子控件选择器. 选中 radioButton 中的对钩部分.
:hover	伪类选择器. 选中鼠标移动上去的状态.
:pressed	伪类选择器. 选中鼠标按下的状态.
:checked	伪类选择器. 选中 radioButton 被选中的状态.
:unchecked	伪类选择器. 选中 radioButton 未被选中的状态.
width	设置子控件宽度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸).
height	设置子控件高度. 对于普通控件无效 (普通控件使用 geometry 方式设定尺寸).
image	设置子控件的图片. 像 QSpinBox, QComboBox 等可以使用这个属性来设置子控件的图片.

4. 输入框

代码示例: 自定义单行编辑框

1) 在界面上创建⼀个单行编辑框

2) 在 Qt Designer 中编写样式.

QLineEdit {
	border-width: 1px;
	border-radius: 10px;
	border-color: rgb(58, 58, 58);
	border-style: inset;
	padding: 0 8px;
	color: rgb(255, 255, 255);
	background:rgb(100, 100, 100);
	selection-background-color: rgb(187, 187, 187);
	selection-color: rgb(60, 63, 65);
}

3) 执行程序观察效果.

属性小结：

属性	说明
border-width	设置边框宽度.
border-radius	设置边框圆角.
border-color	设置边框颜色.
border-style	设置边框风格.
padding	设置内边距.
color	设置文字颜色.
background	设置背景颜色.
selection-background-color	设置选中文字的背景颜色.
selection-color	设置选中文字的文本颜色.

5. 列表

代码示例: 自定义列表框

1) 在界面上创建⼀个 ListWidget

 2) 编写代码

QListView::item:hover {
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
				stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}

QListView::item:selected {
	border: 1px solid #6a6ea9;
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
				stop: 0 #6a6ea9, stop: 1 #888dd9);
}

3) 执行程序, 观察效果

属性小结： 

要点	说明
::item	选中 QListView 中的具体条目.
:hover	选中鼠标悬停的条目
:selected	选中某个被选中的条目.
background	设置背景颜色
border	设置边框.
qlineargradient	设置渐变色.

关于 qlineargradient：

qlineargradient 有 6 个参数.

• x1, y1: 标注了⼀个起点.
• x2, y2: 标注了⼀个终点.
• 这两个点描述了⼀个 "方向".

例如:

• x1: 0, y1: 0, x2: 0, y2: 1 就是垂直方向从上向下 进行颜色渐变.
• x1: 0, y1: 0, x2: 1, y2: 0 就是水平方向从左向右 进行颜色渐变.
• x1: 0, y1: 0, x2: 1, y2: 1 就是从左上往右下方向 进行颜色渐变.

stop0 和 stop1 描述了两个颜色. 渐变过程就是从 stop0 往 stop1 进行渐变的.

---

代码例子: 理解渐变色

1) 界面不创建任何控件

2) 编写样式

QWidget {
        background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #fff,stop: 1 #000);
}

• 当前按照 垂直从上往下 从 白色 过渡到 黑色

3) 修改代码

QWidget {
	background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop: 0 #fff, stop: 1 #000);
}

• 当前按照 水平从左往右 从 白色 过渡到 黑色

6. 菜单栏

代码示例: 自定义菜单栏

1) 创建菜单栏

• 创建若干菜单项和一个分隔符.

2) 编写样式

QMenuBar {
	background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
					stop:0 lightgray, stop:1 darkgray);
	spacing: 3px; /* spacing between menu bar items */
}

QMenuBar::item {
	padding: 1px 4px;
	background: transparent;
	border-radius: 4px;
}

QMenuBar::item:selected { /* when selected using mouse or keyboard */
	background: #a8a8a8;
}

QMenuBar::item:pressed {
	background: #888888;
}

QMenu {
	background-color: white;
	margin: 0 2px; /* some spacing around the menu */
}
QMenu::item {
	padding: 2px 25px 2px 20px;
	border: 3px solid transparent; /* reserve space for selection border */
}

QMenu::item:selected {
	border-color: darkblue;
	background: rgba(100, 100, 100, 150);
}

QMenu::separator {
	height: 2px;
	background: lightblue;
	margin-left: 10px;
	margin-right: 5px;
}

3) 执行程序, 观察效果

属性小结：

要点	说明
QMenuBar::item	选中菜单栏中的元素.
QMenuBar::item:selected	选中菜单来中的被选中的元素.
QMenuBar::item:pressed	选中菜单栏中的鼠标点击的元素.
QMenu::item	选中菜单中的元素
QMenu::item:selected	选中菜单中的被选中的元素.
QMenu::separator	选中菜单中的分割线.

7. 登录界面

1) 在界面上创建元素

2) 使用布局管理器, 把上述元素包裹一下.

• 使用 QVBoxLayout 来管理上述控件.
• 两个输入框和按钮的 minimumHeight 均设置为 50. (元素在布局管理器中无法直接设置 width 和height, 使用 minimumWidth 和 minimumHeight 代替, 此时垂直方向的 sizePolicy 要设为 fixed).
• 右键 QCheckBox , 选择 Layout Alignment 可以设置 checkbox 的对齐方式(左对齐, 居中对齐, 右对齐).

 3) 设置背景图片.

• 把上述控件添加一个父元素 QFrame, 并设置 QFrame 和 窗口一样大.

        顶层窗口的 QWidget 无法设置背景图片. 因此我们需要再套上一层 QFrame. 背景图片就设置到 QFrame 上即可.

创建 resource.qrc, 并导入图片

编写 QSS 样式.

• 使用 border-image 设置背景图片, 而不是 background-image . 主要是因为 borderimage 是可以自动缩放的. 这一点在窗口大小发生改变时是非常有意义的.

QFrame {
    border-image: url(:/cat.jpg);
}

此时效果为：

4) 设置输入框样式

• 编写 QSS 代码

QLineEdit {
    color: #8d98a1;
    background-color: #405361;
    padding: 0 5px;
    font-size: 20px;
    border-style: none;
    border-radius: 10px;
}

运行程序效果: 

 

5) 设置 checkbox 样式

• 背景色使用 transparent 表示完全透明 (应用父元素的背景).

QCheckBox {
    color: white;
    background-color: transparent;
}

 运行程序效果: 

6) 设置按钮样式

QPushButton {
    font-size: 20px;
    color: white;
    background-color: #555;
    border-style: outset;
    border-radius: 10px;
}
QPushButton:pressed {
    color: black;
    background-color: #ced1db;
    border-style: inset;
}

执行程序

最终完整样式代码： 

QFrame {
	border-image: url(:/cat.png);
}

QLineEdit {
    color: #8d98a1;
    background-color: #405361;
    padding: 0 5px;
    font-size: 20px;
    border-style: none;
    border-radius: 10px;
}

QCheckBox {
    color: white;
    background-color: transparent;
}

QPushButton {
    font-size: 20px;
    color: white;
    background-color: #555;
    border-style: outset;
    border-radius: 10px;
}

QPushButton:pressed {
    color: black;
    background-color: #ced1db;
    border-style: inset;
}