10.QML Qt Quick Controls 2之imagine style
Qt Quick Controls 2的目标之一是将控件的逻辑与外观分离。外观的实现由QML代码和图形资源组成。使用Imagine样式(imagine style),可以自定义应用程序的外观和图形资源
Imagine样式基于图像资源。样式带有一组默认的图像,可以通过自定义命名指定提供包含图像的目录,从而更改界面外观。
示例
import QtQuick 2.14
import QtQuick.Controls 2.5ApplicationWindow {id:mainwinvisible: truewidth: 640height: 480title: qsTr("imagine style")Column {anchors.top:parent.topanchors.left: parent.leftanchors.margins: 10width: mainwin.width/2spacing: 10Repeater {model: 5Button {text: qsTr("click")width: parent.widthheight: mainwin.height/6}}}Grid {anchors.top: parent.topanchors.right: parent.rightanchors.margins: 10spacing: 10columns: 2Repeater {model: 10Button {text: qsTr("check")height: mainwin.height/6checkable: true}}}
}
上述代码的显示效果是这样的
界面很平常,所以就需要使用imagine style美化一下,imagine style的默认效果如下
也可以添加imagine style的资源,添加资源之后,整体目录结构如下
其中,qtquickcontrols2.conf的内容如下
[Controls]
Style=Imagine[Imagine]
Path=:images/imagine
前两行表示空间的风格,后两行表示imagine style的UI资源路径
UI资源中的图片命名也是有讲究的
首先看后缀,有png和9.png两种,9.png是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法,使图片可以自适应显示。
图片的命名按照如下格式命名
<control>-<element>-<states>
<control>表示空间,<element>表示空间中的元素,这两个是必需的,<states>表示的是空间的状态,是可选的。例如,为button提供了一个名为“button background.9.png”的文件,它将用于设置button的background属性并支持button的每个状态。而"button background-pressed.9.png"表示用于设置button的background属性,但是只支持button的press状态(也就是说,只有pressed状态出现时(button被按下),才会使用该图片)
常用的状态有以下九个
disabled
pressed
checked
checkable
focused
highlighted
flat
mirrored
hovered
添加资源后的效果如下
参考
《qml book》
https://doc.qt.io/qt-5/qtquickcontrols2-imagine.html
https://baike.baidu.com/item/.9.png/5404360
欢迎大家评论交流,作者水平有限,如有错误,欢迎指出
10.QML Qt Quick Controls 2之imagine style相关推荐
- 9.QML Qt Quick Controls 2中常用的界面形式——并排式界面(SwipeView)
并排式界面的实现的核心组件就是SwipeView.SwipeView由一组页面填充.一次只能看到一页.用户可以横向滑动浏览页面. 请注意,SwipeView本身完全不可见.一般与PageIndicat ...
- 8.QML Qt Quick Controls 2中常用的界面形式——堆叠式界面(StackView)
堆叠式界面的实现的核心组件就是StackView.StackView是一个基于栈的导航浏览模型,可以与一组关联的页面一起使用.当用户浏览深层页面时,深层页面被推到栈顶,当用户选择返回时,之前浏览的页面 ...
- 7.QML Qt Quick——基于Qt Quick Controls 2实现图片浏览器
Qt Quick Controls 2提供了一组UI控件,例如按钮,标签,复选框,滑块等(用之查之即可).用于在Qt Quick中创建用户界面.UI控件很多,这里通过一个图片浏览器的实现来逐步讲解 图 ...
- qml自定义switch_QML官方系列教程——Qt Quick Controls Styles
附网址:http://qt-project.org/doc/qt-5/qtquickcontrolsstyles-index.html Qt Quick Controls Styles -- Qt Q ...
- qml 时间控件_Qt6官方最新消息:桌面样式Qt quick Controls 2支持大多控件,委托更少,运行更流畅...
Qt是一个跨平台框架,通常用作图形工具包,它不仅创建CLI应用程序中非常有用.而且它也可以在三种主要的台式机操作系统以及移动操作系统(如Symbian,Nokia Belle,Meego Harmat ...
- 《Qt5 Cadaques》学习笔记(六):QT QUICK Controls 2
6.1 控件简介 从头开始使用 Qt Quick 为您提供了基本的图形和交互元素,您可以从中构建用户界面.使用 Qt Quick Controls 2,您可以从一组稍微结构化的控件开始构建.控件范围从 ...
- Qt Quick Controls 配置文件
Qt Quick Controls 配置文件 Qt Quick Controls支持一个特殊的配置文件 qtquickcontrols2.conf,该文件内置于应用程序的资源中. 配置文件可以指定首选 ...
- Qt文档阅读笔记-Qt Quick Controls - Wearable Demo实例解析
程序运行截图如下: 这个实例主要是用qml玩界面. main.qml文件以及wearable.qml分别是由ApplicationWindow和StatckView.这个StackView用于做导航相 ...
- Hello Qt(五十一)———Qt Quick Controls
一.Qt Quick Controls基础 QT5.1发布了Qt Quick的一个全新模块:Qt Quick Controls.Qt Quick Controls模块提供了大量类似Qt Widgets ...
最新文章
- 动态代理(JDK的动态代理)
- keepalived高可用集群技术介绍及实战演练
- 截取字符串,但要保证汉字不被截取半个
- java小编程----括号是否匹配
- python从入门到精通pdf-跟老齐学Python+从入门到精通 PDF 下载
- 32位oracle_ORACLE如何优化代码将查询速度从5s提升到0.1s
- tcp/ip IP数据报头详解
- python判断正数负数_python 负数变正数
- 2022虎符线上团队赛 有关web的部分题解(持续更新)
- marshmallow——快速入门
- 偷得浮生半日闲:三层神经网络的python实现
- KVM 多电脑切换器(KVM Switch)
- MMORPG网络游戏开发之Protobuf的基本使用
- DevOps工程师主要负责哪些事?需要具备哪些技能?
- 静态NAT 如何配置?
- 青藤 #10115 栈练习1
- 故障案例 | 慢SQL引发MySQL高可用切换排查全过程
- Python tailer模块的使用
- 无线局域网控制器(WLC)常见问题1
- weex更新方案探索(一)