鸿蒙开发基础3-华为登录界面小练习

话不多说 我们直接上代码

@Entry
@Component
struct HuaWeiHomePage {
  build() {
    Column({ space: 15 }) {
      Image('https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png')
        .width(150)

      TextInput({
        placeholder: '请输入用户名'
      })
      TextInput({
        placeholder: '请输入密码'
      })
        .type(InputType.Password)
      Button('登录').onClick((event: ClickEvent) => {

      })
        .width('100%')

      Row({ space: 15 }) {
        Text('前往注册')
        Text('忘记密码')
      }
    }
    .padding(16)
    .width('100%')
  }
}

如果你能正常跑去来 那么你呈现的是下面这个效果图

可以看到界面的整体实现还是很简洁的 默认全局的横向布局还纵向布局 都可以通过设置space: 的属性值来进行设置 外边距是.margin 内边距是.padding

你也可以给每个边距单独设置值

// 所有的内边距
.padding(16)
// 分别设置边距
.padding({
  top: 10,
  bottom: 100,
  left: 100,
  right: 100
})


// 所有的外边距
.margin(16)
// 分别设置边距
.margin({
  top: 10,
  bottom: 100,
  left: 100,
  right: 100
})

这次只是一个简单的小练习 之后我们继续学习