练习实战- 华为登录界面

原创已于 2024-10-21 21:12:49 修改 · 359 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#华为

于 2024-10-21 21:03:58 首次发布

综合实战 - 华为登录界面

构建界面核心思路

构建界面思路：

排版 (分析布局)
内容 (基础组件)
美化 (属性方法)

  build() {
    //构建界面思路：
    // 1. 排版 (分析布局)
    // 2. 内容 (基础组件)
    // 3. 美化 (属性方法)
    Column({ space: 15}){
      //space: 数字 - 组件间隙
      Image($r('app.media.huawei'))
        .width(50)
      TextInput({
        placeholder:'请输入用户名'
      })
      TextInput({
        placeholder:'请输入密码'
      }).type(InputType.Password)
      Button('登录')
        .width('100%')
      Row({space: 15}){
        Text('前往注册')
        Text('忘记密码')
      }
    }
    .width('100%')
    .padding(20)
    //padding(数字或者百分比) -内边距
  }

‍