第8章建立用户界面课件.ppt

1、第第8章章 建立用户界面建立用户界面在Delphi编程设计界面的过程中，要经常使用到组件。通过可视组件，可以在窗体中方便地构建与用户交互的界面。另外一些不可视的组件可以为程序增加许多强大的功能。在Delphi集成开发环境的组件栏中，按照功能分类罗列了大量的组件，熟悉它们可以提高开发程序的进度。此外，还可以根据需要，调整组件栏中组件的位置，或者在组件栏中添加、删除组件，还可以为了满足一些特殊需求而创建新的组件，并把它们添加到组件栏中。8.1 常用的组件 8.2 常用组件的用法8.1 常用的组件常用的组件 Delphi中常用的几类可视组件有：文本组件；特殊输入组件；按钮及其分类组件；列表组件；分组

2、组件；信息反馈组件；表格显示组件；图形显示组件。8.1.1 组件的一般操作8.1.2 文本组件8.1.3 特殊输入组件8.1.4 按钮及其分类组件8.1.5 列表组件8.1.6 分组组件8.1.7 信息反馈组件8.1.8 图形显示组件8.1.1 组件的一般操作在窗体中使用组件主要包括：向窗体中添加组件；删除窗体中的组件；调整组件的大小和位置；设置可视组件的TabOrder；组件的锁定和解锁；设置窗体中组件的属性；创建组件的事件处理过程。1.向窗体中添加组件 在组件栏中需要添加的组件上单击一下鼠标左键，鼠标形状发生改变。然后在窗体中再单击一下鼠标左键，就将组件添加到窗体中了。这时添加的组件以固定

3、的大小出现在窗体中，接着可以对组件的大小进行调整。在组件栏中需要添加的组件上单击一下鼠标左键，鼠标形状发生改变。然后在窗体中某个位置按下鼠标左键并拖动，松开鼠标左键后，组件就以刚才拖动的大小出现在窗体中，接着也可以对组件的大小进行调整。8.1.1 组件的一般操作 在组件栏中双击组件，则被双击的组件会自动添加到当前默认的窗口或容器组件中。在窗体中选择一个组件或多个，通过菜单命令“Edit”“Copy”复制到剪贴板中，然后通过菜单命令“Edit”“Paste”将剪贴板中的组件粘贴到窗体中。粘贴出来的组件与原组件具有基本一致的属性，如大小、字体等。2.删除窗体中的组件如果要删除窗体中的某个组件，可以

4、先选中该组件，然后单击键盘上的Delete键就可以了。也可以通过主菜单中的“Edit”“Cut”命令实现。此外，也可以一次选中多个组件进行删除操作。选定多个组件的方法有：按下Shift键的同时，利用鼠标左键单击各个组件。同时被选中的组件四周将会出现8个灰色的正方形黑点。在窗体上没有组件的地方按下鼠标左键并拖动，将会出现一个虚框。松开鼠标左键后，该虚框“触及”到的组件就被选中了。8.1.1 组件的一般操作3.调整组件的大小和位置 改变组件在窗体中的大小和位置可以采用下面的方法：(1)鼠标操作 利用鼠标左键单击组件，则将组件选中，这时被选中的组件四周出现8个正方形黑点。在组件上按下鼠标左键并拖动，

5、可以方便地改变组件的位置。如果将鼠标移动到某个黑点上，鼠标形状将变成上下拖动的形状，此时可以按下鼠标左键进行拖动，改变组件的大小。8.1.1 组件的一般操作(2)键盘操作 利用键盘的上、下、左、右移动键可以在窗体中选择组件。选中某个组件后，通过Ctrl+、Ctrl+、Ctrl+、Ctrl+可以改变组件的位置，通过Shift+、Shift+、Shift+、Shift+可以改变组件的大小。4.设置可视组件的TabOrder在Windows的对话框中可以通过按下Tab键，依次定位到各个具有输入焦点的可视组件。可以通过设置组件的TabOrder属性来确定这种定位的顺序。5.组件的锁定与解锁一般在窗体中

6、将组件的大小和位置安排好后，可以将组件锁定，这样就不会因为误操作而改变已经设置好的大小和位置。8.1.1 组件的一般操作6.设置窗体中组件的属性在窗体中选中单个组件后，在对象编辑器中就可以对其属性进行设置了。如果单个组件在窗体中不好选中，则可以在对象编辑器中的对象列表组合框中选择。如果选中了多个组件，则可以统一地进行属性设置。这时对象编辑器中出现的属性为选中组件的共同属性。7.创建组件的事件处理过程在窗体中选中某个组件后，在对象编辑器的Events属性页中就可以创建相应的事件处理过程。双击某个事件右边的下拉式组合框，则自动创建该组件的事件处理过程，并将光标定位到代码编辑器中。如果在窗体中双击某

