同步操作将从 zlgopen/awtk 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
设计漂亮的界面并非程序员的强项,AWTK 通过窗体样式提供这样一种机制,让设计漂亮的界面变得非常容易。通过窗体样式,可以改变控件的背景颜色、边框颜色、字体颜色、字体、字体大小、背景图片、背景图片的显示方式和图标等属性。同时 AWTK 也提供了一些窗体样式重用的机制,让窗体样式文件的开发和维护变得容易。
AWTK 的窗体样式按控件进行分类,每种控件可以有多种不同的风格,每种风格下又有不同状态下的配置。比如:
<button bg_image_draw_type="3patch_x" text_color="blue">
<style name="default" border_color="#a0a0a0" text_color="black">
<normal bg_color="#f0f0f0" />
<pressed bg_color="#c0c0c0" />
<over bg_color="#e0e0e0" />
<disable bg_color="gray" text_color="#d0d0d0" />
</style>
<style name="green_btn" >
<normal bg_image="green_btn_n" />
<pressed bg_image="green_btn_p" />
<over bg_image="green_btn_o" />
</style>
<style name="red_btn">
<normal bg_image="red_btn_n" />
<pressed bg_image="red_btn_p" />
<over bg_image="red_btn_o" />
</style>
</button>
上面是按钮的样式配置(你可以自由增加自己需要的),其中定义了三种不同的按钮样式:
窗体样式的各个属性,如果出现在控件中,则为该控件下各个 style 的缺省值。如果出现在 style 中,则为该 style 的下各种状态的缺省值。这样可以实现类似继承的重用机制。
同一控件可以出现多次(如上面的 button 出现了两次),有利于实现配置共享,让维护工作更简单。
参考:
颜色可使用标准名称,#开头的 16 进制值和 rgba 合成的值。
参考:
第三方扩展控件可以扩展控件特有的属性,遵循下列规则即可。
窗体样式用 XML 文件编写,然后用 themegen 生成 C 常量数据,并加入资源管理器,才能在程序中使用。
./bin/themegen input output
参考 update_res.sh
#include "res/src/theme/default.data"
...
resource_manager_add(theme_default);
参考 demos/resource.c
ok = button_create(dialog->client, 20, 80, 80, 30);
widget_set_text(ok, L"Go");
widget_use_style(ok, "green_btn");
<dialog name="" icon="info" x="10" y="120" w="300" h="160" text="Dialog">
<label name="" x="center" y="middle:-20" w="200" h="30" text="Are you ready?"/>
<button name="ok" style="green_btn" x="10" y="bottom:10" w="40%" h="30" text="Yes"/>
<button name="cancel" style="red_btn" x="right:10" y="bottom:10" w="40%" h="30" text="No"/>
</dialog>
像微信小程序那样,AWTK 中每个窗口(包括对话框和其它窗口)可以有自己的窗体样式文件。
通过窗口的 theme 属性来指定窗口的窗体样式文件名(方便多个窗口共用一个窗体样式文件)。
如果没有指定 theme 属性,以窗口的 name 属性作为窗口的窗体样式文件名。
以窗口自己的窗体样式文件优先,其次为缺省的窗体样式文件。
参考:dialog1.xml
窗体样式数据是只读的,它的好处是速度快,占用内存少。但在一些特殊情况下,我们希望通过函数直接修改控件的 style,或者在 UI 描述的 XML 文件中直接写 style。我们把这类 style 称为 inline style,具体用法如下:
控件的属性名以『style.』开头表示这是一个 inline 属性:
style.状态.名称
下面表示设置正常状态的字体大小为 16:
style.normal.font_size="16"
状态可以省略,如果省略,表示正常状态 (normal),下面这个和上面的功能一样:
style.font_size="16"
完整示例:
<label x="0" y="0" w="100%" h="100%" text="Basic Controls" style.font_size="24" style.text_color="green"/>
<button name="dec_value" text="Dec" focusable="true" style.focused.text_color="red"/>
在 C 代码中可以使用下列函数设置 style:
/**
* @method widget_set_style_int
* 设置整数类型的 style。
* @annotation ["scriptable"]
* @param {widget_t*} widget 控件对象。
* @param {const char*} state_and_name 状态和名字,用英文的冒号分隔。
* @param {int32_t} value 值。
*
* @return {ret_t} 返回 RET_OK 表示成功,否则表示失败。
*/
ret_t widget_set_style_int(widget_t* widget, const char* state_and_name, int32_t value);
/**
* @method widget_set_style_str
* 设置字符串类型的 style。
* @annotation ["scriptable"]
* @param {widget_t*} widget 控件对象。
* @param {const char*} state_and_name 状态和名字,用英文的冒号分隔。
* @param {const char*} value 值。
*
* @return {ret_t} 返回 RET_OK 表示成功,否则表示失败。
*/
ret_t widget_set_style_str(widget_t* widget, const char* state_and_name, const char* value);
/**
* @method widget_set_style_color
* 设置颜色类型的 style。
*
* > * [state 的取值](https://github.com/zlgopen/awtk/blob/master/docs/manual/widget_state_t.md)
* > * [name 的取值](https://github.com/zlgopen/awtk/blob/master/docs/theme.md)
*
* @annotation ["scriptable"]
* @param {widget_t*} widget 控件对象。
* @param {const char*} state_and_name 状态和名字,用英文的冒号分隔。
* @param {uint32_t} value 值。颜色值一般用十六进制表示,每两个数字表示一个颜色通道,从高位到低位,依次是 ABGR。
*
* 在下面这个例子中,R=0x11 G=0x22 B=0x33 A=0xFF
*
* ```c
* widget_set_style_color(label, "normal.bg_color", 0xFF332211);
* ```
*
* @return {ret_t} 返回 RET_OK 表示成功,否则表示失败。
*/
ret_t widget_set_style_color(widget_t* widget, const char* state_and_name, uint32_t value);
示例:
widget_set_style_int(label, "normal.font_size", 24);
widget_set_style_str(label, "normal.text_color", "red");
widget_set_style_str(label, "normal.border_color", "#FF0000");
widget_set_style_color(label, "normal.bg_color", 0xFF00FF00);
inline style 会消耗更多内存,而且不方便切换窗体样式,一般应该尽量避免使用。 注意,以前的版本使用:分隔,由于不合 XML 规范,改为用.分隔,仍然保持对:的兼容。
颜色值一般用十六进制表示,每两个数字表示一个颜色通道,从高位到低位,依次是 ABGR。
颜色值如果用#开头,用十六进制表示,每两个数字表示一个颜色通道,从高位到低位,依次是 RGBA 或 RGB。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。