update docs and demos

This commit is contained in:
lixianjing 2021-02-04 09:38:57 +08:00
parent 58b6914a2c
commit ab0c4d2700
7 changed files with 150 additions and 47 deletions

View File

@ -1,4 +1,8 @@
<window anim_hint="htranslate" text="Draggable">
<window anim_hint="htranslate" text="Draggable"
design_w="320" design_h="480"
auto_scale_children_x="true" auto_scale_children_y="true"
auto_scale_children_w="true" auto_scale_children_h="true" >
<button text="Drag Me" w="80" h="40" x="10" y="10">
<draggable />
</button>

View File

@ -84,6 +84,7 @@
* [如何使用多点触控手势算法](how_to_use_multi_gesture.md)
* [如何隐藏滚动条的上下按钮](how_to_hide_up_down_button_of_scrollbar.md)
* [如何使用 packed 图](how_to_use_packed_image.md)
* [如何根据实际分辨率自动调整窗口中子控件的位置大小](how_to_auto_scale_children.md)
### 3. 内部原理
* [AWTK 脚本绑定原理](script_binding.md)

View File

@ -1,23 +1,24 @@
# 最新动态
2021/02/04
* 重命名auto\_scale\_xxx 为 auto\_scale\_children\_xxx
* 增加函数window\_set\_auto\_scale\_children。
* 重命名 auto\_scale\_xxx 为 auto\_scale\_children\_xxx
* 增加函数 window\_set\_auto\_scale\_children。
* 增加[《如何根据实际分辨率自动调整窗口中子控件的位置大小》](how_to_auto_scale_children.md)
2021/02/03
* 修复缺少 SDL 线程函数的声明的问题(感谢智明提供补丁)
* 修复改变 lcd 的大小后 vg 的裁剪区没有修改的问题(感谢智明提供补丁)
* 修复digit_clock 控件在后台窗口无法刷新的问题(感谢雨欣提供补丁)。
* 修复 digit_clock 控件在后台窗口无法刷新的问题(感谢雨欣提供补丁)。
* 修复 page 控件套 pages 控件的时候释放子 pages 控件导致父 pages 控件的 target 为野指针的问题(感谢智明提供补丁)
* 窗口增加design\_w/design\_h/auto\_scale\_x/auto\_scale\_y/auto\_scale\_w/auto\_scale\_h等参数。
* 窗口增加 design\_w/design\_h/auto\_scale\_x/auto\_scale\_y/auto\_scale\_w/auto\_scale\_h 等参数。
2021/02/02
* 修改注释错误感谢网友QQ631757707提供补丁
* 增加widget\_get\_style\_type和style\_update\_state感谢智明提供补丁
* 修改注释错误(感谢网友 QQ631757707 提供补丁)
* 增加 widget\_get\_style\_type style\_update\_state感谢智明提供补丁
2021/02/01
* 完善文档(感谢忠吉提供补丁)。
* 修复theme\_t重定义的问题感谢雨欣提供补丁
* 修复 theme\_t 重定义的问题(感谢雨欣提供补丁)。
* 修复打包主题工具打包字符串的时候偏移值出错的问题(感谢智明提供补丁)
2021/01/31

View File

