QT - qss(一)按钮及关联菜单
来源:互联网 发布:上海博科资讯java待遇 编辑:程序博客网 时间:2024/06/08 19:14
导读
正如web前端开发中CSS(Cascade Style Sheet)的作用一样,Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。这样,美工设计人员和逻辑实现者可以各司其职而不受干扰。更重要的是,由于界面和逻辑处理是分离的,低耦合性使得代码重构的工作量可以减少到最小。QSS和CSS的语法几乎一致,除了Qt自身增加的一些属性之外,其余的属性都可以在CSS2或CSS3中找到对应的属性。因此,如果曾经有过CSS的使用经验,那么QSS的使用将游刃有余。关于QSS的使用实践,打算撰写一系列博客来记录使用过程中的一些技巧和方法。本篇是系列第一篇,主要探讨QPushButton及QMenu在QSS的作用下的效果。
QSS介绍
QSS(Qt Style Sheet)借鉴于CSS的良好思想,实现了界面和逻辑的分离。QSS中引入了盒模型(Box Model)概念,这是样式表技术中的核心概念之一。具体的解释网上说的挺多的,Qt本身自带的文档也有较为详细的说明。在使用盒模型进行设计之前,我们得了解下Qt中哪些组件可以用盒模型进行布局设计:
应用实例
下面看看如何用QSS对按钮及其关联菜单进行外观定制。我们首先用如下的代码初始化好按钮及其关联菜单,并在Windows 7默认主题下看看其效果:
ui.serviceType->setFixedWidth(95);
m_mainMenu =
new
QMenu(
this
);
m_osSubMenu =
new
QMenu(
this
);
m_appSubMenu =
new
QMenu(
this
);
m_details =
new
QAction(QStringLiteral(
"Details"
),
this
);
m_details->setCheckable(
true
);
m_details->setChecked(
true
);
m_settings =
new
QAction(QStringLiteral(
"Settings"
),
this
);
m_settings->setIcon(QIcon(
":/misc/preference"
));
m_settings->setShortcut(QKeySequence::Print);
m_os =
new
QAction(QStringLiteral(
"OS"
),
this
);
m_app =
new
QAction(QStringLiteral(
"Applications"
),
this
);
m_github =
new
QAction(QStringLiteral(
"Github"
),
this
);
m_github->setIcon(QIcon(
":/app/github"
));
m_github->setShortcut(QKeySequence(
"Ctrl+G"
));
m_amazon =
new
QAction(QStringLiteral(
"Amazon"
),
this
);
m_amazon->setIcon(QIcon(
":/app/amazon"
));
m_photoshop =
new
QAction(QStringLiteral(
"Photoshop"
),
this
);
m_photoshop->setIcon(QIcon(
":/app/photoshop"
));
m_facebook =
new
QAction(QStringLiteral(
"Facebook"
),
this
);
m_facebook->setIcon(QIcon(
":/app/facebook"
));
m_apple =
new
QAction(QStringLiteral(
"Apple"
),
this
);
m_apple->setShortcut(QKeySequence(
"Ctrl+A"
));
m_apple->setIcon(QIcon(
":/os/apple"
));
m_windows =
new
QAction(QStringLiteral(
"Windows"
),
this
);
m_windows->setIcon(QIcon(
":/os/windows"
));
m_windows->setShortcut(QKeySequence(
"Ctrl+W"
));
m_fedora =
new
QAction(QStringLiteral(
"Fedora"
),
this
);
m_fedora->setIcon(QIcon(
":/os/fedora"
));
m_fedora->setDisabled(
true
);
m_osSubMenu->addAction(m_apple);
m_osSubMenu->addAction(m_windows);
m_osSubMenu->addAction(m_fedora);
m_os->setMenu(m_osSubMenu);
m_appSubMenu->addAction(m_amazon);
m_appSubMenu->addAction(m_github);
m_appSubMenu->addAction(m_facebook);
m_appSubMenu->addSeparator();
m_appSubMenu->addAction(m_photoshop);
m_app->setMenu(m_appSubMenu);
m_mainMenu->addAction(m_details);
m_mainMenu->addSeparator();
m_mainMenu->addAction(m_os);
m_mainMenu->addAction(m_app);
m_mainMenu->addAction(m_settings);
ui.serviceType->setMenu(m_mainMenu);
先不加任何QSS效果,其效果如下:
一片灰蒙蒙的感觉,不亮堂。对于讲究实用性的软件产品,做到这一步已然足够。如若客户要求具备个性一点的外观呢?此时此刻,我们可以尝试用QSS来进行改造。我们将所有的样式语句放到一个*.qss文件中,然后在main函数中加载。需要注意的是,我们应该将.qss文件添加到.qrc文件中进行编译。每一次修改.qss文件之后应该重新编译.qrc文件。否则在界面上将看不出任何改变。代码如下:
QFile file(
":/ThemeRoller/style"
);
file.open(QFile::ReadOnly);
qApp->setStyleSheet(file.readAll());
file.close();
先考虑将QPushButton作为练手对象,编写如下QSS代码:
QPushButton {
background
:
white
;
border
:
1px
solid
rgb
(
41
,
57
,
85
);
border-radius:
3px
; # 设置边框具备
3
个像素的圆角
font-weight
:
bold
; # 字体设置为加粗
}
QPushButton:hover {
background
: lightgray;
}
效果对比如下:
效果似乎还不错,但是我们发现右边的箭头号已经偏移到右下角去了,不太和谐。我们尝试使用subcontrol-position和subcontrol-origin两个属性来进行调整(position和origin这两个属性在CSS中是非常容易被混淆的,具体含义需细细区分):
QPushButton::menu-indicator{ subcontrol-position: right center; subcontrol-origin: padding;}
显然,系统默认的箭头号不太和谐,于是我们再尝试换掉这个箭头号,并且在菜单打开时设置为向下的箭头号,菜单关闭时设置为水平向右的箭头号:
QPushButton::menu-indicator:open {
image:
url
(:/misc/down_arrow_
2
);
subcontrol-
position
:
right
center
;
subcontrol-origin: padding;
}
QPushButton::menu-indicator:closed {
image:
url
(:/misc/right_arrow_
2
);
subcontrol-
position
:
right
center
;
subcontrol-origin: padding;
}
得到的效果如下:
好吧,到此位置我们的按钮似乎好看多了。再来看看整个关联菜单的QSS该如何编写。首先,把背景色调整为白色是必须的,如下:
QMenu {
background-color
:
white
;
padding
:
1px
; # 缩小菜单项四个方向的padding
}
QMenu::item{
background-color
:
transparent
;
}
我们可以发现一个严重的缺陷,当鼠标划过相应的菜单项时,文本内容看不见了,显然是由于背景色的原因,所以我们还得修改一下啊:
QMenu::item:selected{
background-color
:
rgb
(
234
,
243
,
253
);
color
:
black
;
}
用伪状态:selected进行设置,当鼠标划过时将文本颜色设置为黑色,也即保持不变。但此时我们根本看不到鼠标划过的效果,因此给当前选中的菜单项一个背景色吧(rgb(234, 243, 253))。效果如何呢:
根据不同的需要,定制出来的外观也是千差万别的。主要是能理解好QSS中各种属性的作用,其余的工作就是做好布局设计和图片设计。美观大方的界面设计离不开精致的图标设计和合理的布局管理。
- QT - qss(一)按钮及关联菜单
- Qt Style Sheet实践(一):按钮及关联菜单
- Qt Style Sheet实践(一):按钮及关联菜单
- Qt Style Sheet实践(一):按钮及关联菜单
- Qt Qss按钮
- Qt(一)--- QSS的语法
- Qt之自定义菜单(按钮菜单)
- Qt之自定义菜单(按钮菜单)
- Qt之自定义菜单(按钮菜单)
- Qt之qss实现按钮三态.
- qt值qss(stylesheet)用法简介(一)
- 自学QT之菜单按钮(按钮菜单)即带有菜单的按钮
- Qt之QSS(QDarkStyleSheet)
- Qt之QSS(QTreeView)
- Qt--qss(暗橙色)
- QT实现图片按钮(用qss切割图片,或者放三张图片)
- qt 添加资源文件及使用qss
- Qt之QSS语法样式及编辑器
- 牛顿法与拟牛顿法学习笔记(一)牛顿法
- iOS开发中的这些权限,你搞懂了吗?
- SQL笔试题
- 综合实践求税收
- find命令之xargs与exec
- QT - qss(一)按钮及关联菜单
- sql优化in语句
- manyToMany,设置了“CascadeType.PERSIST”,无法级联存储
- 如何理解HTML结构的语意化
- maven配置其他源下载jar包(详细)
- Glide的使用
- eclipse下生成Java类图和时序图,生成UML图
- 每日一个js实例8--通过面向对象实现拖拽
- QT - qss(二)组合框QComboBox的定制