7、个组件，则会自动生成其默认的事件处理过程。例如，对于Edit组件来说，默认的事件就是OnChange事件。此外，在窗体中对组件还可以进行“栅格对齐”、“左右翻转”和“改变比例”等操作。8.1.2 文本组件在应用程序的界面上，往往需要用户输入一些文字，或者以一定的格式将文本显示给用户，这时可通过文本组件来实现。组件名功能EditEdit组件可以显示、编辑单独的一行文本MemoMemo组件可以显示、编辑多行文本MaskEditMaskEdit组件可以显示、编辑具有指定格式的文本，如6位数字的邮政编码、固定格式的电话号码等RichEditRichEdit组件可以显示、编辑具有丰富文本格式(Rich

8、Text Format)的文件，如.rtf文件。8.1.2 文本组件1.Edit组件 Edit组件是常用组件之一，在使用Edit组件的时候应注意：AutoSelect属性可以设置当Edit组件获得输入焦点时，是否自动选中所有的文本。PasswordChar属性可以将用户输入的所有字符以同一个字符显示。Edit组件最常用的事件（也是默认事件）为OnChange，也就是当Edit组件中的文本发生改变的时候，该事件的处理过程执行。8.1.2 文本组件2.Memo组件 对一些比较长的文本内容可以利用Memo组件来显示、编辑。在使用Memo组件的过程中应注意：可以通过Text属性来存取文本内容。可以通过

9、Modified属性来确定文本内容是否发生了改变。Memo组件没有从TCustomEdit类继承AutoSelect属性，所以不可以使用该属性。3.MaskEdit 可以通过EditMask属性来设置输入的格式。8.1.2 文本组件 4.RichEdit 在使用RichEdit组件的时候，有下面的注意点：如果PlainText属性设置为True，则在RichEdit组件中显示RTF文件的时候，将格式标记以普通文本的方式显示出来。如果PlainText属性设置为False，则根据RTF文件中的格式设置来显示。通常将PlainText属性设置为False。通过方法Lines.LoadFromFil

10、e和Lines.SaveToFile可以方便地存取RTF文件。8.1.3 特殊输入组件特殊输入组件1.ScrollBar Kind属性可以设置滚动条是水平的还是垂直的。Max、Min属性用来确定滚动条表示数值的范围，数据类型为32位有符号整数类型（Integer）。LargeChange、SmallChange可以设置滚动条数值改变的大小。Position属性表示了滚动条当前的位置。2.TrackBar Frequency属性表示每隔几个数值显示一个刻度。LineSize属性与PageSize属性对应，表示比较小的变化时位置的改变。PageSize属性表示比较大的变化时位置的改变。Slider

11、Visible属性用来设置是否显示滑动按钮。ThumbLength属性表示滑动按钮的宽度(或高度)。8.1.3 特殊输入组件特殊输入组件 TickMask属性用来指定标尺显示的位置。3.UpDown Assosiate属性指定与UpDown组件关联的组件，可以通过下拉的组合框进行选择。Increment属性指定通过UpDown组件而每次增加或减少的步长。Orientation属性确定组件的方向。Thousand属性可以设置当数值超过999时，是否在千位后显示一个逗号。Wrap属性可以设置相关联的组件中的数值是否循环变化。如在最大值的时候，再按上箭头，则相关联的组件中数值变为最小值。4.HotK

12、eyHotKey组件可以在设计阶段指定热键，通过设置HotKey属性设定热键，如图8-6所示，也可以在运行期间改变。8.1.4 按钮及其分类组件按钮及其分类组件1.Button 如果某个按钮的Default属性设置为True，则在该视图中按下回车键Enter后，将执行该按钮的OnClick事件的处理过程。通常在一个窗口中只设置一个默认按钮。2.BitBtn 可以自己制做位图按钮上的图形，也可以采用Delphi指定的一组默认图形。NumGlyphs属性指明该位图按钮使用图形的个数，可以设置为14之间的一个整数。在位图按钮具有多个图形的时候，位图按钮通常显示的是第1个图形；当按钮被按下后，显示第3

