autoit 发表于 2008-5-3 14:20:01

GUI设计与制作入门(一)

<span>本人学习</span><span>AutoIt</span><span>还不到一年,可以说是新手,但在学习过程中得到众多</span><span>AutoIt</span><span>爱好者</span><span>(</span><span><strong><span>konan</span></strong><strong><span>、</span><span>del888</span></strong><strong><span>、</span><span>COCO</span></strong><strong><span>等</span></strong></span><span>)</span><span>的大力帮助和有益启发。下文的编写纯属个人理解,深入学习还得看原文帮助文件。</span><span><br /></span><span>AutoIt</span><span>发展至今</span><span>(</span><span>已到</span><span>V3.10</span><span>版</span><span>)</span><span>,在</span><span>GUI(</span><span>图形界面</span><span>)</span><span>方面有不同程度的改进和提高。从目前函数语句增加情况看,设计一些比较复杂的应用程序应当说是不成问题的。我预测随着</span><span>AutoIt</span><span>版本进一步提高,</span><span>GUI</span><span>的设计功能将大大增强,到时</span><span>GUI</span><span>设计的编写器就如同</span><span>VB6</span><span>图形设计编写器一定能为我们设计程序应用提供极大的方便。</span><span><br /></span><span><span>&nbsp;&nbsp;&nbsp; </span>AutoIt</span><span>中的</span><span>GUI</span><span>是我们设计</span><span>AutoIt</span><span>可视应用程序的重要组成部分,也是基础部分。下面,我将从窗口的设计讲起。</span><span><span>&nbsp;&nbsp; </span><br /></span><span><span>&nbsp;&nbsp;&nbsp; </span></span><strong><span>(一)窗口的设计</span></strong><strong><span><br /></span></strong><span><span>&nbsp;&nbsp;&nbsp; </span></span><span>在</span><span>GUI</span><span>设计中,窗口的设计是最基本的。窗口一般由窗口名、窗口外形、窗口背景颜色和按钮等组成。</span><span><br /></span><strong><span>1、窗口设计的<span>完整原文语句。</span></span></strong><span><span>GUICreate ( &quot;title&quot; [, width [, height [, left [, top [, style [, exStyle [, parent]]]]]]] )</span><strong><span><br /></span></strong></span><span>窗口的基本语句是<strong>:</strong></span><strong><span><br /></span></strong><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; GUICreate(&quot;</span><span>窗口的设计</span><span>&quot;, 200, 100)<br /></span><span>在窗口的基本语句中:&ldquo;窗口的设计&rdquo;就是窗口文件名;&ldquo;</span><span>200</span><span>&rdquo;就是窗口的宽;&ldquo;</span><span>100</span><span>&rdquo;就是窗口的高。下面请看例子:</span><span><br /></span><strong><span>2、简单窗口的脚本(红色部分)与注解。<br /></span></strong><span>#i nclude &lt;GUIConstants.au3&gt;</span><span>:</span><span>#i nclude &lt;</span><span>外部脚本名称</span><span>&gt;<span><br /></span></span><span>#i nclude</span><span>指</span><span>包括所需的常量和变量。写任何</span><span>GUI</span><span>脚本都必须在脚本最前面写入</span><span> <span>#i nclude &lt;GUIConstants.au3&gt; </span></span><span>语句</span><span>。</span><span><br /></span><span>GUICreate(&quot;</span><span>我的窗口</span><span>&quot;)<span>&nbsp; </span><br /></span><span>默认时可不用标明宽与高,默认值一般是</span><span>400</span><span>与</span><span>400</span><span>。窗口的宽与高也可以使用变量来设计。如:</span><span>$width=500</span><span>, </span><span>$height=500</span><span>。<span><br /></span></span><span>例子如下:<span><br /></span></span><span>$width=500<br /></span><span>$height=500<br /></span><span>GuiCreate(&quot;</span><span>我的窗口</span><span>&quot;,$width,$height,(@DesktopWidth-$width)/2, (@DesktopHeight-$height)/2)<br /></span><span>注解:</span><span>(@DesktopWidth-$width)/2</span><span>为屏幕左边到窗口的距离;</span><span>(@DesktopHeight-$height)/2</span><span>为屏幕顶部到窗口的距离。屏幕</span><span>宽与高是与显示器的分辩率一致的。另外还有风格函数可以继续往后加入,但意义不是很大。<span>对于初学者建议用简单的方法。如</span></span><span>GuiCreate(&quot;</span><span>我的窗口</span><span>&quot;,200,100)</span><span>。要注意的是,窗口</span><span>宽与高的值不要大于显示器的分辩率值。</span><span><br /></span><span>GUISetState (@SW_SHOW) <br /></span><span>显示窗口。如果</span><span>@SW_SHOW</span><span>改为</span><span>@SW_HIDE</span><span>则窗口隐藏。详情见帮助文件:</span><span>GUISetState</span><span>项中的参数。也可什么都不加,</span><span>默认值是显示窗口。即:</span><span>GUISetState ()</span><span>。</span><span><br /></span><span>下面是运行对话框直至窗口关闭的循环语句。</span><span><br /></span><span>While 1<br /></span><span><span>&nbsp;&nbsp;&nbsp; </span>$msg = GUIGetMsg()</span><span><br /></span><span><span>&nbsp;&nbsp;&nbsp; </span>If $msg = $GUI_EVENT_CLOSE Then ExitLoop<br /></span><span>Wend<br /></span><p><span>如图:</span></p><span></span><span>&nbsp;<span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613232543.png" border="0" width="406" height="436" /></span></span><span><br /></span><span>下面是宽与高为</span><span>200</span><span>和</span><span>100</span><span>的窗口图片:</span><span><br /></span><span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613232741.png" border="0" width="206" height="136" /><br /></span><span>由此可见,</span><span>GUI</span><span>设计窗口并非那么复杂,只要设置好几个关键值就可以了。</span><span><br /></span><strong><span>3、窗口背景色彩的设计。<br /></span></strong><span>窗口背景色彩设计主要运用下列语句来解决。</span><span><br /></span><span>背景色彩设计<span>完整原文语句是:</span></span><span>GUISetBkColor ( background [, winhandle] )<br /></span><span>用法:</span><span>GUISetBkColor</span><span>语句必须紧跟</span><span><span>GUICreate</span></span><span><span>语句。括号里的参数可自行设定。实例:</span></span><span><span><br /></span></span><span><strong><span>#i nclude</span></strong></span><span><strong><span> </span></strong></span><span><strong><span>&lt;GUIConstants.au3&gt;</span></strong></span><strong><span><br /><span>GUICreate</span><span> </span><span>(</span><span>&quot;My GUI&quot;</span><span>)</span><span> <br /></span></span></strong><span><strong><span>GUISetBkColor</span></strong></span><span><strong><span> </span></strong></span><span><strong><span>(</span></strong></span><span><strong><span>0xE0FFFF</span></strong></span><span><strong><span>)</span></strong></span><span><strong><span> &nbsp;</span></strong></span><span><strong><span>; </span></strong></span><span><strong><span>设置自己喜欢的色彩</span></strong></span><strong><span><br /><span>GUISetState</span><span> &nbsp;</span><span>()</span><span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br /><span>While</span><span> </span><span>1</span><br /><span>&nbsp; &nbsp; </span><span>$msg</span><span> </span><span>=</span><span> </span><span>GUIGetMsg</span><span>()</span><br /><span>&nbsp; &nbsp; </span><span>If</span><span> </span><span>$msg</span><span> </span><span>=</span><span> $GUI_EVENT_CLOSE</span><span> <span>&nbsp;</span>Then</span><span> </span><span>ExitLoop</span><br /><span>Wend<br /></span></span></strong><span><span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613232919.png" border="0" width="206" height="136" /><img src="http://autoit.8800.org/images/upfile/2005-6/2005613233035.png" border="0" width="206" height="136" /><br /></span></span><span><span>在</span></span><span><span>GUISetBkColor</span></span><span><span> </span></span><span><span>(</span></span><span><span>0xE0FFFF</span></span><span><span>)</span></span><span><span>语句中&ldquo;</span></span><span><span>0xE0FFFF</span></span><span><span>&rdquo;是色彩值;&ldquo;</span></span><span><span>E0FFFF</span></span><span><span>&rdquo;色彩代码。改变色彩只要改变代码即可。上图中的色彩代码分别是&ldquo;</span></span><span><span>E0FFFF</span></span><span><span>&rdquo;和&ldquo;</span></span><span><span>FF0033</span></span><span><span>&rdquo;。</span></span><span><span><br /></span></span><strong><span>4、窗口按钮的设计。<br /></span></strong><span>设计按钮是为了达到控制与应用的目的。设计按钮的完整语句是:</span><span><br /></span><span>GUICtrlCreateButton ( &quot;text&quot;, left, top [, width [, height [, style [, exStyle]]]] )<br /></span><span>可以看出按钮语句是由&ldquo;按钮名、按钮与窗口左边距、按钮与窗口顶边距、按钮形状的宽、按钮形状的高、按钮的外形风格&rdquo;等组成。</span><span><br /></span><span>下面是按钮不同参数的图形:</span><span><br /></span><span><span><img src="http://autoit.8800.org/images/upfile/2005-6/2005613233128.png" border="0" width="206" height="136" /></span><span><img src="http://autoit.8800.org/images/upfile/2005-6/200561323321.png" border="0" width="206" height="136" /><br /></span><br /></span><span>左图的按钮语句是:</span><span><br /></span><span>GUICtrlCreateButton (&quot;OK&quot;,<span>&nbsp; </span>10, 30, 50)<br /></span><span>GUICtrlCreateButton ( &quot;Cancel&quot;, 60, 30, 50)<br /></span><span>右图的按钮语句是:</span><span><br /></span><span>GUICtrlCreateButton (&quot;OK&quot;,<span>&nbsp; </span>10, 30, 50)<br /></span><span>GUICtrlCreateButton ( &quot;Cancel&quot;, 10, 60, 50)</span><span><br /></span><span>从以上两组按钮语句看,要比原文按钮语句简单的多,这也是</span><span>GUI</span><span>易学的奥妙。当然,复杂的语句也是可以掌握好的。如按钮与图标叠加的设计,只要加上相应的语句即可。完整脚本如下:</span><span><br /></span><strong><span>#i nclude &lt;GUIConstants.au3&gt;<br /></span></strong><strong><span>GUICreate (&quot;</span></strong><strong><span>我的图标按钮</span></strong><strong><span>&quot;,400,200)<br /></span></strong><strong><span>GUISetBkColor (0xE0FFFF)<span>&nbsp; </span>; </span></strong><strong><span>设置自己喜欢的色彩</span></strong><strong><span><br /></span></strong><strong><span>GUICtrlCreateButton (&quot;</span></strong><strong><span>我的图标按钮</span></strong><strong><span>&quot;, 10,20,40,40, $BS_ICON)<br /></span></strong><strong><span>GUICtrlSetImage (-1, &quot;shell32.dll&quot;,43)<br /></span></strong><strong><span>GUICtrlCreateButton (&quot;</span></strong><strong><span>我的图标按钮</span></strong><strong><span>&quot;, 80,20,40,40, $BS_ICON)<br /></span></strong><strong><span>GUICtrlSetImage (-1, &quot;shell32.dll&quot;,31)<br /></span></strong><strong><span>GUICtrlCreateButton (&quot;</span></strong><strong><span>我的图标按钮</span></strong><strong><span>&quot;, 150,20,40,40, $BS_ICON)<br /></span></strong><strong><span>GUICtrlSetImage (-1, &quot;shell32.dll&quot;,22)<br /></span></strong><strong><span>GUISetState<span>&nbsp; </span>()<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><br /></span></strong><strong><span>While 1<br /></span></strong><strong><span><span>&nbsp;&nbsp;&nbsp; </span>$msg = GUIGetMsg()<br /></span></strong><strong><span><span>&nbsp;&nbsp;&nbsp; </span>If $msg = $GUI_EVENT_CLOSE<span>&nbsp; </span>Then ExitLoop<br /></span></strong><strong><span>Wend<br /></span></strong><p><span>脚本窗口图形如下图</span></p><span><br /></span>&nbsp;<img src="http://autoit.8800.org/images/upfile/2005-6/2005613233345.png" border="0" width="406" height="236" /><strong><span><br /></span></strong><p><span>当然,按钮还可以叠加图片等,只要设置好函数语句就可以了。设置的方法是在</span><strong><span>GUICtrlCreateButton (&quot;</span></strong><strong><span>我的图标按钮</span></strong><strong><span>&quot;, 10,20,40,40, $BS_ICON)</span></strong><span>语句中,改变</span><strong><span>$BS_ICON</span></strong><span>即可。详情见帮助文件:</span><span><span>GUI Control Styles</span><span>项中的</span><strong><span>Push Button Styles</span></strong><span>参数。</span></span><span>以上仅仅是把按钮设计出来了,但真正要起作用还需要修改和增加语句。关于按钮的控制与应用将在第二讲中详细解答。</span></p><p><span><a href="mailto:!!!xhyxsl@126.com" target="_blank"></a></span></p><span>&nbsp;<br /></span>

