AWTK系统控件篇

AWTK 系统控件篇

一，前序

  AWTK 本身提供了很丰富的控件，例如之前时候的 AWTK 开发 UI 简单入门 C 语言篇中介绍到的 label，edit 和 button 控件，AWTK本身还有更加复杂和效果炫酷的控件，这次我们就来简单的认识一下这些控件吧。

二，AWTK 的控件分析

  在 AWTK 中主要是分为两块控件，一块是基本控件，另外一块是扩展控件，那么会有人问这两个有什么区别呢？

1. AWTK 的基本控件

  基本控件主要是一些基本的 GUI 有的功能控件，例如输入框，按钮，数字时钟和显示图片等等简单的控件，这些控件的特点主要是消耗性能比较低，效果相对比较中庸一点，没有太多的特效，主要是为了让工业化的 GUI 使用的又或者是性能比较低的板子使用的，这些控件源码主要是存放在 awtk/src/widgets 的文件夹目录下。这里就拿数字时钟（digit_clock）这个控件来简单说明一下：

<!-- 在 UI 的 xml 可以这样子简单的定义，其中 format 是代表时间显示的格式  -->
<digit_clock x="10" y="10" w="240" h="30" format="YY/MM/DD h:mm:ss"/>

 widget_t* tc = digit_clock_create(win, 10, 10, 240, 30);
 digit_clock_set_format(tc, "YY/MM/DD h:mm:ss");

  上面的 xml 和 c 代码都是相同的功能，把一个数字时钟放在坐标为（10，10）上面，格式设置为 “YY/MM/DD h:mm:ss” （如果不知道时间格式是怎样一回事，可以去度娘一下，这里就不多解释了），这里提供一张常用的基本控件表格，都是我们常用的一些控件：

控件	名字	用途
button	按钮	界面上的按钮
button_group	按钮容器	用于容纳一组按钮控件
check_button	勾选按钮控件	界面上的勾选按钮
clip_view	裁剪控件	界面上限制子控件的显示区域
column	普通容器	垂直排列其子控件
row	普通容器	水平排列其子控件
combo_box	下拉列表控件	界面上的下拉列表
combo_box_item	下拉列表选项	主要是给 combo_box 内部配合使用
edit	输入框控件	界面上的输入框
grid	普通容器	网格排列一组控件容器
grid_item	普通容器	主要是给 grid 内部配合使用
group_box	分组控件	单选按钮在同一个父控件中是互斥的
image	图片控件	界面上的显示图片
label	文本控件	界面上的显示文本
progress_bar	进度条控件	界面上的显示直线进度条
slider	滑块条控件	界面上的显示滑块条控件
tab_button	标签按钮控件	界面上的显示标签
tab_button_group	普通容器	主要给 tab_button 内部配合使用
pages	页面管理控件	界面上显示页效果，一般也会配合 tab_button 使用
view	通用的容器控件	主要是用来供具有语义的标签

备注：

1. dialog 的相关控件主要是模态对话框的相关控件。
2. popup 控件是弹出菜单对话框。
3. 如果想了解控件的用法和代码，可以查看 awtk/src/widgets 文件夹中的控件代码

2. AWTK 的特别控件

  上面说了 AWTK 的普通控件主要是给工业级的 GUI 使用的，那么这一节讲的 AWTK 的特别控件就应该可以定义给民用级的 GUI 使用，因为民用级的 GUI 主要是效果好看为主，毕竟大众用户买产品是需要享受效果的嘛，但是这一类的控件都是存在效果性能比较大的问题，甚至有一些低端的嵌入式平台可能跑不起来，所以 AWTK 就分为两个模块给开发者自己选择。
  这里稍微引入一个概念就是其中 AWTK 在普通的嵌入式的底层绘制方法主要是分为两个部分，一个部分是 canvas，另外一个是 vgcanvas，这两部分其实对应低消耗和高消耗，以及低效果和高效果的区别，canvas 主要是用于直接画点的方法，所以只能画比较简单的直线和填充纯色的效果，但是好处在于效率高，所以在低端平台就可以正常显示。而 vgcanvas 却是高消耗，为什么呢？因为 vgcanvas 是矢量画图来的（不知道什么是矢量画图去问度娘），支持画圆，画不规则图形，而且也支持抗锯齿等效果，所以画出来的效果可以很好看，但是用了很多消耗性的算法，所以速度就自然慢下来了，而 AWTK 的特别控件大部分都是使用了 vgcanvas 来做效果，举个例子，我们常见的圆形进度条（progress_circle），就是属于 AWTK 的特别控件。