@ -0,0 +1,92 @@
# 如何根据实际分辨率自动调整窗口中子控件的位置大小
## 1. 介绍
一般来说,我们希望设计的界面在不同分辨率的设备上都能正常显示,此时应该使用 [layout 参数](layout.md),而不要使用固定坐标和大小。
在有的情况下,设计时的分辨率与运行时的分辨率差不大,或者宽高之比的比例相近。比如手机,用 AWTK 开发的应用程序在手机上运行时,可以使用一种简便的方法,让 AWTK 自动调整子控件的坐标和大小(或者辅以 layout 参数进行微调)。
通过指定窗口下面这些属性,可以实现自动调整控件的坐标和大小。
```c
/**
* @property {uint16_t} design_w
* @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"]
* 设计时宽度。
*/
uint16_t design_w;
/**
* @property {uint16_t} design_h
* @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"]
* 设计时高度。
*/
uint16_t design_h;
/**
* @property {bool_t} auto_scale_children_x
* @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"]
* 窗口大小与设计时大小不同时,是否自动调整子控件的 x 坐标。
*/
uint16_t auto_scale_children_x : 1;
/**
* @property {bool_t} auto_scale_children_y
* @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"]
* 窗口大小与设计时大小不同时,是否自动调整子控件的 y 坐标。
*/
uint16_t auto_scale_children_y : 1;
/**
* @property {bool_t} auto_scale_children_w
* @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"]
* 窗口大小与设计时大小不同时,是否自动调整子控件的宽度。
*/
uint16_t auto_scale_children_w : 1;
/**
* @property {bool_t} auto_scale_children_h
* @annotation ["set_prop","get_prop","readable","persitent","design","scriptable"]
* 窗口大小与设计时大小不同时,是否自动调整子控件的高度。
*/
uint16_t auto_scale_children_h : 1;
```
> 如果子控件具有 self\_layout 参数或者所在容器具有 children\_layout 参数,则不使用自动调整功能。
## 2. 通过 XML 指定参数
示例:
```xml
<window
design_w="320" design_h="480"
auto_scale_children_x="true" auto_scale_children_y="true"
auto_scale_children_w="true" auto_scale_children_h="true" >
<button text="Hello" x="120" w="80" y="220" h="40" />
</window>
```
## 3. 通过代码指定参数
在代码中,可以使用下面这个函数自动调整控件的坐标和大小:
```c
/**
* @method window_set_auto_scale_children
* 当设计分辨率和实际分辨率不一致时,自动调整子控件的位置和大小。
*
* > 当子控件有 self_layout 参数或者子控件的父控件有 children_layout 参数时,不会自动调整。
*
* @annotation ["scriptable"]
* @param {widget_t*} widget window 对象。
* @param {uint32_t} design_w 设计时宽度。
* @param {uint32_t} design_h 设计时高度。
*
* @return {ret_t} 返回 RET_OK 表示成功,否则表示失败。
*/
ret_t window_set_auto_scale_children(widget_t* widget, uint32_t design_w, uint32_t design_h);
```
示例:
```c
widget_t* win = window_open("foobar");
window_set_auto_scale_children(win, 320, 480);
```

View File

