「极简」扣子(coze)教程 | 小程序UI设计进阶!控件可见性设置

大师兄在上一期的内容中对用户的UI做了一些简单的介绍。这期大师兄继续介绍UI设计上的进阶小技巧,帮我们获得更好的使用体验。

扣子(coze)编程

「极简」扣子(coze)教程 | 3分钟学会小程序UI设计!从零开始创建页面和瓷片按钮

「极简」扣子(coze)教程 | 老司机秘籍,扣子调试实践II ,错误信息读取及定位

「极简」扣子(coze)教程 | 成为老司机的秘籍,扣子调试实践 I

「极简」扣子(coze)教程 | 一篇讲透"变量聚合" 节点,让输入更灵活

「极简」扣子(coze)教程 | 细节决定成败!这个小功能让用户满意度飙升,讲的太细了

「极简」扣子(coze)教程 | 添加插件的另一种方法,上百款插件一键添加,快速扩展你的应用功能!

「极简」扣子(coze)教程 | 上百款插件一键添加,快速扩展你的应用功能!

做小程序不求人 | 零代码神器!0基础秒做专业级App智能体,字节扣子平台抄详细实操纪实

打工人变现新赛道 | 原来做智能体这么简单,5分钟0代码,草履虫实例 【快来学】

「惊觉」未来打工人标配 | 史上第二易懂智能体编程指南来了, 5分钟飞书扣子编程实例 【快收藏】

回顾一下上一期,我们的标题输出界面输出后是这样的。因为需要输出10条结果,而框的高度(或者说手机屏幕高度)非常有限,所以一般只能输出5条记录,其他的内容需要用户向下滑动界面才能可看到。

但是在输出结果以后,我们的上面的内容框应该就可以不显示了(或者说可以隐藏起来)。我们今天就来做这个效果。

方案

我们的方案是使用两个按钮。在还未完成生成时显示按钮A和输入框。 生成以后就把按钮A和输入框隐藏起来。这时显示按钮B,点击这个按钮B可以回到刚开始的状态。两个状态不断的可以切换。(成品视频拉到最后)

添加一个按钮B

首先进入用户界面,选中"标题生成"界面。在左边的组件栏中选择按钮。这样又添加了一个按钮。

修改按钮名字为"重新开始"。

选中新建的按钮,修改名字。

设置事件

当"重新开始"的按钮按下以后,代表新的输入周期就要开始了。

这时候需要清空输出,当输出清空后,我们的内容输入框和"开始"按钮将显示出来。(这部分设置在后面)

点击"重新开始"按钮,选择事件,"新建"。

在"选择组件"中选择输出框,方法选择"清除"。点击确定,这样在点击这个按钮后就会清除输出的内容。

修改按钮可见性

从流程图可以分析出,这个按钮有两个状态。

  • 有输出的情况下:可见的

  • 没有输出的时候:不可见

所以我们要对他的可见性进行简单的编程。首先选中这个按钮,然后点击"可见性"中的"添加条件"。

设置"不显示"

弹出框中可以看满足下面的条件,这个按钮就会隐藏。

通过下面4步选中markdown组件(输出)的内容作为比较值。

条件中选择为空。意思就是markdown组件中没内容,这个按钮就不显示了。

设置内容和按钮A控件的可见性

从流程图可以分析出,这个内容输入框和按钮A的状态。

  • 有输出的情况下:不可见的

  • 没有输出的时候:可见的

正好与之前的按钮B相反。我们使用与上面同样的方式来设置他们的可见性。

输入框

选中输入框,可见性,添加条件。

前面的组件部分是跟按钮B的设置是一样的,但是条件中选择"不为空"

按钮A

对原来界面上的按钮A做同样的操作。

预览

点击预览按钮,开始测试。可以看到界面已经按照我们的策略运行了。

「极简」扣子(coze)教程 | 小程序UI设计进阶!控件可见性设置

历史文章检索:

扣子(coze)编程

「极简」扣子(coze)教程 | 3分钟学会小程序UI设计!从零开始创建页面和瓷片按钮

「极简」扣子(coze)教程 | 老司机秘籍,扣子调试实践II ,错误信息读取及定位

「极简」扣子(coze)教程 | 成为老司机的秘籍,扣子调试实践 I

