对于一个完善的软件,布局管理是必不可少的。无论是想要界面中部件有一个很整齐的排列,还是想要界面能适应窗口的大小变化,都要进行布局管理。Qt中主要提供了QLayout类及其子类来作为布局管理器,它们可以实现常用的布局管理功能
布局管理器
认识布局
感受下四种布局管理器;
布局管理器只有在编辑时才能被看到
对布局本身也能进行布局
弹簧用来占位的
不想要的布局可以使用“打破布局”
布局策略
控件在布局管理器中的“摆放策略”
在Qt助手中搜索QSizePolicy,展示策略
选中一个PushButton,策略默认为Minimum,Fixed,0,0 比如现在把水平改为Fixed 垂直改为Expanding
- Expanding ——把两边撑满
- Preferred ——最优的
样式表
设置样式表
void setStyleSheet(QString sheetName)
{
//设置样式表
QFile file("../qssTest/qss/styleSheet.css");
file.open(QFile::ReadOnly);
QString styleSheet = QString::fromLatin1(file.readAll());
qApp->setStyleSheet(styleSheet);
}
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
qDebug()<<QDir::currentPath();
setStyleSheet("dark");
Widget w;
w.show();
return a.exec();
}
Qt Style Sheets
QToolTip
{
border: 1px solid black;
background-color: #ffa02f;
padding: 1px;
border-radius: 3px;
opacity: 100;
}
QWidget
{
color: #b1b1b1;
background-color: #323232;
}
QWidget:item:hover
{
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #ca0619);
color: #000000;
}
QWidget:item:selected
{
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}
QMenuBar::item
{
background: transparent;
}
QMenuBar::item:selected
{
background: transparent;
border: 1px solid #ffaa00;
}
QMenuBar::item:pressed
{
background: #444;
border: 1px solid #000;
background-color: QLinearGradient(
x1:0, y1:0,
x2:0, y2:1,
stop:1 #212121,
stop:0.4 #343434/*,
stop:0.2 #343434,
stop:0.1 #ffaa00*/
);
margin-bottom:-1px;
padding-bottom:1px;
}
QMenu
{
border: 1px solid #000;
}
QMenu::item
{
padding: 2px 20px 2px 20px;
}
QMenu::item:selected
{
color: #000000;
}
QWidget:disabled
{
color: #404040;
background-color: #323232;
}
QAbstractItemView
{
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4d4d4d, stop: 0.1 #646464, stop: 1 #5d5d5d);
}
QWidget:focus
{
/*border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);*/
}
QLineEdit
{
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4d4d4d, stop: 0 #646464, stop: 1 #5d5d5d);
padding: 1px;
border-style: solid;
border: 1px solid #1e1e1e;
border-radius: 5;
}
QPushButton
{
color: #b1b1b1;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
border-width: 1px;
border-color: #1e1e1e;
border-style: solid;
border-radius: 6;
padding: 3px;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}
QPushButton:pressed
{
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
}
QComboBox
{
selection-background-color: #ffaa00;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
border-style: solid;
border: 1px solid #1e1e1e;
border-radius: 5;
}
QComboBox:hover,QPushButton:hover
{
border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}
QComboBox:on
{
padding-top: 3px;
padding-left: 4px;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
selection-background-color: #ffaa00;
}
QComboBox QAbstractItemView
{
border: 2px solid darkgray;
selection-background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}
QComboBox::drop-down
{
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 0px;
border-left-color: darkgray;
border-left-style: solid; /* just a single line */
border-top-right-radius: 3px; /* same radius as the QComboBox */
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow
{
image: url(:/down_arrow.png);
}
QGroupBox:focus
{
border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}
QTextEdit:focus
{
border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}
QScrollBar:horizontal {
border: 1px solid #222222;
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.0 #121212, stop: 0.2 #282828, stop: 1 #484848);
height: 7px;
margin: 0px 16px 0 16px;
}
QScrollBar::handle:horizontal
{
background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 0.5 #d7801a, stop: 1 #ffa02f);
min-height: 20px;
border-radius: 2px;
}
QScrollBar::add-line:horizontal {
border: 1px solid #1b1b19;
border-radius: 2px;
background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 1 #d7801a);
width: 14px;
subcontrol-position: right;
subcontrol-origin: margin;
}
QScrollBar::sub-line:horizontal {
border: 1px solid #1b1b19;
border-radius: 2px;
background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 1 #d7801a);
width: 14px;
subcontrol-position: left;
subcontrol-origin: margin;
}
QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal
{
border: 1px solid black;
width: 1px;
height: 1px;
background: white;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
background: none;
}
QScrollBar:vertical
{
background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0.0 #121212, stop: 0.2 #282828, stop: 1 #484848);
width: 7px;
margin: 16px 0 16px 0;
border: 1px solid #222222;
}
QScrollBar::handle:vertical
{
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 0.5 #d7801a, stop: 1 #ffa02f);
min-height: 20px;
border-radius: 2px;
}
QScrollBar::add-line:vertical
{
border: 1px solid #1b1b19;
border-radius: 2px;
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
height: 14px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical
{
border: 1px solid #1b1b19;
border-radius: 2px;
background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #d7801a, stop: 1 #ffa02f);
height: 14px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
border: 1px solid black;
width: 1px;
height: 1px;
background: white;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
background: none;
}
QTextEdit
{
background-color: #242424;
}
QPlainTextEdit
{
background-color: #242424;
}
QHeaderView::section
{
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
}
QCheckBox:disabled
{
color: #414141;
}
QDockWidget::title
{
text-align: center;
spacing: 3px; /* spacing between items in the tool bar */
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #323232, stop: 0.5 #242424, stop:1 #323232);
}
QDockWidget::close-button, QDockWidget::float-button
{
text-align: center;
spacing: 1px; /* spacing between items in the tool bar */
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #323232, stop: 0.5 #242424, stop:1 #323232);
}
QDockWidget::close-button:hover, QDockWidget::float-button:hover
{
background: #242424;
}
QDockWidget::close-button:pressed, QDockWidget::float-button:pressed
{
padding: 1px -1px -1px 1px;
}
QMainWindow::separator
{
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #161616, stop: 0.5 #151515, stop: 0.6 #212121, stop:1 #343434);
color: white;
padding-left: 4px;
border: 1px solid #4c4c4c;
spacing: 3px; /* spacing between items in the tool bar */
}
QMainWindow::separator:hover
{
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #d7801a, stop:0.5 #b56c17 stop:1 #ffa02f);
color: white;
padding-left: 4px;
border: 1px solid #6c6c6c;
spacing: 3px; /* spacing between items in the tool bar */
}
QToolBar::handle
{
spacing: 3px; /* spacing between items in the tool bar */
background: url(:/images/handle.png);
}
QMenu::separator
{
height: 2px;
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #161616, stop: 0.5 #151515, stop: 0.6 #212121, stop:1 #343434);
color: white;
padding-left: 4px;
margin-left: 10px;
margin-right: 5px;
}
QProgressBar
{
border: 2px solid grey;
border-radius: 5px;
text-align: center;
}
QProgressBar::chunk
{
background-color: #d7801a;
width: 2.15px;
margin: 0.5px;
}
QTabBar::tab {
color: #b1b1b1;
border: 1px solid #444;
border-bottom-style: none;
background-color: #323232;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 2px;
margin-right: -1px;
}
QTabWidget::pane {
border: 1px solid #444;
top: 1px;
}
QTabBar::tab:last
{
margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
border-top-right-radius: 3px;
}
QTabBar::tab:first:!selected
{
margin-left: 0px; /* the last selected tab has nothing to overlap with on the right */
border-top-left-radius: 3px;
}
QTabBar::tab:!selected
{
color: #b1b1b1;
border-bottom-style: solid;
margin-top: 3px;
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #212121, stop:.4 #343434);
}
QTabBar::tab:selected
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin-bottom: 0px;
}
QTabBar::tab:!selected:hover
{
/*border-top: 2px solid #ffaa00;
padding-bottom: 3px;*/
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #212121, stop:0.4 #343434, stop:0.2 #343434, stop:0.1 #ffaa00);
}
QRadioButton::indicator:checked, QRadioButton::indicator:unchecked{
color: #b1b1b1;
background-color: #323232;
border: 1px solid #b1b1b1;
border-radius: 6px;
}
QRadioButton::indicator:checked
{
background-color: qradialgradient(
cx: 0.5, cy: 0.5,
fx: 0.5, fy: 0.5,
radius: 1.0,
stop: 0.25 #ffaa00,
stop: 0.3 #323232
);
}
QCheckBox::indicator{
color: #b1b1b1;
background-color: #323232;
border: 1px solid #b1b1b1;
width: 9px;
height: 9px;
}
QRadioButton::indicator
{
border-radius: 6px;
}
QRadioButton::indicator:hover, QCheckBox::indicator:hover
{
border: 1px solid #ffaa00;
}
QCheckBox::indicator:checked
{
image:url(:/images/checkbox.png);
}
QCheckBox::indicator:disabled, QRadioButton::indicator:disabled
{
border: 1px solid #444;
}
参考文档
Customizing Qt Widgets Using Style Sheets
使用样式表自定义Qt Widgets
-
qss = Qt Style Sheets
When using style sheets, every widget is treated as a box with four concentric rectangles: the margin rectangle, the border rectangle, the padding rectangle, and the content rectangle. The box model describes this in further detail.
使用样式表时,每个小部件都被视为具有四个同心矩形的框:空白矩形、边框矩形、填充矩形和内容矩形。盒子模型对此进行了更详细的描述。The four concentric rectangles appear conceptually as below:
-
四个同心矩形的概念如下:
定制PushButton
QPushButton { /* QPushButton{} 表示{}的qss对真个button生效 */
border: 2px solid #8f8f91; /* 边框<两个像素 实线 颜色> */
border-radius: 6px; /* 圆角 6个像素 */
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde); /* 背景 渐变颜色 */
min-width: 80px; /* 最小宽度 80像素 */
}
QPushButton:pressed { /* 鼠标按下去的效果 */
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton:flat {
border: none; /* no border for a flat push button */
}
QPushButton:default {
border-color: navy; /* make the default button prominent */
}
- 无边框的button,添加背景色
QPushButton { /* 去除边框 */
border: none; /* no border for a flat push button */
/*# background-color: rgb(255, 52, 26);*/
}
QPushButton::hover{ /* 鼠标经过上色 */
background-color:rgb(255,52,26);
}
QPushButton::pressed{ /* 鼠标按下上色 */
background-color:rgb(255,255,255);
}
QPushButton{
border-top-right-radius:5px; /* 上右5个像素圆角 */
}