用户界面设计

《用户界面设计》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、第3章用户界面设计3.1窗体设计3.2文本显示3.3编辑组件3.4按钮3.5单选按钮和复选框3.6列表框3.7修饰组件3.8其他常用组件3.9小结习题三3.1窗体设计窗体是程序中最基本、最主要的操作界面。Delphi程序中所有组件都是在窗体上设计的，窗体是一个特殊的类，它具有属性、事件、方法等其他组件特性。一般来讲，一个应用程序都包含多个窗体，其中有一个是主窗体。3.1.1窗体的简介在Delphi中，窗体可分为主窗体和应用窗体两种。主窗体是整个应用窗体的核心，程序的运行是从主窗体开始的，如果关闭主窗体，整个应用程序也就结束。选择“File”→“New”→“V

2、CLFormsApplication”命令，即可创建一个新的VCL应用程序，这时打开一个空白的窗体，按“F12”键，查看代码编辑器，Delphi自动生成的代码如下：unitUnit1;interfaceusesWindows,Messages,SysUtils,Variants,Classes,Graphics,Controls,Forms,Dialogs;typeTForm1=class(TForm)private{Privatedeclarations}public{Publicdeclarations}end;varForm1:TForm1;imp

3、lementation{$R*.nfm}end.这个单元文件的默认窗体是Form1。每个窗体都对应着一个单元文件，但是单元文件并不一定对应窗体。1．主窗体　　从界面上看主窗体与应用窗体并没有区别，设计和执行也相同。一个应用程序只有一个主窗体，在创建项目时，将默认创建一个窗体，此窗体默认为主窗体。在多个窗体中可以选择任意一个窗体做主窗体，但要注意的是要选择一个核心的窗体做主窗体。选择“Project”→“Options”命令，弹出“ProjectOptionsforProject1.exe”对话框，在左侧树型列表中选择“Forms”选项，右侧显示如图3.1.

4、1所示。图中窗体Form1是主窗体，单击“Mainform”右侧的　按钮，在弹出的下拉列表中选择窗体Form2，单击“OK”按钮，即可设置窗体Form2为主窗体。2．应用窗体　　应用窗体非常重要，大多数功能都在应用窗体中实现。一般地，应用窗体不止一个，它们能够完成各种功能。在程序设计时，一般不分主窗体和应用窗体，而是统称为窗体。图3.1.1设置主窗体3.1.2简单窗体设计窗体设计包括界面设计和程序编写。在界面设计时，需要设置窗体的属性和窗体的事件。窗体设计的好坏直接影响用户的使用情况。1．界面设计时应注意的问题　　界面设计时应该注意以下几个问题：　　（

5、1）简洁性，设计时应做到界面简洁。在窗体上添加的组件不能杂乱无章，用户看到的应是简洁美观的界面。（2）一致性，在同一个应用程序中，界面设计要一致。重点是颜色、字体、样式、操作区域窗体出现的位置和快捷键等。不能将这个窗体的背景颜色设置为红色，那个窗体的背景颜色设置为蓝色，使颜色不一致。同样字体也要保持一致。　　（3）突出重点，界面设计时要把常用的功能放到显著的位置，如工具栏和快捷键。2．窗体的常见属性　　（1）Align属性：该属性是窗体显示在屏幕中的显示方式，该属性值有7个。1）alBottom：使窗口显示在屏幕的底部，拖动窗口时不能移动窗口的位置，但是

6、可以改变窗口的大小。2）alClient：使窗口充满整个屏幕，单击“最大化”按钮，窗口的显示大小和alClient显示的窗口大小类似，一般用于主窗口的显示。3）alCustom：使窗口以传统的方式显示。4）alLeft和alBottom值相似，使窗口在屏幕的左边显示。5）alNone：默认显示方式，即原样显示。6）alRight和alLeft值相似，使窗口在屏幕的右边显示。7）alTop和alBottom值相似，使窗口在屏幕的顶部显示。　　（2）BroderIcons属性：该属性是设置窗体中右上角的系统按钮，如图3.1.2所示。BroderIcons属性有

7、4个子属性，即biSystemMenu，biMinimize，biMaximize和biHelp，它们的属性值都是布尔型。图3.1.2设置系统按钮1）biSystemMenu属性值：用于设置标题栏右上角“最大化”、“最小化”、“关闭”3个系统按钮的显示。当biSystemMenu属性值为false时，biMinimize属性、biMaximize属性和biHelp属性设置成true或false都不起作用。2）biMinimize属性值：用于设置最小化按钮是否可用。3）biMaximize属性值：用于设置最大化按钮是否可用。4）biHelp属性值：用于设置是否

8、显示帮助按钮。（3）BorderStyle属性：用于