「极简」扣子(coze)教程 | 一篇讲透"变量聚合" 节点,让输入更灵活!

「极简」扣子(coze)教程 | 细节决定成败!这个小功能让用户满意度飙升,讲的太细了

「极简」扣子(coze)教程 | 添加插件的另一种方法,上百款插件一键添加,快速扩展你的应用功能!

「极简」扣子(coze)教程 | 上百款插件一键添加,快速扩展你的应用功能!

做小程序不求人 | 零代码神器!0基础秒做专业级App智能体,字节扣子平台抄详细实操纪实

打工人变现新赛道 | 原来做智能体这么简单,5分钟0代码,草履虫实例 【快来学】

「惊觉」未来打工人标配 | 史上第二易懂智能体编程指南来了, 5分钟飞书扣子编程实例 【快收藏】

AI编程与系统

20年经验程序员被AI踢馆现场!AI时代职场危机应对

大师兄数字生命崛起 | 腾讯元器五分钟零成本集成"公众号文章问答"

办公&图文创作

立夏爆款!咸鱼最新副业山水藏字接单到手软,工具免费,附保姆级教程

为什么 DeepSeek 复制总带奇怪符号?| 解密AI时代的基础语言markdown

DeepSeek又抽风? | 5.1假期必备,一口气10个DeepSeek 稳定满血入口清单 【快收藏】

90%人不知道的功能 | 飞书多维表格批量自动爬取网上信息,0基础5分钟打造全自动信息加工厂实操【快来试】

一张海报=一部电影 | 一键带你重回电影的黄金年代,即梦3.0让人人都成为海报设计师

信息爆炸时代,怎么能不会这招 | 倍速吸收信息的秘密武器,阿里通意AI,送AI时代择业指南

何止提效10倍,全自动小红书卡片生产攻略 | 只需3步,DeepSeek+多维表格 【先进生产力收藏】

离谱!凌晨保险代理跟我卷AI | 5分钟顶你一天的小红书卡片模板批量生成

清华动手反制美国!又一个国产deepseek时刻?| 能自己动手查资料的智谱"沉思"完整测试

还在用Mermaid+Napkin?| 3步,让大老板深深记住你的名字,制作现场限时公开 【速转家人】

老板露出了赞赏的笑容 | 这个AI绘图神器,让你的 PPT 秒杀麦肯锡,免费 【建议收藏】

只知道Mermaid? 这款独自与visio抗衡20年的免费软件竟让deepseek的生图效率再翻倍 【建议收藏】

废物简历秒变HR心动款!Deepseek教你3步改出必过简历 【建议收藏】

踩坑又踩坑 | 做到这些才能效率翻10倍!用deepseek三分钟绘制各种图表(建议收藏)

别再用KimiPPT助手了 | 比较了三个AI工具后大师兄给牛马的忠告

大师兄登录小红书 | 跟着大师兄学 AI 图文笔记,小红书创作不求人

抢救褪色记忆!手残党福利,AI三步修复老照片

三八妇女节海报设计0成本!用AI工具2步生成精美海报?0基础也能秒懂

体制人必看:DeepSeek智能改稿的3大禁忌与3个提效密码

特朗普VS泽连斯基刷屏 | 别被碎片化信息骗了!这才是AI分析特朗普事件的正确姿势

DeepSeek:选对模型,效率翻倍。 送Deepseek清华AI 5件套

文档系列

小红书/Tiktok运营秘籍 | 《大任智库DeepSeek+ 外经贸企业创新突围讲义精华全版》

他为中央政治局第二十次集体学习演讲 | 郑南宁院士《科技赋能教育》

13所大学Deepseek公开课,一次拿走 | 更新浙大第2季《AI大模型如何破局传统医疗 》

不花钱请家教!秘塔这个AI免费功能让学习效率翻倍 | AIGC技术赋能教育数字化转型

未来教育风向标 | 教育学顶流985高校,华东师范大学《AIGC技术赋能教育数字化转型的机遇与挑战》,13所大学deepseek

中美博弈又添筹码,AI模型差距只剩千分之三 | 455页斯坦福2025 AI指数报告全新出炉,附文档免费下载及中文通意辅读工具