13、个图形；当按钮失效后，显示第2个图形。8.1.4 按钮及其分类组件按钮及其分类组件3.SpeedButton在加速按钮上可以同时显示图形和文字，用法与位图按钮很相似。4.CheckBox 可以通过Alignment属性设置复选按钮上文字的位置。可以在设计阶段就设置好复选按钮的状态。通过Checked属性可以将复选按钮设置为“选中”和“未选中”状态，通过State属性可以将复选按钮设置为“选中”、“未选中”或“部分选中”。5.RadioButton通常在使用单选按钮时，总是将其进行分组。在同一组中，只能同时选中一个按钮，其余按钮自动取消选中。在实现单选按钮的分组时，可以有两种方法：利用分组框组件

14、（GroupBox）和单选按钮组件（RadioButton）实现。利用单选按钮分组框（RadioGroup）实现。可以通过ItemIndex属性来确定选中哪一个单选按钮。8.1.5 列表组件列表组件1.ListBox 可以在设计阶段改变Items属性来预先设置列表框的内容，同时也可以在运行期间通过代码改变列表框的内容。如果将ListBox组件的MultiSelect属性设置为True，就可以一次选中多个条目。如果将ListBox组件的Sorted属性设置为True，可以自动将列表框中的字符串排序。2.ComboBox 组合框有五种类型，可以通过Style属性来设置。通过属性DropDownCo

15、unt可以改变列表框显示条目的个数。当列表框中的条目大于DropDownCount时，将会在列表框右面自动出现一个滚动条。8.1.5 列表组件列表组件3.TreeView 树的生成可以在设计阶段进行，也就是改变Items属性。在程序运行期间，可以动态地改变树的内容。可以通过TreeView组件Items属性的Add、AddChild、Delete函数等实现。一般在树上的每个条目前会有一个小图标。有时当该条目被选中时，会显示另一个小图标。这些小图标由ImageList组件进行统一管理。如果将RightClick属性设置为True，则在树的某个条目上单击鼠标右键，也可以将该条目选中。8.1.5 列

16、表组件列表组件4.ListView 在ListView中有一些图标，添加图标的方法与TreeView组件一样。通过对ListView组件的Columns属性进行设置，可以确定将要显示的列数，并且可以为每一列指定文字的对齐方式、显示的宽度、图标索引号等。5.ImageList ImageList组件主要用来对窗体中的图标进行管理，统一分配索引号，然后提供给TreeView组件、ListView组件等。通常应将Masked属性设置为True，这样，图标中的背景框就不显示出来。8.1.5 列表组件列表组件6.CheckListBox 可以通过CheckListBox组件的Items属性，在设计阶段添

17、加、修改列表内容。7.DateTimePicker DateTimePicker组件可以实现日期或者事件的快速输入。如果Kind属性设置为dtkDate，则输入的是日期；如果Kind属性设置为dtkTime，则输入的是时间。在输入的是日期的情况下，修改DateFormat属性可以设置日期的格式，有两种格式：dtLong（长日期型）和dtShort（短日期型）。8.1.6 分组组件分组组件 在GroupBox、Panel、ScrollBox、TabControl和PageControl等组件中可以放置其他组件，所以是容器组件。在使用容器组件的时候应注意：应先添加容器组件，然后在选中该容器组件的情

18、况下，再向其中添加其他组件。如果将容器组件移动、删除，则其中的组件一起被移动、删除。容器组件中的其他组件只能在该容器组件中显示，超过容器组件边框的部分将不显示出来。在窗体上设置Tab键顺序的时候，容器组件和它包含的组件是作为一个组件来参加排序的。容器组件中的组件可以独立于容器外的组件进行Tab键顺序排列。8.1.6 分组组件分组组件1.GroupBox 如果要将几个组件放在一个GroupBox组件中，必须先在窗体中放置这个GroupBox组件，然后选中该GroupBox组件，再添加其他组件。2.RadioGroup 通过RadioGroup组件可以快速生成一组单选按钮。通过Items属性，可以

19、预先设定单选按钮。Columns属性可以设置分组框中的列数，各个按钮之间的距离会自动设置成等间距的。3.Panel 在窗体中显示图形的时候，一般先添加一个Panel组件，然后在上面再添加Image组件。这样在图形显示的时候，可以以Panel组件的边框做边界。8.1.6 分组组件分组组件4.ScrollBox 如果ScrollBox组件中的其他组件放置的位置超出了ScrollBox组件的边界，则会自动出现水平方向的或垂直方向的滚动条，通过滚动条，可以看到其他组件超出边界的地方。5.TabControl 通过修改Tabs属性，可以手工地添加标签的个数。在Images属性中与ImageList组件关