@ -1,6 +1,6 @@
# 控件布局器(layouter)
# 控件布局器 (layouter)
## 一、为什么需要控件布局器(layouter)
## 一、为什么需要控件布局器 (layouter)
如果界面上元素是预先知道的,而且窗口的大小也是固定的,通过可视化的工具,以所见即所得的方式,去创建界面是最轻松的方式。但是在下列情况下,使用布局参数是更好的选择。
@ -8,19 +8,18 @@
* 窗口的大小可以动态调整的。
* 界面上的元素是动态的,需要用程序创建界面。
[AWTK](https://github.com/zlgopen/awtk)提供了简单而又强大的布局参数。
[AWTK](https://github.com/zlgopen/awtk) 提供了简单而又强大的布局参数。
## 二、概述
AWTK的布局器(layouter)分为两类,一类用于对控件自身进行布局,另外一类用于对子控件进行布局。
AWTK 的布局器 (layouter) 分为两类,一类用于对控件自身进行布局,另外一类用于对子控件进行布局。
* self\_layout 对控件自身进行布局
* children\_layout 用于对子控件进行布局
![layout_overview](images/layout_overview.png)
AWTK提供了灵活的扩展机制可以方便的扩展新的布局方式所以self\_layouter和children\_layouter都是接口。
AWTK 提供了灵活的扩展机制,可以方便的扩展新的布局方式,所以 self\_layouter 和 children\_layouter 都是接口。
## 三、控件自身的布局
@ -29,13 +28,13 @@ AWTK提供了灵活的扩展机制可以方便的扩展新的布局方式
* 1.[缺省控件布局器介绍](self_layouter_default.md)
* 2.[菜单布局器介绍](self_layouter_menu.md)
> 以后会陆续实现css flex等布局方式。
> 以后会陆续实现 css flex 等布局方式。
## 三、子控件的布局
![children_layouter](images/layout_children_layouter.png)
* 1.[缺省子控件布局器介绍](children_layouter_default.md)
* 2.[ListView子控件布局器介绍](children_layouter_list_view.md)
* 2.[ListView 子控件布局器介绍](children_layouter_list_view.md)
> 以后会陆续实现css flex等布局方式。
> 以后会陆续实现 css flex 等布局方式。

View File

@ -1,42 +1,48 @@
TK_CONST_DATA_ALIGN(const unsigned char ui_draggable[]) = {
0x04,0x00,0x01,0x01,0xf3,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,
0x04,0x00,0x01,0x01,0x79,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,
0x65,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x12,0x12,0x22,0x11,0x77,0x69,0x6e,0x64,0x6f,0x77,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x61,0x6e,0x69,0x6d,
0x5f,0x68,0x69,0x6e,0x74,0x00,0x68,0x74,0x72,0x61,0x6e,0x73,0x6c,0x61,0x74,0x65,0x00,0x74,0x65,0x78,
0x74,0x00,0x44,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,0x65,0x00,0x00,0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,
0x74,0x00,0x44,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,0x65,0x00,0x64,0x65,0x73,0x69,0x67,0x6e,0x5f,0x77,
0x00,0x33,0x32,0x30,0x00,0x64,0x65,0x73,0x69,0x67,0x6e,0x5f,0x68,0x00,0x34,0x38,0x30,0x00,0x61,0x75,
0x74,0x6f,0x5f,0x73,0x63,0x61,0x6c,0x65,0x5f,0x63,0x68,0x69,0x6c,0x64,0x72,0x65,0x6e,0x5f,0x78,0x00,
0x74,0x72,0x75,0x65,0x00,0x61,0x75,0x74,0x6f,0x5f,0x73,0x63,0x61,0x6c,0x65,0x5f,0x63,0x68,0x69,0x6c,
0x64,0x72,0x65,0x6e,0x5f,0x79,0x00,0x74,0x72,0x75,0x65,0x00,0x61,0x75,0x74,0x6f,0x5f,0x73,0x63,0x61,
0x6c,0x65,0x5f,0x63,0x68,0x69,0x6c,0x64,0x72,0x65,0x6e,0x5f,0x77,0x00,0x74,0x72,0x75,0x65,0x00,0x61,
0x75,0x74,0x6f,0x5f,0x73,0x63,0x61,0x6c,0x65,0x5f,0x63,0x68,0x69,0x6c,0x64,0x72,0x65,0x6e,0x5f,0x68,
0x00,0x74,0x72,0x75,0x65,0x00,0x00,0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0a,
0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x74,0x65,0x78,0x74,0x00,
0x44,0x72,0x61,0x67,0x20,0x4d,0x65,0x00,0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,0x65,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x28,0x00,0x00,
0x00,0x74,0x65,0x78,0x74,0x00,0x44,0x72,0x61,0x67,0x20,0x4d,0x65,0x00,0x00,0x64,0x72,0x61,0x67,0x67,
0x61,0x62,0x6c,0x65,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x64,0x00,
0x00,0x00,0x0a,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x74,0x65,0x78,0x74,0x00,0x44,
0x72,0x61,0x67,0x20,0x56,0x00,0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,0x65,0x00,0x00,0x00,0x00,
0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x64,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,
0x50,0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x74,0x65,0x78,0x74,0x00,0x44,0x72,0x61,0x67,0x20,0x56,0x00,
0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,0x65,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x76,0x65,0x72,0x74,0x69,
0x63,0x61,0x6c,0x5f,0x6f,0x6e,0x6c,0x79,0x00,0x74,0x72,0x75,0x65,0x00,0x00,0x00,0x00,0x62,0x75,0x74,
0x74,0x6f,0x6e,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x64,0x00,0x00,0x00,0x50,0x00,0x00,
0x00,0x28,0x00,0x00,0x00,0x74,0x65,0x78,0x74,0x00,0x44,0x72,0x61,0x67,0x20,0x48,0x00,0x00,0x64,0x72,
0x61,0x67,0x67,0x61,0x62,0x6c,0x65,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x76,0x65,0x72,0x74,0x69,0x63,0x61,0x6c,0x5f,0x6f,0x6e,
0x6c,0x79,0x00,0x74,0x72,0x75,0x65,0x00,0x00,0x00,0x00,0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x68,0x6f,0x72,0x69,0x7a,0x6f,0x6e,0x74,0x61,0x6c,0x5f,0x6f,0x6e,0x6c,
0x79,0x00,0x74,0x72,0x75,0x65,0x00,0x00,0x00,0x00,0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x64,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x74,
0x65,0x78,0x74,0x00,0x44,0x72,0x61,0x67,0x20,0x48,0x00,0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,
0x65,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x0a,0x00,0x00,0x00,0xc8,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x74,0x65,
0x78,0x74,0x00,0x44,0x72,0x61,0x67,0x20,0x52,0x00,0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,0x65,
0x68,0x6f,0x72,0x69,0x7a,0x6f,0x6e,0x74,0x61,0x6c,0x5f,0x6f,0x6e,0x6c,0x79,0x00,0x74,0x72,0x75,0x65,
0x00,0x00,0x00,0x00,0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,
0xc8,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x74,0x65,0x78,0x74,0x00,0x44,0x72,0x61,
0x67,0x20,0x52,0x00,0x00,0x64,0x72,0x61,0x67,0x67,0x61,0x62,0x6c,0x65,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x6c,
0x65,0x66,0x74,0x00,0x31,0x30,0x00,0x72,0x69,0x67,0x68,0x74,0x00,0x32,0x30,0x30,0x00,0x74,0x6f,0x70,
0x00,0x31,0x35,0x30,0x00,0x62,0x6f,0x74,0x74,0x6f,0x6d,0x00,0x33,0x30,0x30,0x00,0x00,0x00,0x00,0x62,
0x75,0x74,0x74,0x6f,0x6e,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x6c,0x65,0x66,0x74,0x00,0x31,0x30,
0x00,0x72,0x69,0x67,0x68,0x74,0x00,0x32,0x30,0x30,0x00,0x74,0x6f,0x70,0x00,0x31,0x35,0x30,0x00,0x62,
0x6f,0x74,0x74,0x6f,0x6d,0x00,0x33,0x30,0x30,0x00,0x00,0x00,0x00,0x62,0x75,0x74,0x74,0x6f,0x6e,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x63,0x6c,0x6f,0x73,0x65,0x00,0x73,0x65,
0x6c,0x66,0x5f,0x6c,0x61,0x79,0x6f,0x75,0x74,0x00,0x64,0x65,0x66,0x61,0x75,0x6c,0x74,0x28,0x78,0x3d,
0x63,0x65,0x6e,0x74,0x65,0x72,0x2c,0x79,0x3d,0x62,0x6f,0x74,0x74,0x6f,0x6d,0x3a,0x35,0x30,0x2c,0x77,
0x3d,0x35,0x30,0x25,0x2c,0x68,0x3d,0x33,0x30,0x29,0x00,0x66,0x6c,0x6f,0x61,0x74,0x69,0x6e,0x67,0x00,
0x74,0x72,0x75,0x65,0x00,0x74,0x65,0x78,0x74,0x00,0x43,0x6c,0x6f,0x73,0x65,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,};/*803*/
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x6e,0x61,0x6d,0x65,0x00,0x63,0x6c,0x6f,0x73,0x65,0x00,0x73,0x65,0x6c,0x66,0x5f,0x6c,0x61,0x79,
0x6f,0x75,0x74,0x00,0x64,0x65,0x66,0x61,0x75,0x6c,0x74,0x28,0x78,0x3d,0x63,0x65,0x6e,0x74,0x65,0x72,
0x2c,0x79,0x3d,0x62,0x6f,0x74,0x74,0x6f,0x6d,0x3a,0x35,0x30,0x2c,0x77,0x3d,0x35,0x30,0x25,0x2c,0x68,
0x3d,0x33,0x30,0x29,0x00,0x66,0x6c,0x6f,0x61,0x74,0x69,0x6e,0x67,0x00,0x74,0x72,0x75,0x65,0x00,0x74,
0x65,0x78,0x74,0x00,0x43,0x6c,0x6f,0x73,0x65,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,};/*937*/