Skip to content

Q
QMDemo

mahuifa / QMDemo

通知 1
Star 2
Fork 0
Q
QMDemo

体验新版 GitCode，发现更多精彩内容 >>

提交 9230d1df 编写于 作者: mahuifa's avatar mahuifa
浏览文件
操作

新功能：实现QssDemo功能 

    1、将QSpinBox样式改为父类的QAbstractSpinBox样式；
    2、实现QSplitter分离部件样式；
    3、实现QStatusBar状态栏样式；
    4、实现QTabWidget样式；
上级 e9b9e2d4
展开全部 隐藏空白更改
内联 并排
Showing with 882 addition and 26 deletion
QStyleDemo/QssDemo/mainwindow.cpp
浏览文件 @ 9230d1df
......@@ -14,6 +14,7 @@ MainWindow::MainWindow(QWidget *parent)
this->setWindowTitle("Qss样式表常见用法Demo");
init();
initStyle();
connectSlots();
}
MainWindow::~MainWindow()
......@@ -56,6 +57,10 @@ void MainWindow::init()
toolbar->addAction(open);
toolbar->addAction(save);
this->addToolBar(Qt::LeftToolBarArea, toolbar); // 添加工具栏，停靠在窗口左侧
// 设置状态栏
ui->statusbar->addPermanentWidget(new QLabel("状态栏永久label"));
ui->statusbar->showMessage("状态栏临时消息");
}
/**
......@@ -81,6 +86,16 @@ void MainWindow::initStyle()
}
}
/**
* @brief 绑定信号槽
*/
void MainWindow::connectSlots()
{
connect(ui->horizontalSlider, &QSlider::valueChanged, ui->progressBar, &QProgressBar::setValue);
connect(ui->horizontalSlider_2, &QSlider::valueChanged, ui->progressBar_2, &QProgressBar::setValue);
connect(ui->verticalSlider, &QSlider::valueChanged, ui->progressBar_3, &QProgressBar::setValue);
}
/**
* @brief 打印QCheckBox选中、未选中、不确定三态
* @param arg1
......@@ -89,3 +104,17 @@ void MainWindow::on_checkBox_stateChanged(int arg1)
{
qDebug() << arg1;
}
/**
* @brief 移除tab选项卡
* @param index
*/
void MainWindow::on_tabWidget_2_tabCloseRequested(int index)
{
if(index == -1) return;
QWidget* tab = ui->tabWidget_2->widget(index);
ui->tabWidget_2->removeTab(index);
delete tab;
tab = nullptr;
}
QStyleDemo/QssDemo/mainwindow.h
浏览文件 @ 9230d1df
......@@ -18,9 +18,12 @@ public:
private slots:
void on_checkBox_stateChanged(int arg1);
void on_tabWidget_2_tabCloseRequested(int index);
private:
void init();
void initStyle();
void connectSlots();
private:
Ui::MainWindow *ui;
......
QStyleDemo/QssDemo/mainwindow.ui
浏览文件 @ 9230d1df
此差异已折叠。
QStyleDemo/QssDemo/style.css
浏览文件 @ 9230d1df
......@@ -11,6 +11,7 @@ background-color: rgb(214, 214, 214);
background-repeat:no-repeat; /* 设置背景图像是否及如何重复*/
background-position:center; /* 设置背景图像的起始位置*/
background-attachment: scroll; /* 背景图像是否固定或者随着页面的其余部分滚动 */
color: rgb(0, 255, 0);
}
/*由于QScrollArea里还有一层QWidget，所以需要将这一层QWidget设置透明才可以通过QAbstractScrollArea设置背景*/
......@@ -522,7 +523,6 @@ QSlider::groove:horizontal {
height: 8px; /* 默认情况下，凹槽会扩展到滑块的大小。通过给它一个高度，它有一个固定的大小*/
background-color: qlineargradient(spread:reflect, x1:0.500364, y1:0.0561364, x2:0.5, y2:0.517045,
stop:0 rgba(168, 164, 168, 250), stop:1 rgba(232, 232, 232, 255));
margin: 2px 0px; /* 设置滑动条的滑动槽 上下边距2,左右边距0*/
border-radius: 4px; /* 设置滑动槽圆角*/
}
......@@ -536,6 +536,16 @@ QSlider::handle:horizontal {
border-radius: 8px; /* 通过设置圆角边框得到圆形的滑块 */
}
QSlider::sub-page:horizontal { /* 设置滑块滑过区域样式*/
border: 1px solid #999999;
border-radius: 4px;
background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
stop:0 rgba(231,80,229, 255),
stop:1 rgba(7,208,255, 255));
}
/********************QSlider竖向滑动条样式**********************/
QSlider::groove:vertical {
background-color: qlineargradient(spread:reflect, x1:0, y1:0.510682, x2:0.5, y2:0.517045,
......@@ -568,8 +578,8 @@ QSlider::sub-page:vertical { /* 设置滑块未滑过区域样式*/
border-radius: 4px;
}
/********************QSpinBox样式**********************/
QSpinBox {
/********************QAbstractSpinBox样式，适用于QDateTimeEdit、QTimeEdit、QDateEdit、QDoubleSpinBox、QSpinBox**********************/
QAbstractSpinBox {
text-align:right; /* 标题文本右对齐*/
height: 30px; /* 统一设置高度*/
/*padding-right: 15px; */ /* 设置元素的右内边距，为箭头腾出空间*/
......@@ -582,62 +592,266 @@ QSpinBox {
}
/* 增加按键样式*/
QSpinBox::up-button {
QAbstractSpinBox::up-button {
subcontrol-origin: border; /* 设置按键在盒子模型中的参考位置margin border padding content*/
subcontrol-position: top right; /* 设置按键停靠位置右上角*/
border: 1px solid grey; /* 设置按键边框，用于区分*/
}
QSpinBox::up-arrow {
QAbstractSpinBox::up-arrow {
border-image: url(:/image/上.png); /* 设置增加按键图标*/
}
/* 减少按键样式*/
QSpinBox::down-button {
QAbstractSpinBox::down-button {
subcontrol-origin: border;
subcontrol-position: bottom right;
border: 1px solid grey;
}
QSpinBox::down-arrow {
QAbstractSpinBox::down-arrow {
border-image: url(:/image/下d.png); /* 设置减少按键图标*/
}
/* 设置鼠标进入按键的样式*/
QSpinBox::up-button:hover,
QSpinBox::down-button:hover {
QAbstractSpinBox::up-button:hover,
QAbstractSpinBox::down-button:hover {
background-color: rgba(0, 170, 255, 100);
}
/* 设置鼠标点击按键的样式*/
QSpinBox::up-button:pressed,
QSpinBox::down-button:pressed{
QAbstractSpinBox::up-button:pressed,
QAbstractSpinBox::down-button:pressed{
background-color: rgba(0, 170, 255, 200);
}
QSpinBox::up-arrow:disabled, /* 禁用状态*/
QSpinBox::down-arrow:disabled,
QSpinBox::up-arrow:off, /* 值为最大值时处于关闭状态*/
QSpinBox::down-arrow:off {
QAbstractSpinBox::up-arrow:disabled, /* 禁用状态*/
QAbstractSpinBox::down-arrow:disabled,
QAbstractSpinBox::up-arrow:off, /* 值为最大值时处于关闭状态*/
QAbstractSpinBox::down-arrow:off {
background-color: rgb(210, 210, 210);
}
/* 设置使用加减图标的样式*/
QSpinBox[buttonSymbols="1"]::up-button {
QAbstractSpinBox[buttonSymbols="1"]::up-button {
subcontrol-origin: border;
subcontrol-position: right;
border: 1px solid grey;
}
QSpinBox[buttonSymbols="1"]::up-arrow {
QAbstractSpinBox[buttonSymbols="1"]::up-arrow {
border-image: url(:/image/加.png);
}
QSpinBox[buttonSymbols="1"]::down-button {
QAbstractSpinBox[buttonSymbols="1"]::down-button {
subcontrol-origin: border;
subcontrol-position: left;
border: 1px solid grey;
}
QSpinBox[buttonSymbols="1"]::down-arrow {
QAbstractSpinBox[buttonSymbols="1"]::down-arrow {
border-image: url(:/image/减.png);
}
/********************QSplitter样式**********************/
#groupBox_13 QWidget { /* 为widget设置边框，方便观看边界*/
border: 1px solid red;
}
QSplitter::handle {
height: 12px; /* 设置分割滑块高度*/
}
/* 设置水平分离布局滑块样式*/
QSplitter::handle:horizontal {
background-color: qlineargradient(spread:reflect, x1:0, y1:0.510682, x2:0.5, y2:0.517045,
stop:0 rgba(0, 204, 213, 250),
stop:1 rgba(232, 232, 232, 255));
}
/* 设置竖直分离布局滑块样式*/
QSplitter::handle:vertical {
background-color: qlineargradient(spread:reflect, x1:0.494, y1:0.0106818, x2:0.5, y2:0.517045,
stop:0 rgba(0, 204, 213, 250),
stop:1 rgba(232, 232, 232, 255));
}
/* 设置水平分离布局滑块按下样式*/
QSplitter::handle:horizontal:pressed {
background-color: qlineargradient(spread:reflect, x1:0, y1:0.527727, x2:0.5, y2:0.517045,
stop:0 rgba(255, 0, 0, 250),
stop:1 rgba(232, 232, 232, 255));
}
/* 设置竖直分离布局滑块按下样式*/
QSplitter::handle:vertical:pressed {
background-color: qlineargradient(spread:reflect, x1:0.494, y1:0.0106818, x2:0.5, y2:0.517045,
stop:0 rgba(255, 0, 0, 250),
stop:1 rgba(232, 232, 232, 255));
}
/********************QStatusBar状态栏样式**********************/
QStatusBar {
background: brown; /* 设置状态栏背景色*/
color: white; /* 设置状态栏文本颜色*/
}
QStatusBar QWidget{ /* 设置状态栏中包含的部件的样式*/
color: white;
}
QStatusBar::item { /* 设置状态栏中插入项的样式*/
border: 2px solid white;
border-radius: 3px;
}
/********************QTabWidget样式**********************/
QTabWidget::pane { /* tabwidget窗格样式*/
border: 2px solid #C2C7CB;
position: absolute; /* 指定了元素的定位类型static、relative、fixed、absolute、sticky*/
top: -1em; /* 上边距向上 偏移1em*/
}
/* tabBar标签栏在顶部时，tabBar栏向左边距15*/
QTabWidget::tab-bar:top {
/* left: 15px;*/ /* 标签栏向右偏移15*/
alignment: center; /* 标签栏居中对齐*/
}
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 2px solid #C4C4C3;
padding: 2px; /* 设置内边距填充*/
}
/* tab选中或者鼠标进入的样式*/
QTabBar::tab:selected,
QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
/* tabBar为横向选中的样式，在顶部*/
QTabBar::tab:top:selected{
border-color: red;
border-bottom-color: #C2C7CB; /* 底部边框颜色与pane边框颜色相同*/
}
/* tabBar为横向未选中的样式，在顶部*/
QTabBar::tab:top:!selected {
margin-top: 2px; /* 设置元素的上部边距，设置在选中里不生效*/
}
/* tabBar为横向选中的样式，在底部*/
QTabBar::tab:bottom:selected{
border-color: red;
border-top-color: #C2C7CB;
margin-top: 2px; /* 设置元素的下边距，设置在未选中里不生效（我也不知道为啥）*/
}
/* tabBar为横向的样式，在顶部或者底部*/
QTabBar::tab:top,
QTabBar::tab:bottom
{
min-width: 80px;
height: 20px;
border-top-left-radius: 22px; /* 通过设置左上角，右下角圆角得到特殊图形*/
border-bottom-right-radius: 22px;
}
/* tabBar为竖向的样式，在左侧或者右侧*/
QTabBar::tab:right,
QTabBar::tab:left {
min-height: 80px;
width: 20px;
}
/* tabBar为竖向选中的样式，在左侧*/
QTabBar::tab:left:selected{
border-color: red;
border-right-color: #C2C7CB; /* 右侧边框颜色与pane边框颜色相同*/
}
/* tabBar为竖向未选中的样式，在左侧*/
QTabBar::tab:left:!selected {
margin-left: 2px; /* 设置元素的左边距*/
}
/* tabBar为竖向选中的样式，在右部*/
QTabBar::tab:right:selected {
border-color: red;
border-left-color: #C2C7CB;
margin-left: 2px; /* 设置元素的左边距*/
}
/* 设置第一个tab选项卡未选中样式*/
QTabBar::tab:first:!selected {
border-left-color: #00FF00;
border-left-width: 3px;
}
/* 设置中间所有的tab选项卡未选中样式*/
QTabBar::tab:middle:!selected {
border-bottom-color: #00FF00;
border-bottom-width: 3px;
}
/* 设置最后一个tab选项卡未选中样式*/
QTabBar::tab:last:!selected {
border-right-color: #00FF00;
border-right-width: 3px;
}
/* 如果只有一个tab选项卡时的样式*/
QTabBar::tab:only-one {
background: #00FFFF;
}
/*QTabBar的撕裂指示器，当tab标签过多时前面的tab标签显示不下时出现*/
QTabBar::tear {
background-color: qlineargradient(spread:pad, x1:0, y1:0.482591, x2:1, y2:0.477273,
stop:0.0113636 rgba(85, 170, 255, 255),
stop:1 rgba(255, 255, 255, 255));
width: 20px;
}
/* QTabBar的滚动条，当tab标签过多时出现，包含两个调节but*/
QTabBar::scroller {
width: 50px; /* 设置两个but容器的宽度来调整but大小*/
}
/* 滚动按钮是工具按钮*/
QTabBar QToolButton {
border: 2px solid #00FFFF;
min-width: 0px; /* 因为在前面全局QToolButton最小宽度设置为80，这里需要还原*/
min-height: 0px;
margin-right: 2px;
}
/* 设置QTabWidget右上角右but样式*/
QTabBar QToolButton::right-arrow {
image: url(:/image/右.png);
}
/* 设置QTabWidget右上角左but样式*/
QTabBar QToolButton::left-arrow {
image: url(:/image/左.png);
}
/* 设置tab标签右侧关闭but样式*/
QTabBar::close-button {
image: url(:/image/close.png);
subcontrol-position: right; /* 这里有一个bug，只能设置right，否则but就会实现（不知道是不是我使用的问题还是就有这个bug）*/
border: 1px solid red;
}
/* 鼠标进入样式*/
QTabBar::close-button:hover {
background-color: rgba(85, 170, 255, 150);
}
/* 鼠标按下样式*/
QTabBar::close-button:pressed {
background-color: rgba(255, 0, 0, 150);
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或