wuxind 发表于 2008-5-5 18:04:23

这正我是头痛的问题~!感觉auto分享这么好的东西

xwjsyyx 发表于 2008-5-5 18:19:45

谢谢管理员将我的劣作放入!

一天到晚眼睛痛 发表于 2008-5-5 19:57:14

还行,,,这篇还行,对新手的帮助太大了呀,

xiaocaocao 发表于 2008-5-5 20:24:17

谢谢好文章......

yeahcom 发表于 2008-5-6 00:20:44

谢谢,正想学些这方面的东西

y6278009 发表于 2008-5-6 16:17:03

又学习了:face (34):

siter 发表于 2008-5-6 21:44:11

初来扎到。学习了

cxlswb 发表于 2008-5-7 17:52:46

速度第2讲呢

蓓蕾 发表于 2008-6-30 17:02:08

希望每个星期写一篇啊

蓓蕾 发表于 2008-6-30 17:02:20

希望每个星期写一篇啊

powerofos 发表于 2008-6-30 20:18:05

在我摸索一段时间后,终于有教程了~

linzhixin 发表于 2008-7-5 15:37:37

谢谢好文章......

sheng927 发表于 2008-7-8 11:06:12

学习中,我正找这个呢!

boyhong 发表于 2008-7-11 07:47:42

这种教程绝对对新手有很大帮助~~~~~~~~~感谢~~~~~~~
页: [1] 2 3 4 5 6 7
查看完整版本: GUI设计与制作入门(一)