本节我们来给按钮添加事件,点击按钮的时候,代码里面可以完成一些操作。我们这里演示,点击按钮修改按钮的文本,点击另外一个按钮,关闭窗体。
新建图形界面项目
点击顶部主菜单:Project(项目)→ New Project(新建项目)→ Application(应用程序)(也可通过 File(文件)→ New → Project → Application 创建),即可生成全新 GUI 图形程序。


或者


创建后桌面会弹出多个窗口:顶部主菜单栏、左侧对象查看器(Object Inspector)、占据大部分界面的代码编辑器(Source Editor)
在窗体上添加两个按钮
窗口顶部菜单栏下方是控件分类标签栏

上面红色方框就饿控件分类标签栏,里面有一个个的选项卡标签分类,第一个是标准Standard 第二个是Additional…
若未选中「Standard(标准控件)」标签,鼠标点击选中它;
找到按钮图标(印有 OK 的矩形)并单击,再点击 Form1 窗体靠左位置,窗体上会出现名为 Button1 的按钮;
再次点击标准栏的按钮图标,在窗体靠右位置单击,生成第二个按钮 Button2。
如果读者知道如何操作,可以参考上节的视频。
按上面的步骤,我们添加了两个按钮

设置 Button1 文字并编写点击事件
单击选中 Button1,左侧对象查看器会展示它的所有属性:
如果上面的这个设置窗口隐藏了,读者可以点击控件中的箭头按钮,就可以显示出来。(或者按F12)

现在点击第一个按钮。左侧栏会显示这个按钮的属性和事件。

上图,点击button1后 左侧栏的上方显示当前选择的是这个button1控件,然后左侧栏的下方就显示这个按钮的属性和事件的一个标签栏。
属性,就是用来设置这个按钮的外观样式等等。
事件,就是用来设置这个按钮的点击等等的动作。
- 找到顶部
Caption(标题)属性,把默认值Button1修改为Press,按回车或点击空白处,按钮文字会同步更新; - 切换到对象查看器的「Events(事件)」标签,这里存放按钮所有可触发事件(单击、移入、移出等);
- 找到
OnClick(单击事件),点击右侧带三个点...的按钮,编辑器会自动跳转至代码页,生成空白点击函数:

之后点击其他地方

设置窗体上面的按钮文字就改变了。
继续在设置窗体中点击按钮,然后切换到事件Events的标签中

这里就是我们的按钮默认拥有的事件Events了,读者可以给按钮绑定不同的事件。例如我们找到OnClick,这是点击事件。当用户用鼠标左键点击按钮的时候,就会执行事件绑定的事件方法。

点击了OnClick后,右侧会显示一个…的按钮,点击这个…按钮会创建空白的事件函数。

然后我们在begin end里面添加一句代码,作用是点击按钮后,修改按钮的文字。
procedure TForm1.Button1Click(Sender: TObject);
begin
Button1.Caption := 'Press again'; // input this code
end; Code language: JavaScript (javascript)
现在,点击按钮后,就会执行这个红色方框中的代码,这时候程序就到达了Pascal代码部分了,就可以进行各种各样的逻辑操作了。我们的大部分GUI程序都是差不多这种模式。

按快捷键 F12 切回窗体设计界面。
设置 Button2 文字与关闭程序事件
选中 Button2,在对象查看器中将 Caption 改为 Exit;
同样进入 OnClick 事件,点击 ... 跳转代码,填入关闭指令:
procedure TForm1.Button2Click(Sender: TObject);
begin
Close; // 关闭窗口、退出程序
end;Code language: JavaScript (javascript)

保存项目(务必频繁保存)
顶部菜单选择 Project → Save Project As(另存项目),先保存窗体单元文件(后缀.pas);
随后弹窗要求保存项目配置文件(后缀.lpi)。
注意:单元文件名和项目名不能完全相同,否则编译会报 “重复标识符” 错误
编译并运行程序
两种运行方式:
- 菜单:
Run(运行)→ Run; - 快捷键:直接按
F9。 软件会先编译、链接代码,无报错则直接启动成品程序。
运行时会弹出纯窗体(不再显示设计用网格点),这是软件主窗口:
- 点击
Press按钮,文字变为Press again; - 点击
Exit按钮,窗口关闭、程序退出,自动回到带网格的设计界面,可继续修改代码。