20、联，可以为每个标签设置一个图标。改变Styles属性，可以将标签的显示方式设置为标签方式、按钮方式、平板按钮方式。8.1.6 分组组件分组组件6.PageControl 在PageControl组件上单击鼠标右键，在弹出式菜单中选中“New Page”命令，将会增加一个新的页面。对于PageControl组件，利用鼠标左键单击标签与单击页面位置选中的对象是不同的。在PageControl组件的不同页面中，可以加入不同的组件。在选中整个组件的情况下，改变ActivePage属性，可以改变当前的激活页。另外还可以改变Images属性，使之与某个ImageList组件相关联，为每个页指定一个图标。在

21、选中具体页面的情况下，可以改变PageIndex属性，也就是标签排列的顺序会发生改变。另外可以改变ImageIndex属性，指定相关ImageList组件中的图标索引值。8.1.6 分组组件分组组件 7.HeaderControl 改变Align属性，可以指定HeaderControl组件放置的位置。默认值为alTop，组件停靠在窗体的上部，宽度充满整个窗口。将Align属性设置为alNone，则只能改变HeaderControl组件的位置与大小了。选中HeaderControl组件并单击鼠标右键，在弹出式菜单中选择“Sections Editor”命令，可以对HeaderControl组件的

22、列进行编辑，指定每列的文字、宽度等。8.1.7 信息反馈组件信息反馈组件1.Label通常利用标签组件在窗体上显示静态文本。此外，将标签组件与其他没有标题的组件相关联后，可以通过键盘上的Tab键使这些组件获得输入焦点。通过设置Caption属性，可以改变Label组件显示的内容。2.ProgressBarProgressBar具有Max和Min属性，用来表示进度条所表示的最大值和最小值。通常，Max设置为100，Min设置为0，Position属性的初始值设置为0。经过以上设置后，就可将整个工作分成了100份，每完成1份，就将Position属性的数值加1。3.StatusBar状态条通常放置

23、在窗体的底部，在上面动态地显示一些信息。4.StaticTextStaticText组件的用法类似于Label组件。StaticText组件上可以显示只读文本，该组件具有一个Widnows句柄。8.1.8 图形显示组件1.Image 通过Picture属性，可以在设计阶段预先装入一个图形文件，可以为bmp、jpg、jpeg、wmf、emf和ico等。在装入大型压缩图片的时候，可以将IncrementalDisplay属性设置为True。2.Shape 展开Shape组件的Brush属性，可以对画刷的颜色、类型进行设置。展开Shape组件的Pen属性，可以对画笔的颜色、模式、类型和宽度进行设置。

24、可以改变Shape组件的Shape属性，生成不同形状的图形，主要有矩形、正方形、圆形、椭圆形、圆角矩形等。8.1.8 图形显示组件3.Bevel通过改变Bevel组件的Shape属性和Style属性，可以设置Bevel组件的形状和风格。4.PaintBox在PaintBox中做图类似于Image组件，但不可以从图形文件中装入图形。5.AnimateAnimate组件可以播放一些动画.avi文件，但这些动画文件必须是无声的。将Active属性设置为True，则可以播放动画。6.Splitter分隔条控件可以将一个窗体分成两部分，并可以动态地改变这两部分的大小。8.2 常用组件的用法常用组件的用法

25、【例8-2】本例实现一个教师简历的信息输入。一个教师的属性有姓名、学历、性别、职称等，还有一些备注。当上述这些属性有改动后，“刷新简历(R)”按钮就被激活，按下后，就在简历一项中生成该教师的一个大致简历。按下“关闭”按钮后，如果教师属性有改动但简历没有刷新，则提示是否刷新，根据回答做出响应后退出程序。在实现例程的过程中应注意：一开始，“刷新简历”按钮为失效状态。当教师的任一个属性改动后，该按钮激活。所有组件的字体属性都与窗体的字体属性一致。所有组件都可以通过热键激活，通过键盘进行操作。不同事件使用同一个事件处理过程。体现单选按钮的两种使用方法：一种是GroupBox组件与RadioButton

26、组件的组合（性别属性）；另一种是RadioGroup的使用（职称属性）。关闭按钮按下后，要检测简历是否更新。8.2 常用组件的用法常用组件的用法【例8-2】组件名称组件标题其他属性Label1姓名(&N)FocusControl:Edit1Edit1将Text属性清空Label2学历(&E)FocusControl:ComboBox1ComboBox1Items：中专大专大学;Style:csDropDownListGroupBox1性别(&S)Checked:TrueRadioButton1男RadioButton2女RadioGroup1职称(&T)Items:讲师副教授教授;ItemIn

