OpenHarmony应用开发——实现Toast提示功能-鸿蒙物联网应用开发-HarmonyOs应用开发

一、前言

本文我们将实现Toast样式的功能,以便于和用户进行简单、基本的信息交互。需要注意的是,本专栏(OpenHarmony应用开发)不阐述UI设计内容,而主要介绍大家开发中常遇到、常使用的功能问题,以及在物联网开发中常用功能开发。

二、基本工程

本文中,我们将使用一个基本的登录界面进行后续开发,源代码如下,完全复制到Index.ets文件内即可使用。

javascript 复制代码
import promptAction from '@ohos.promptAction';

let user:string="";//声明变量
let pswd:string="";

@Entry
@Component
struct Index {

  build() {
    Column(){
      Blank()
        .height('20%')
      Image($r('app.media.icon'))
        .objectFit(ImageFit.Contain)
        .height('20%')
        .width('100%')
      Row(){
        Text('User:')
          .height('100%')
          .width('20%')
          .fontSize(20)
          .padding(10)
        TextInput()
          .type(InputType.Normal)
          .padding(10)
          .onChange((value:string) =>{
            user=value;
          })
      }
      .height('10%')
      Row(){
        Text('Pswd:')
          .height('100%')
          .width('20%')
          .fontSize(18)
          .padding(10)
        TextInput()
          .type(InputType.Password)
          .padding(10)
          .onChange((value:string) =>{
            pswd=value;
          })
          .width('60%')
        Row(){
          Toggle({type:ToggleType.Checkbox,isOn:false})
            .width('20')
        }
        .width('20%')
        Blank()
      }
      .height('10%')
      Button('登录')
        .type(ButtonType.Capsule)
        .width('80%')
        .height('5%')
        .margin({top:10})
        .border({style:BorderStyle.Solid,color:Color.Green,width:2})
        .onClick(()=>{
            //此处添加登录响应事件
        })

    }
  }
}

在Previewer中,我们可以看到本页面的预览。

我们对该基本工程,做一次基本的解析。

下图所示是声明用于存储账户和密码所需的中间变量,并赋初值 " ".

下图所示,我们添加了一个文本输入框控件,并在文本被改变事件中,将改变后的值赋给上一步声明的中间变量。

下图所示,密码输入框和上一边相似,在文本被改变事件中,将改变后的值赋给上一步声明的中间变量。

随后是登录后的点击事件,我们对该部分做了留白。

三、实现验证功能

上述步骤中,我们已经将文本框中账号和密码的值赋给了两个中间变量,下面我们可以在按钮的点击事件中,判断值是否符合我们的要求,从而实现验证功能。

添加代码,判断账户是否为root,密码是否为123456.

四、实现Toast提示

实现验证功能后,我们可以通过Toast来告诉用户,验证的结果如何。

Toast的基本代码实现如下:

javascript 复制代码
promptAction.showToast({
    message:'登录成功',
    duration:2000,
    bottom:100
})

其三个参数分别为提示信息、保持时间、距离底部距离。

本方法的使用需要导入promptAction库,上述基本工程的代码中,第一行已经导入了promptAction库。

完善登录成功和失败后的代码。

运行成功,查看登录效果。

相关推荐
HarmonyOS小助手3 小时前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
爱笑的眼睛115 小时前
HarmonyOS 应用开发深入浅出:基于 Stage 模型与声明式 UI 的现代化状态管理实践
华为·harmonyos
爱笑的眼睛116 小时前
HarmonyOS 应用开发深度解析:掌握 ArkTS 声明式 UI 与现代化状态管理
华为·harmonyos
爱笑的眼睛116 小时前
HarmonyOS 应用开发深度解析:基于 ArkTS 的跨组件状态管理最佳实践
华为·harmonyos
前端世界6 小时前
鸿蒙系统下的智能设备故障检测实战:从监控到自愈的全流程实现
华为·harmonyos
2501_919749036 小时前
flutter鸿蒙:使用flutter_local_notifications实现本地通知
flutter·华为·harmonyos
Georgewu15 小时前
【HarmonyOS 6】 The target can not be empty. check the build.profile,json5 file of
harmonyos
Georgewu15 小时前
【HarmonyOS 6】Install Failed: error: failed to install bundle.code:9568322
harmonyos
爱笑的眼睛1117 小时前
HarmonyOS 应用开发新范式:深入剖析 Stage 模型与 ArkTS 状态管理
华为·harmonyos
爱笑的眼睛1119 小时前
深入浅出 HarmonyOS ArkUI 3.0:基于声明式开发范式与高级状态管理构建高性能应用
华为·harmonyos