目录
描述
QPushButton
自定义复选框
输入框
列表框
菜单
实现登入界面
设置背景图
改变样式表
描述
这里介绍一些控件的样式设置
QPushButton
相关属性
| font-size | 设置⽂字⼤⼩. |
| border-radius | 设置圆⻆矩形. 数值设置的越⼤, ⻆就 "越圆". |
| background-color | 设置背景颜⾊ |
本人设置的不好看
QPushButton {font-size: 20px;border: 2px soild rgb(120, 23, 255);border-radius:10px;background-color:rgb(0, 0, 0);color: rgb(0, 0, 255)
}
QPushButton:pressed {background-color: rgb(255, 0, 0)
}
自定义复选框
相关属性
| 要点 | 说明 |
| ::indicator | ⼦控件选择器. 选中 checkbox 中的对钩部分. |
| :hover | 伪类选择器.选中⿏标移动上去的状态 |
| :pressed | 伪类选择器. 选中⿏标按下的状态. |
| :checked | 伪类选择器. 选中 checkbox 被选中的状态. |
| :unchecked | 伪类选择器. 选中 checkbox 未被选中的状态. |
| width | 设置⼦控件宽度. 对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨). |
| height | 设置⼦控件⾼度. 对于普通控件⽆效 (普通控件使⽤ geometry ⽅式设定尺⼨). |
| image | 设置⼦控件的图⽚. 像 QSpinBox, QComboBox 等可以使⽤这个属性来设置⼦控件的图⽚. |
创建⼀个 resource.qrc ⽂件, 并导⼊以下图⽚，可以去矢量图网站中下载，有很多的
使⽤⿊⾊作为 默认 形态.
使⽤蓝⾊作为 hover 形态.
使⽤红⾊作为 pressed 形态.
添加qrc资源
运行
可以使用添加资源的方式，来保证地址输入的正确
QCheckBox{font-size: 20px;
}
QCheckBox::indicator{width: 20px;height: 20px;
}
QCheckBox::indicator:unchecked {image: url(:/checkbox-off.png);
}
QCheckBox::indicator:unchecked:hover {image: url(:/checkbox_hover_off.png)
}
QCheckBox::indicator:unchecked:pressed {image: url(:/checkbox_pressed_off.png)
}
QCheckBox::indicator:checked {image: url(:/checkbox-on.png);
}
QCheckBox::indicator:hover {image: url(:/checkbox_hover_on.png);
}
QCheckBox::indicator:pressed {image: url(:/checkbox_pressed_on.png);
}
输入框
相关属性
| 属性 | 说明 |
| border-width | 设置边框宽度. |
| border-radius | 设置边框圆⻆. |
| border-color | 设置边框颜⾊. |
| border-style | 设置边框⻛格. |
| padding | 设置内边距. |
| color | 设置⽂字颜⾊. |
| background | 设置背景颜⾊. |
| selection-background-color | 设置选中⽂字的背景颜⾊. |
| selection-color | 设置选中⽂字的⽂本颜⾊. |
使用
QLineEdit {border-width: 2px;border-color: rgb(56, 255, 53);border-style: solid;border-radius: 20px;padding-left: 10px;color: rgb(170, 255, 0);font-size: 24px;background-color: rgb(255, 255, 127);selection-color: rgb(85, 255, 255);selection-background-color: rgb(255, 85, 255);
}列表框
相关属性
| ::item | 选中 QListView 中的具体条⽬. |
| :hover | 选中⿏标悬停的条⽬ |
| :selected | 选中某个被选中的条⽬. |
| background | 设置背景颜⾊ |
| border | 设置边框. |
| qlineargradient | 设置渐变⾊ |
QListWidget::item:hover {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FAFBFE, stop: 1 #DCDEF1);
}
QListWidget::item:selected {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6a6ea9, stop: 1 #888dd9);
} 
菜单
相关属性
| QMenuBar::item | 选中菜单栏中的元素. |
| QMenuBar::item:selected | 选中菜单来中的被选中的元素. |
| QMenuBar::item:pressed | 选中菜单栏中的⿏标点击的元素. |
| QMenu::item | 选中菜单中的元素 |
| QMenu::item:selected | 选中菜单中的被选中的元素. |
| QMenu::separator | 选中菜单中的分割线. |
使用
代码
QMenuBar {background-color: #f0f0f0;spacing: 5px;
}
QMenuBar::item {border-radius: 10px;padding: 3px 10px;background-color: rgb(255, 255, 210);
}
QMenuBar::item:selected {background-color: rgb(170, 85, 0);
}
QMune:item {border: 2px solid transparent;padding: 2px 10px;
}
QMenu::item:selected {border: 2px solid red;
}
Qmenu::separator {height: 2px;background-color: green;nargin: 0 5px;
}实现登入界面
首先拉取需要用到的控件，使用垂直布局管理器管理后，可以看到很不友好，我们需要设置一下它们的属性
因为使用了布局管理器，所以我们无法直接设置它们的高度和宽度
我们可以通过设置最小高度和最大高度来设置好控件的高度，当然宽度也可以这样设置
设置好之后，好看一些了
设置背景图
在 Qt 中我们无法直接在 QWidget 顶层窗口中去添加背景图
窗口背景设置方法
添加背景图
添加一层 Qframe
改变样式表
图片变扁扁的了
QFrame {border-image: url(:/cat.jpg);
}QLineEdit {color: white;background-color: #405361;padding: 0 5px;font-size: 20px;border: none;border-radius: 10px;
}QCheckBox {color: white;font-size: 18px;
}QPushButton {font-size: 20px;color: white;background-color: #555;border-radius: 10px;
}QPushButton:pressed {color: black;background-color: orange;
}
总结
