一个App完成入门篇(四)- 完成反馈页面

上一节中我们学会了如何通过点击不同按钮切换页面,这节专注于完成反馈页面的功能以及细节动画。

  • 导入项目
  • 添加新组件
  • 同步新组件
  • 完成页面布局
  • 输入时加动画效果
  • 弹出日期选择
  • 直接引用UI页面

将要学习的demo效果图如下所示

1. 导入完整项目

本节示例demo请参考下载地址,可以导入到设计器中学习。

2. 添加新组件
本节中将要用到两个新组件,do_DateTimePicker和do_Picker组件,这两个组件是在创建应用时没有的,需要从组件商店中添加。在第一节Hello World教程中,我们通过设计器新建的项目,会在开发者中心-应用开发创建一个相应的应用,如图所示
我们点击应用配置按钮,进入应用配置页,选择“组件配置”,如下图所示
蓝框中的内容是当前应用可使用的组件列表,每个组件都有不同版本,每个版本对应着更新了不同内容,用户在使用时选择自己想用的版本即可;点击绿框中的“添加组件”按钮,然后选择“商店组件”,找到do_Picker和do_DataTimePicker组件,点击后面的“+”号进行添加组件操作,此时再返回“组件列表”中就可以看到刚刚我们新添加的两个组件了。

3. 同步新组件
想要在设计器中使用刚刚添加的两个组件,只需要在WorkSpace中选中该应用,再点击一下同步按钮即可。这样我们从商店选择的新组件就可以在设计器中使用了。

3. 完成页面布局
分析一下页面布局,这里我们使用一个线性布局LinearLayout(红框)去包裹四个绝对布局ALayout(蓝框)这四个ALayout的ID从上到下分别设置为do_ALayout_3、do_ALayout_createTime、do_ALayout_type和do_ALayout_7,因为线性布局所有内部子控件都从上向下罗列,保证组件直接紧密排列,每个ALayout中又去分别包裹Label标签组件、TextBox、TextField等用于显示和输入的组件,最底下都有一个height为1,bgColor为灰色的ALayout作为一条分割线。

4. 输入时加动画效果
在ID为do_ALayout_3的ALayout中,添加一个Label组件(修改ID为do_Label_title)和一个单行文本TextField(修改ID为do_TextField_title),通过给Label设置text属性为“标题”来展示我们想要显示的文字;修改TextField的hint属性为“标题”能让该组件在text属性为空时显示提示信息。

我们想让输入文字时有显示“标题”的Label组件有一个向上的动画效果,直接订阅TextField的textChanged事件,这个事件会在text改变时触发,在事件的回调中调用所有UI都有的基类方法show,通过给show方法设置动画类型和动画时间参数,来达到Label的动画效果,需要说明的是,在使用show方法前要保证UI组件的visible是为false的才会有动画效果。同样的效果我们也给放“内容”的Label加上。

5. 弹出日期选择
我们想要在点击“反馈时间”的do_ALayout(ID为)时弹出do_DateTimePicker选择日期,只需要订阅do_ALayout_createTime的touch点击事件,在触发事件的回调中调用do_DateTimePicker的show方法来显示一个日期选择器。

因为do_DateTimePicker是SM类型的,这里直接通过类型来对组件进行实例化。

6. 直接引用UI页面
要实现文章顶部的效果图第三张所示效果,我们首先要单独添加一个UI页面,只放一个Picker组件,并将页面的其他地方设置为灰色透明效果,

posted on   jonh.felix  阅读(1957)  评论(1编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示