DuiVision开发教程(16)-区域控件
DuiVision的area控件（类名是CArea）可以设置区域的渐变透明度，不能响应鼠标事件，此控件的原理是画一个填充的透明度渐变矩形区域，透明度从矩形区域顶部究竟部均匀渐变。
控件的属性包含：
| 属性名 | 类型 | 说明 |
|---|---|---|
| color | 颜色 | 矩形区域的颜色 |
| begin-transparent | 字体 | 矩形区域顶部的起始透明度 |
| end-transparent | 字符串 | 矩形区域底部的终止透明度 |
DuiVision Demo程序的非常多界面都用到了area控件来实现渐变效果，比如，例如以下的登录对话框以下的渐变效果和分隔线，就是用4个area控件实现的：
相应的xml定义例如以下：
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<dlg name="dlg_login" title="" width="420" height="270" appwin="0" resize="0"
frame="" bkimg="" crbk="000000"
img-shadow="skins\360\window_shadow.png" shadow-wlt="5" shadow-hlt="3" shadow-wrb="5" shadow-hrb="7" >
<base>
<imgbtn name="button.close" pos="-45,0,-0,29" skin="IDB_BT_CLOSE" show="1" shortcut="ESC" />
<imgbtn name="button.setup" pos="-74,0,-46,20" skin="IDB_BT_SETUP" show="1"/>
<text name="title" crtext="FFFFFF" crmark="800000" font="big"
pos="10,5,200,25" title="[APP_NAME]登录" mask="" response="0" show="1" />
</base>
<body>
<area name="area-1" pos="0,0,-0,140" begin-transparent="100" end-transparent="40" />
<area name="area-2" pos="0,140,-0,-0" begin-transparent="40" end-transparent="40" />
<area name="area-3" pos="0,-37,-0,-36" begin-transparent="70" end-transparent="70" />
<area name="area-4" pos="0,-36,-0,-0" begin-transparent="88" end-transparent="88" />
<img name="image" pos="16,109" width="87" height="87" skin="IDB_LOGIN_USER" mode="normal" framesize="1" show="1" />
<edit name="username" skin="IDB_EDIT" left-image="skin:IDB_COMPUTER"
pos="120,110" width="220" height="32" title="" tip="请输入用户名"
multiline="0" autohscroll="1" autovscroll="0" number="0" readonly="0" maxchar="50"
font="default" crtext="0,0,0" crtip="128,128,128,128" />
<linkbtn name="linkbtn" crtext="800000"
pos="350,116,-10,145" show="1" title="注冊帐号" href="http://www.blueantstudio.net" />
<edit name="pwd" skin="IDB_EDIT" left-image="skin:IDB_EDIT_PWD"
pos="120,149" width="220" height="32" title="" password="1" tip="请输入password"
multiline="0" autohscroll="1" autovscroll="0" number="0" readonly="0" maxchar="50"
font="default" crtext="0,0,0" crtip="128,128,128,128" />
<linkbtn name="linkbtn" crtext="800000"
pos="350,155,-10,180" show="1" title="找回password" href="http://www.blueantstudio.net" />
<chkbtn name="checkbutton" skin="IDB_CHECK_BOX"
pos="120,190" width="100" height="22" show="1" title="记住password" check="true" />
<chkbtn name="checkbutton" skin="IDB_CHECK_BOX"
pos="230,190" width="100" height="22" show="1" title="自己主动登录" check="false" />
<button name="button_1" skin="IDB_BT_DEFAULT" title="设置"
pos="20,-30,100,-6" show="1" shortcut="" />
<button name="button.ok" skin="IDB_BT_DEFAULT" title="[LOGIN]"
pos="-100,-30,-20,-6" show="1" shortcut="RETURN" />
</body>
</dlg>以下的关于对话框的渐变效果和分隔线实现方式也是这样：
相应的xml定义：
<?xml version="1.0" encoding="utf-8"?>
<dlg name="dlg_about" title="MsgBox" width="450" height="230" appwin="1" resize="1"
translucent="245" frame="" bkimg="skin:SKIN_PIC_7" crbk="000000"
img-shadow="skins\default\winback_shadow.png" shadow-wlt="36" shadow-hlt="34" shadow-wrb="36" shadow-hrb="35">
<base>
<imgbtn name="button.close" pos="-45,0,-0,29" skin="IDB_BT_CLOSE" show="1"/>
<text name="title" crtext="FFFFFF" crmark="800000" font="big"
pos="10,5,200,25" title="关于[APP_NAME]" mask="[APP_NAME]" response="0" show="1" />
</base>
<body>
<area name="area-1" pos="0,0,-0,40" begin-transparent="100" end-transparent="30" />
<area name="area-2" pos="0,40,-0,-0" begin-transparent="30" end-transparent="30" />
<area name="area-3" pos="0,-37,-0,-36" begin-transparent="70" end-transparent="70" />
<area name="area-4" pos="0,-36,-0,-0" begin-transparent="88" end-transparent="88" />
<img name="icon" pos="25,45" width="128" height="128" image="skins\scriptnet.jpg" mode="normal" framesize="0" response="0" show="1" />
<text crtext="000000" pos="170,45,-25,65" title="[APP_NAME] [APP_VER]" />
<text crtext="000000" pos="170,65,-25,85" title="2013-2015" />
<linkbtn name="linkbtn1" crtext="800000"
pos="170,100,-25,130" show="1" title="http://www.blueantstudio.net" href="http://www.blueantstudio.net" />
<button name="button.ok" skin="IDB_BT_DEFAULT" title="[OK]" pos="-100,-30,-20,-6" show="1" />
</body>
</dlg>
以上两个对话框都是用area将界面从上到下分成4部分。第一部分是对话框顶部标题部分，透明度从全透明逐渐减少。使顶部可以很多其它的看到窗体背景图片。第二部分是标题向下的部分，有一个固定的透明度。由于这部分是窗体主体部分。须要可以看清窗体主体部分的内容。所以透明度不高，不至于被背景图片干扰到窗体内容的显示，第三部分是底部的分隔线。仅仅有两个像素宽，第四部分是底部区域，为了可以区分出来，所以透明度提高了一些。
DuiVision开源码下载地址（github）：https://github.com/blueantst/DuiVision
蓝蚂蚁工作室主页：http://www.blueantstudio.net
DuiVision QQ群：325880743
微信公众号：blueantstudio 或搜索 蓝蚂蚁工作室
