鸿蒙Next-TextInput制作简易登录页面

最新推荐文章于 2024-09-26 15:36:04 发布

牧羊人_sj

最新推荐文章于 2024-09-26 15:36:04 发布

阅读量404

点赞数 1

分类专栏：鸿蒙文章标签：鸿蒙

本文链接：https://blog.csdn.net/qq_59347596/article/details/136821055

版权

鸿蒙专栏收录该内容

10 篇文章 0 订阅

订阅专栏

@Entry
@Component
struct EventCase {
  @State username: string = ''
  @State password: string = ''

  build() {
    Row() {
      Column({ space: 30 }) {
        TextInput({ placeholder: '请输入用户名', text: $$this.username })
          .height(40)

        TextInput({ placeholder: '请输入密码', text: $$this.password })
          .height(40)

          .type(InputType.Password)
        Button('登录')
          .width('100%')
          .onClick(() => {
            // console.log( this.username)
          })
      }
      .padding({
        left: 20,
        right: 20
      })
      .width('100%')
    }
    .height('100%')
  }
}