Skip to content

14 · 选择类控件:报名表单 ​

《LingBuilder 零基础入门实战》第 14 集。前面学会了好用编辑框「填」内容,这一集学会让用户「选」内容:组合框(下拉选一个)、单选框(多个里选一个)、复选框(想选几个选几个)。做完是一张能用的活动报名表。全集目录见 系列总览。

本集目标:认识三种选择类控件 → 学会 控件_取勾选 读取选中状态 → 用字符串拼接汇总报名信息。全程约 10 分钟。

1. 新建项目 ​

欢迎页 →「新建项目」→ 项目名称 报名表单 →「创建项目」:

新建项目

2. 搭界面:一张报名表 ​

控件都在基础控件组里。按下面的表摆(右键画布空白处也可以直接添加):

控件中文名称显示内容 / 属性左距顶距宽度高度
标签/静态控件标题标签活动报名表403030040
标签/静态控件姓名标签姓名401008028
编辑框姓名框(显示内容留空)1409624032
标签/静态控件性别标签性别401608028
组合框性别框项目集合见下一节14015218040
标签/静态控件组别标签组别402208028
单选框学生组学生组14021811026
单选框成人组成人组27021811026
标签/静态控件兴趣标签兴趣(可多选)4028015028
复选框唱歌框唱歌20027610026
复选框跳舞框跳舞20031610026
复选框跑步框跑步20035610026
按钮报名按钮报名4041013040
标签/静态控件结果标签(报名结果显示在这里)4048082060

小知识:编辑框的「显示内容」要留空——它是用户要填的地方,占位提示(灰色提示字)在运行时会自动显示。

界面设计

3. 给组合框喂选项 ​

选中「性别框」,右侧属性找到「项目集合」,在文本框里每行写一个选项:男、女、保密。「默认选中项」填 0 表示默认显示第一项:

组合框项目集合

  • 组合框:点一下弹出下拉列表,用户只能从里面选一个,不用怕填错。
  • 单选框:同一个窗口里的单选框自动「互斥」——选了「学生组」,「成人组」就自动弹开,天生二选一。
  • 复选框:互相独立,勾哪个算哪个,适合「多选」场景。

4. 绑定「报名」按钮的单击事件 ​

选中「报名」按钮 → 「事件」页 → 「被单击 (Click)」卡片 → 「生成并打开」:

事件绑定

5. 写代码:把选择拼成一句话 ​

先在程序集变量表新增一个文本型变量 报名信息,用来累积拼接结果。

_报名按钮_被单击 里写:

lingbuilder
如果 (控件_取文本(姓名框) = "")
    控件_设置文本(结果标签, "请先填写姓名!")
否则
    报名信息 = "姓名:" + 控件_取文本(姓名框)
    报名信息 = 报名信息 + "|性别:" + 控件_取文本(性别框)
    如果 (控件_取勾选(学生组))
        报名信息 = 报名信息 + "|组别:学生组"
    否则
        报名信息 = 报名信息 + "|组别:成人组"
    如果结束
    报名信息 = 报名信息 + "|兴趣:"
    如果 (控件_取勾选(唱歌框))
        报名信息 = 报名信息 + "唱歌 "
    如果结束
    如果 (控件_取勾选(跳舞框))
        报名信息 = 报名信息 + "跳舞 "
    如果结束
    如果 (控件_取勾选(跑步框))
        报名信息 = 报名信息 + "跑步"
    如果结束
    控件_设置文本(结果标签, 报名信息)
如果结束
  • 控件_取勾选(控件名):读取复选框/单选框有没有被选中,选中返回真。想知道用户选没选某一项,就用它。
  • 组合框直接用第 5 集学过的 控件_取文本 就能拿到当前选中的那一项。
  • 单选框二选一:问了「学生组」就不必再问「成人组」——不是它就是另一个,所以用 如果/否则。
  • 复选框要逐个问一遍:每个兴趣一个如果,勾了就往 报名信息 后面拼一段。

完整代码分上下两屏:

完整代码上

完整代码下

6. 运行!什么都没填就点「报名」 ​

保存,点「运行」。先什么都不填直接点「报名」——姓名框里只有灰色占位提示,程序正确判断出「是空的」,提醒先填姓名:

运行-空姓名

7. 填好再报一次 ​

在姓名框输入「李雷」,性别下拉选「女」,组别点「成人组」,三个兴趣全勾上,再点「报名」——一句话报名信息拼好了:

运行-填写后

本集小结 ​

  • 组合框:「项目集合」每行一个选项,控件_取文本 拿选中的那项。
  • 单选框:同窗口自动互斥,适合二选一/多选一。
  • 复选框:各自独立,用 控件_取勾选 逐个判断。
  • 拼长文本的套路:变量 = 变量 + "新增的一段",一段一段往后接。

下一集预告:15 · 延时与延迟调用——让程序「等一等」再干活:延时、延迟调用两兄弟,等待期间界面不卡死。