【HarmonyOS 鸿蒙黑马程序员学习笔记 20.1】-优快云博客

这里写目录标题

文本输入

文本输入组件 TextInput

TextInput ( { } )

提示文本

placeholder : ’ 文本’

TextInput({placeholder:'请输入用户名'})

密码样式输入

TextInput({placeholder:'请输入密码'})
	.type(InputType.Password)

容器间隔

space 容器组件之间间隔

Column({ space:20 }) {}

边距

距离外边的间隔

.padding(10)

实战例子


@Entry
@Component
struct Index {

  build() {
    // space:10 间隙10  组件之间的间隙
    Column({ space:20 }) {
      Image('https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png')
        .width('50%')
        .padding({top:40 , bottom : 80}) // 把华为log上下隔开
      TextInput({placeholder:'请输入用户名'})
      TextInput({placeholder:'请输入密码'})
        // 用密码的方式输入
        .type(InputType.Password)
      Button('登录')
        .width('75%')
      Row({ space: 10 }){
        Text('前往注册')
        Text('忘记密码')
      }
    }
    // 边框距离  如果边距与内宽冲突  优先满足边距  也就会向内挤压
    .padding(10)
  }
}