没有更全的了,免费拿走 | 12所大学Deepseek公开课,更新至浙大第2季《智能金融:AI 驱动的金融变革》

Deepseek公开课,不能再全了 | 中山大学 《从技术突破到场景落地:大模型发展图谱与DeepSeek创新应用》。

一次下载10个大学的Deepseek系列课 | 更新至哈工大,《从图灵测试到DeepSeek》 82页

清华大学 | 1-14 全网最全合集,《迈向未来的AI教学实验》369页爆肝呈现 【快收藏】

【免费下载】清华大学Deepseek系列之第九篇 |《DeepResearch应用报告》 【建议收藏】

【免费下载】政务七连发 |《北京"数据要素x"典型案例 》《智慧城市大脑建设方案》 【建议收藏】

【免费下载】制造业数字化两件套 | 《德勤制造业人工智能创新应用发展报告》《中国制造企业数字化转型白皮书》

【免费下载】清华厦大deepseek学术王炸两件套

给被315晚会扎心的朋友们补补血 | 《2024年宇树科技商业计划书》【免费下载】

【免费下载】阿里巴巴全域数据中台 | 华为数据中台建设路径:筑梦数字化未来之路

【免费下载】小朋友再不学AI就来不及啦 | "少年商学院|DeepSeek中小学生使用手册(83页)"

[免费下载]浙江大学DeepSeek系列公开课:智能时代的全面到来和人机协作的新常态(含视频课

这一回不要羡慕别人了,快来取 | 北京大学:DeepSeek与AIGC应用

AI五分钟科普

快转给爸爸 | 从平面到动画,5分钟零基础为小棉袄打造属于自己的迪斯尼魔法回忆

5分钟!| 早读课偷偷哼歌被表扬!这招让<出师表>秒变洗脑神曲无需安装!5 分钟体验 AI 文生图魔法(内有豆包安装方法)

AI新闻

「解读」IT新闻 | 微软裁员 6000 人背后:两次亲身体验暴露的必然性,活该还是无奈?

AI 时代,你的工作会被取代吗?| 如何重塑AI时代的个人价值

马拉松新纪元:冠军只是开始,这些「翻车」画面才是重点,机器人马拉松比赛带来的机器人AI赛道的思考

「好奇」从实验室到独角兽 | 人工智能路演现场直击

东大反制速度震惊白宫幕僚!| 川普关税清单竟被AI秒破解?

这5条愚人节AI生成的假新闻你有没有中招 【快转给中招的朋友】

"4月1号,朋友圈一定要这样发"

四大 AI 联合打造 315 晚会曝光清单,这些信息不容错过!

英特尔首次换上华人CEO | AI你怎么看

特朗普VS泽连斯基刷屏 | 别被碎片化信息骗了!这才是AI分析特朗普事件的正确姿势

相关推荐
DisonTangor4 分钟前
PaddleOCR-VL: 通过0.9B超紧凑视觉语言模型增强多语言文档解析
人工智能·计算机视觉·语言模型·自然语言处理·开源·aigc
skywalk81634 分钟前
在Ubuntu Linux安装brew 使用brew安装llama.cpp 运行文心Ernie大模型
人工智能·ubuntu·llama·ernie·brew·1024程序员节
golang学习记10 分钟前
Vibe Coding不香了,试试深信服的CoStrict 严肃编程模式
人工智能
蒙奇·D·路飞-14 分钟前
Grok、Claude、ChatGPT、Gemini模型适用场景比较
人工智能·chatgpt
腾视科技18 分钟前
安全驾驶 智在掌控|腾视科技ES06终端,为车辆运营赋能
大数据·人工智能·科技·安全·大模型
飞哥数智坊23 分钟前
Cursor + CloudBase,两周闲暇时间做出我的“AI 碎片助理”
人工智能·ai编程
库库8391 小时前
Spring AI 知识点总结
java·人工智能·spring
zandy10111 小时前
2025企业级智能体平台架构拆解: 如何安全合规下构筑强大的护城河
大数据·安全·架构·智能体
AndrewHZ1 小时前
【图像处理基石】通过立体视觉重建建筑高度:原理、实操与代码实现
图像处理·人工智能·计算机视觉·智慧城市·三维重建·立体视觉·1024程序员节