鸿蒙开发之ArkUI 界面篇六

codes23457789

于 2024-09-17 20:56:39 发布

阅读量105

点赞数 3

文章标签：鸿蒙 Button 鸿蒙输入框鸿蒙输入框占位符鸿蒙密码框鸿蒙 TextInput 鸿蒙登陆界面鸿蒙输入框类型

本文链接：https://blog.csdn.net/renfujiang/article/details/142318459

版权

输入框按钮典型案例就是登录界面必须有输入框和点击的按钮，输入框语法格式：TextInput(参数对象).属性方法(),参数对象叫做placeHold,参数对象是提示的文本，要实现如下效果：

只需要两个TextInput 和一个Button就可以了，button默认就是胶囊形状的，“请输入用户名”和“请old，加上type(InputType.Password)这一句，就能出现密码明文和案文切换的效果如图：

代码戳图：

代码：

@Entry
@Component
struct IndexTest {
  @State message: string = 'IndexTest';
  build() {
    Column(){
      TextInput({
        placeholder:'请输入用户名'
      })
      TextInput({
        placeholder:'请输入密码'
      }).type(InputType.Password)
      Button("登录")

    }
  }
}

细心的你，估计发现垂直方向上的需要点距离，Android上通常是marginTop，鸿蒙的实现方法就方便很多，只需要Column({space:15})，就统一了垂直方向上组件之间的距离是15，效果瞬间高级感就出来了，看看效果哈，下图：

代码如图：

代码如下：

@Entry
@Component
struct IndexTest {
  @State message: string = 'IndexTest';
  build() {
    Column({
    space:15
    }){TextInput({
        placeholder:'请输入用户名'
      })
      TextInput({
        placeholder:'请输入密码'
      }).type(InputType.Password)
      Button("登录")

    }
  }
}