27、dex:2GroupBox2备注(&B)CheckBox1中国科学院院士CheckBox2中国工程院院士CheckBox3863首席科学家Label3简历(&M)FocusControl:Memo1Memo1将Lines属性中的内容清空Button1刷新简历(&R)Default:TrueBitBtn1关闭(&C)Kind:bkCustom;ModalResult:mrNone;NumGlyphs:1;Glyph:装入图形【例8-2】var Form1:TForm1;Dirty:Boolean;/标志属性内容是否修改procedure TForm1.FormCreate(Sender:TObj

28、ect);begin Button1.Enabled:=False;/将“刷新”按钮失效 Dirty:=False;/标志属性内容没有修改end;procedure TForm1.Button1Click(Sender:TObject);begin Memo1.Clear;/清空Memo1组件，便于重新生成简历内容 if Edit1.Textthen/如果已经输入姓名，则添加到简历中 Memo1.Text:=姓名:+Edit1.Text;if ComboBox1.Textthen/如果在组合框中已选择学历，则添加到简历中 Memo1.Text:=Memo1.Text+#13#10学历:+Com

29、boBox1.Text;if RadioButton1.Checked=True then/将性别添加到简历中 Memo1.Text:=Memo1.Text+#13#10性别:男 else Memo1.Text:=Memo1.Text+#13#10性别:女;if RadioGroup1.ItemIndex=0 then/将职称添加到简历中 Memo1.Text:=Memo1.Text+#13#10职称:讲师 else if RadioGroup1.ItemIndex=1 then Memo1.Text:=Memo1.Text+#13#10职称:副教授 else Memo1.Text:=Memo

30、1.Text+#13#10职称:教授;if CheckBox1.Checked=True then/将备注添加到简历中 Memo1.Text:=Memo1.Text+#13#10该同志为中国科学院院士;if CheckBox2.Checked=True then Memo1.Text:=Memo1.Text+#13#10该同志为中国工程院院士;if CheckBox3.Checked=True then Memo1.Text:=Memo1.Text+#13#10该同志为863首席科学家;Dirty:=False;/标志简历内容已经刷新 Button1.Enabled:=False;/将“刷新”

31、按钮失效end;procedure TForm1.BitBtn1Click(Sender:TObject);begin if Dirty=True then begin if MessageDlg(简历内容已经修改，是否刷新？,mtInformation,mbYes,mbNo,0)=mrYes then begin Button1Click(BitBtn1);/刷新简历内容 ShowMessage(你选择的是刷新。);end else ShowMessage(你选择的是不刷新。);end;Close;/关闭程序end;procedure TForm1.Edit1Change(Sender:TO

32、bject);begin Button1.Enabled:=True;/让刷新按钮有效 Dirty:=True;/标志属性内容已经修改end;【例8-3】本例主要实现了动态图像的装入，并且可以向图像上添加说明文字的功能。在实现例程的过程中应注意：一开始，“应用”按钮为失效状态。当翻页步长或显示文字发生改变后，该按钮被激活。事先应寻找一个位图文件，最好宽度比较长，这样在Image组件中添加的滚动条组件才能派上用场。【例8-3】组件名称组件标题其他属性PanelImage1Picture：NoneScrollBar1Kind:sbHorizontal；LargeChange：5；SmallChan

33、ge：1GroupBox1设置(&S)Label1翻页步长(&T)FocusControl：Edit1Edit1ReadOnly：True；Text:5UpDown1Associate：Edit1；Increment：1；Max：20；Min:0；Position：5Label2显示文字(&E)FocusControl：Edit2Edit2清空TextButton1应用(&A)Default：TrueLabel3Alignment：taRightJustify；Transparent:True【例8-3】procedure TForm1.FormCreate(Sender:TObject);b

34、egin /动态装入图片 Image1.Picture.LoadFromFile(MyPicture.bmp);/设置滚动条的最大值 ScrollBar1.Max:=Image1.Picture.Width-Image1.Width;/将Image1组件的宽度等同于图片的宽度 Image1.Width:=Image1.Picture.Width;Button1.Enabled:=False;/将“应用”按钮失效end;procedure TForm1.ScrollBar1Change(Sender:TObject);begin /改变图片的左边界位置，让图片滚动显示 Image1.Left:=

35、-ScrollBar1.Position;end;procedure TForm1.Edit1Change(Sender:TObject);begin Button1.Enabled:=True;/让“应用”按钮有效end;procedure TForm1.Button1Click(Sender:TObject);begin Label3.Caption:=Edit2.Text;/更新图片下方显示的文字 /更新滚动条翻页时的步长 ScrollBar1.LargeChange:=StrToInt(Edit1.Text);Button1.Enabled:=False;/将“应用”按钮失效end;procedure TForm1.FormShow(Sender:TObject);begin /在最初视图显示时将应用按钮失效 Button1.Enabled:=False;end;