<progress_circle x="10" y="10" w="200" h="200" max="360" show_text="true" start_angle="90" />

progress_circle = progress_circle_create(win, 10, 10, 200, 200);
progress_circle_set_max(progress_circle, 360);
widget_set_value(progress_circle, 128);

（上面的动图是 AWTK 的 demoui 上面的 progress_circle 效果）

这里提供一张常用的特别控件表格，都是我们常用的一些控件：

控件	名字	用途
canvas_widget	画布控件	给用户自定义画任何东西，可以使用 vgcanvas 或者 canvas 画东西
color_picker	颜色选择器控件	像 ps 上面选择颜色的控件
combo_box_ex	可滚动的combo_box控件	功能为 combox 的高级版
draggable	滑块控件	让目标控件或当前窗口可以被拖动
gif_image	GIF图片控件	界面上显示 GIF 控件
guage	表盘控件	界面上显示表盘（例如汽车仪表等）
image_animation	图片动画控件	界面上显示连续播放图片（构成动画效果）
image_value	图片值控件	界面上用图片代表各种数值的值（图片表示电池电量等）
keyboard	软键盘	界面上弹出手机输入法的软键盘（一般开启输入法宏后，焦点选中 edit 控件后自动弹出软键盘）
mledit	多行编辑器控件	界面显示类似 Notepad 等文字编辑软件效果
progress_circle	进度圆环控件	界面显示圆形进度条效果
rich_text	图文混排控件	界面显示简单的图文混排
hscroll_label	可水平滚动的文本控件	界面显示长文本滚动
scroll_view	滚动视图控件	界面显示页面翻动视图效果
slide_menu	左右滑动菜单控件	界面显示左右滑动页面效果
slide_view	滑动视图控件	界面显示左右滑动页面效果（可以自动切换和循环切换等效果）
svg_image	SVG图片控件	界面显示 svg 矢量位图（但是有些矢量位图效果无法实现）
switch	开关控件	界面显示类似手机左右滑动的开关效果控件
text_selector	文本选择器控件	界面显示选择国家省份的上下滑动选择控件
time_clock	模拟时钟控件	界面显示时钟效果（非数字时钟，而是现实中真实钟表效果）

备注：

1. 如果需要使用 AWTK 特别控件的话，需要调用 tk_ext_widgets_init 函数和取消定义 WITHOUT_EXT_WIDGETS 宏才可以使用 AWTK 特别控件。
2. mutable_image 控件比较复杂，主要是用于播放视频和播放摄像头的控件基类，具体可以查考 awtk/docs/how_to_use_mutable_image.md 文件。

三，总结

  本章节主要是简单介绍一下 AWTK 的控件，就算我上面表述的再好也不如自己去看一下实际的效果来直观，AWTK 提供了一个 demoui 的项目，可以让大家直观的看到每个控件实际的效果，从而让大家更加容易明白控件的用法。
  demoui 的项目的源码是 awtk/demos/demo_ui_app.c，大家主要是在编译的时候开启 awkt/SConstruct 中的 ‘demos/SConscript’ 既可以，如果编译好了 AWTK，打开在 awtk/bin/demoui.exe 查看各种控件的效果，如下图：