styledemo.zip_QT样式_QT界面美化_Qt界面美化_style_界面美化

共60个文件

png：44个

css：2个

qm：2个

版权申诉

qt界面美化

style

界面美化

2 浏览量 2022-07-15 13:10:59 上传评论收藏 1.2MB ZIP 举报

在本文中，我们将深入探讨如何使用Qt库进行界面美化，主要关注`styledemo.zip`中的示例代码。Qt是一个强大的跨平台应用程序开发框架，广泛应用于桌面、移动和嵌入式设备。它提供了丰富的用户界面控件，同时也允许开发者自定义控件的样式，以实现独特的界面设计。我们要理解Qt中的样式表（QSS，Qt Style Sheets）。QSS类似于网页开发中的CSS，用于定义Qt控件的颜色、字体、边框、阴影等视觉属性。通过使用QSS，我们可以轻松地更改整个应用程序或单个控件的外观。`styledemo.zip`中的示例应该展示了如何运用QSS来改变Qt界面的样式。在`styledemo`项目中，可能包含了一个或多个`.ui`文件，这些是用Qt Designer创建的用户界面布局。`.ui`文件可以被编译成Python模块（`.py`），或者C++源代码（`.cpp`和`.h`），以便在程序中加载和使用。在这些文件中，我们可能会看到`setStyleSheet`函数的使用，这是设置控件样式的关键方法。例如，你可以使用以下QSS代码改变一个按钮的样式： ```python button.setStyleSheet(""" QPushButton { background-color: #336699; color: white; border-radius: 5px; border: 1px solid #000; } QPushButton:hover { background-color: #4477AA; } QPushButton:pressed { background-color: #225588; } """) ``` 这段代码将按钮的背景色设为深蓝色，文字颜色设为白色，并添加了圆角和边框。当鼠标悬停在按钮上时，背景色会变淡，点击时颜色更深。 Qt界面美化不仅限于颜色和形状，还可以调整控件的大小、间距、排列方式等。例如，你可以设置布局管理器（如QVBoxLayout、QHBoxLayout或QGridLayout）来控制控件的位置和间距，或者使用`setMinimumSize`和`setMaximumSize`方法来限制控件的大小。此外，`styledemo.zip`可能还包含了自定义控件的示例，这涉及到继承Qt的现有控件并重写其绘图行为。通过`paintEvent`方法，开发者可以完全控制控件的绘制过程，实现独特的视觉效果。 `styledemo.zip`提供了一套关于Qt界面美化的实践教程，包括使用QSS和自定义控件。对于希望提升Qt应用视觉体验的开发者来说，这是一个非常有价值的参考资料。通过学习和理解其中的代码，你可以掌握如何根据自己的需求设计出美观且个性化的用户界面。

资源推荐

资源详情

资源评论

收起资源包目录

styledemo.zip （60个子文件）

styledemo

quicreator.ui 39KB

styledemo.pro 868B

quicreator.cpp 6KB

snap_psblack.png 78KB

snap_flatwhite.png 59KB

head.h 180B

main.cpp 361B

other

main.ico 66KB

qss.qrc 2KB

qss

psblack.css 16KB

flatwhite

checkbox_unchecked.png 133B

calendar_prevmonth.png 341B

branch_open.png 273B

checkbox_parcial_disable.png 237B

add_bottom.png 181B

checkbox_checked.png 289B

add_left.png 219B

radiobutton_unchecked_disable.png 593B

radiobutton_unchecked.png 523B

checkbox_parcial.png 172B

calendar_nextmonth.png 358B

checkbox_unchecked_disable.png 137B

branch_close.png 167B

checkbox_checked_disable.png 301B

radiobutton_checked.png 726B

add_top.png 178B

add_right.png 214B

radiobutton_checked_disable.png 817B

psblack

checkbox_unchecked.png 150B

calendar_prevmonth.png 314B

branch_open.png 275B

checkbox_parcial_disable.png 251B

add_bottom.png 201B

checkbox_checked.png 307B

add_left.png 233B

radiobutton_unchecked_disable.png 715B

radiobutton_unchecked.png 564B

checkbox_parcial.png 188B

calendar_nextmonth.png 318B

checkbox_unchecked_disable.png 152B

branch_close.png 177B

checkbox_checked_disable.png 338B

radiobutton_checked.png 756B

add_top.png 197B

add_right.png 235B

radiobutton_checked_disable.png 932B

flatwhite.css 16KB

image

msg_info.png 3KB

btn_close.png 6KB

msg_question.png 4KB

Font Awesome Cheatsheet.png 968KB

qt_zh_CN.qm 115KB

msg_error.png 3KB

widgets.qm 593B

fontawesome-webfont.ttf 162KB

btn_ok.png 6KB

main.qrc 432B

main.rc 36B

quicreator.h 516B

readme.txt 4KB

