Skip to content

theme_cn

Jump to bottom
ShowFL edited this page Sep 21, 2019 · 2 revisions

应用程序主题包

关于Toou2D 的Theme

Toou2D 放弃Qt control与control2 从新定义了几十种常用控件，这些控件除了更使用简单运行高效以外，它们天生就带有皮肤样式绑定的功能。随着Android与iOS Dark模式的流行，多主题皮肤样式对一个应用的重要性，作者在这里就不过多阐述。

什么是INI文件

来自百度百科: https://baike.baidu.com/item/ini文件

Toou2D之所以使用INI来配置主题包，因为依赖于INI的简单特性，复杂的事情通过几个等号就可以搞定。

什么是 main.ini

  • 它是主题配置入口，可配置主题包名、作者、版本、说明介绍等等基础信息。
  • 组件皮肤列表配置，避免管理混乱每个控件(组件)都有一个独立的皮肤ini文件来支持。这些ini皮肤配置类似于Html中的css
;信息配置
[CONFIG]
about       = 美女设计师新皮肤有点偏绿 ：）
version     = 1.0
author      = Toou

;控件皮肤配置
[CONTROLS]
TRectangle    = TRectangle.ini
UCustom       = UCustom.ini

有哪些数据类型

支持的数据类型有 bool、color 、ini 、double 、string 每种数据类型依赖于Qml组件绑定属性的类型。

;绑定属性=值
color          = blue
bg.color       = #00ff00
border.color   = #f00
border.width   = 2

有哪些新规则

首先ini特性是全部具备。另外我们还加入了新的特性来支持组件的正常运行。

  • [GROUPNAME] 这个节点我们称他为 group ,他代表一个组件对象或者一些组件对象使用该节点下面的特有属性。组件的 theme.groupName要与其对应。

  • [GROUPNAME:STATE] group内带有冒号，冒号前面的是组件对象group name,后面是组件触发状态名。顾名思义当组件触发某个状体时执行的视觉效果，可以理解为Qml中 states:[] 同理。

  • . “小点点”带表一个皮肤绑定对象的子对象属性。例如：TButton里面的背景，TButton上的文本，请参考下面的代码片段。

QML代码：
TButton{
    theme.groupName = "NavigationBtn"
    background.color = TColor.random
}

TButton.ini 文件中配置：

[GENERAL]
bg.color         = #2D2D2D

[NavigationBtn]
bg.color         = red

[NavigationBtn:pressed]
bg.color         = blue
Clone this wiki locally