鸿蒙的图片组件以及输入框与按钮

Image 图片组件

作用：界面中展示图片

语法：

网络图片资源：

Column(){
  Image('网络图片路径')
}

本地图片资源：

图片要放在media该目录中 

Column(){
  Image($r('app.media.图片'))

输入框与按钮

需求：实现登录或注册的排版 → 输入框和按钮组件

输入框语法：

TextInput(参数对象)
    .属性方法()

 按钮语法：

Button('按钮文本')

1.参数对象：placeholder提示文本

2.属性方法：.type（InputType.xxx） 设置输入框 type 类型

tryep  值                解释说明

① Normal             基本输入模式，无特殊限制

② Password         密码输入模式

TextInput({
  placeholder: '占位符文本'
}).type(InputType.Password)

如何调整组件之间的距离

给外层容器组件加{ space ：数字 } 

Column({ space: 20}){
}

做个综合练习，以图片为准

实现代码： 

build() {
   Column({ space: 15 }) {
     TextInput({
       placeholder: '请输入用户名 '
     })
     TextInput({
       placeholder: '请输入密码'
     }).type(InputType.Password)
     Button('登录')
       .width('100%')
   }
   .padding(20)
   .width('100%')
 }

 注：padding（内边距），后续我将会出一篇详细介绍