PS：本样式demo完全开源。 V20170219首版开发计划 1：所有其他窗体都是其布居中的widget。 2：左上角图标、标题、标题居中、右上角最小化最大化关闭都可设置，包括设置样式+图标+图形字体（默认图形字体）。 3：左上角图标及右上角三个按钮可视化控制。同时提供外部访问权限。 4：无边框窗体可拉伸控制。 5：提供换肤接口，内置8套样式选择，也可自定义样式路径。 6：做成设计师插件，可以直接拖曳使用，所见即所得。 7：后期增加内置信息框、颜色框等弹出窗体的支持。 8：重新设计QSS样式，去掉单选框图片、滚动条图片，增加主菜单样式。样式表格式（1）：第一行为特殊自定义部分，可以通过读取文本文件识别到特殊的颜色值。用于特殊处理。（2）：第二行为全局样式设置，例如无虚线，全局字体大小，文字颜色，禁用控件颜色。（3）：其他部分（3）：标签控件（4）：按钮控件用Qt写项目写多了，为了满足不同客户的需求，需要定制不同样式的界面，QUI皮肤生成器应运而生。思考这个工具的架构花了一年时间，如何从复杂的配色方案中提取出共性，然后将共性转为具体的QSS文件。思考架构花了一年时间，编写大概花了一天时间完成。 demo演示版：http://pan.baidu.com/s/1jIkbVKU QUI皮肤生成器介绍： 1：极简设计，傻瓜式操作步骤:，只需简单几步即可设计出漂亮的皮肤。 2：所见即所得，想要什么好的皮肤，分分钟搞定。 3：自动生成样式中所需要的对应颜色的图片资源文件，比如单选框、复选框指示器图片。 4：集成自定义无边框标题栏样式、左边导航切换样式、顶部导航切换样式、设备面板样式。银色风格字体颜色：#000000 面板背景：#F5F5F5 边框颜色：#B2B6B9 普通渐变：#E1E4E6 #CCD3D9 加深渐变：#F2F3F4 #E7E9EB 高亮颜色：#00BB9E 蓝色风格字体颜色：#324C6C 面板背景：#CFDDEE 边框颜色：#7F9AB8 普通渐变：#C0D3EB #BCCFE7 加深渐变：#D2E3F5 #CADDF3 高亮颜色：#00BB9E 淡蓝色风格字体颜色：#386487 面板背景：#EAF7FF 边框颜色：#C0DCF2 普通渐变：#DEF0FE #C0DEF6 加深渐变：#F2F9FF #DAEFFF 高亮颜色：#00BB9E 深蓝色风格字体颜色：#7AAFE3 面板背景：#0E1A32 边框颜色：#132743 普通渐变：#133050 #133050 加深渐变：#033967 #033967 高亮颜色：#00BB9E 灰色风格字体颜色：#000000 面板背景：#F0F0F0 边框颜色：#A9A9A9 普通渐变：#E4E4E4 #A2A2A2 加深渐变：#DBDBDB #C1C1C1 高亮颜色：#00BB9E 浅灰色风格：字体颜色：#6F6F6F 面板背景：#F0F0F0 边框颜色：#D4D0C8 普通渐变：#EEEEEE #E5E5E5 加深渐变：#FCFCFC #F7F7F7 高亮颜色：#00BB9E 深灰色风格字体颜色：#5D5C6C 面板背景：#EBECF0 边框颜色：#A9ACB5 普通渐变：#D8D9DE #C8C8D0 加深渐变：#EFF0F4 #DDE0E7 高亮颜色：#00BB9E 黑色风格字体颜色：#F0F0F0 面板背景：#464646 边框颜色：#353535 普通渐变：#4D4D4D #292929 加深渐变：#636363 #575757 高亮颜色：#00BB9E 浅黑色风格字体颜色：#E7ECF0 面板背景：#616F76 边框颜色：#738393 普通渐变：#667481 #566373 加深渐变：#778899 #708090 高亮颜色：#00BB9E 深黑色风格字体颜色：#D7E2E9 面板背景：#1F2026 边框颜色：#111214 普通渐变：#242629 #141518 加深渐变：#007DC4 #0074BF 高亮颜色：#00BB9E PS黑色风格字体颜色：#DCDCDC 面板背景：#444444 边框颜色：#242424 普通渐变：#484848 #383838 加深渐变：#646464 #525252 高亮颜色：#00BB9E 黑色扁平字体颜色：#BEC0C2 面板背景：#2E2F30 边框颜色：#67696B 普通渐变：#404244 #404244 加深渐变：#262829 #262829 高亮颜色：#00BB9E 白色扁平字体颜色：#57595B 面板背景：#FFFFFF 边框颜色：#B6B6B6 普通渐变：#E4E4E4 #E4E4E4 加深渐变：#F6F6F6 #F6F6F6 高亮颜色：#00BB9E

评论收藏

内容反馈

版权申诉