本文详细介绍了如何使用交互动作来构建一个带有清除功能的搜索框控件。从新建文本框、矩形和图标，到设置图标尺寸、不透明度、提示文字以及隐藏元素，再到实现文本改变时的显示和隐藏效果，每个步骤都清晰阐述。最后，通过设置交互动作，实现了文本框内容清空并重新聚焦的功能。这是一个适合新手的学习教程，旨在帮助开发者提升UI交互设计能力。
开发工具与关键技术： 交互动作
1、新建一个文本框、一个矩形和两个图标样式并命名（叉对应清除）
2、根据自己需求，更改“搜索”图标尺寸和不透明度
3、还有“清除”图标的尺寸和不透明度
4、设置文本框的提示文字内容为“搜索”并隐藏边框
5、将它们与矩形一起组合成“搜索框控件（不要忘记隐藏“叉”）
6、下面就是文本框的清除文字效果进行设置，首先设置文本框的“文本改变时”，条件1：当元件文字长度不等于0时
7、显示“叉”
8、条件2：当元件长度等于0时
9、隐藏“叉”
10、文本框的所有设置如下
11、设置“叉”的交互动作，文本框的内容为空，再添加一个设置焦点在“文本框”
12、效果如下
这是我所学到的，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
开发工具与关键技术： 交互动作
作者：陈梓森
撰写时间：2021/5/26
1、新建一个文本框、一个矩形和两个图标样式并命名（叉对应清除）
2、根据自己需求，更改“搜索”图标尺寸和不透明度
3、还有“清除”图标的尺寸和不透明度
4、设置文本框的提示文字内容为“搜索”并隐藏边框
5、将它们与矩形一起组合成“搜索框控件（不要忘记隐藏“叉”）
6、下面就是文本框的清除文字效果进行设置，首先设置文本框的“文本改变时”，条件1：当元件文字长度不等于0时
7、显示“叉”
8、条件2：当元件长度等于0时
9、隐藏“叉”
10、文本框的所有设置如下
11、设置“叉”的交互动作，文本框的内容为空，再添加一个设置焦点在“文本框”
12、效果如下
这是我所学到的，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
扫一扫
3765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
