当前位置：首页 > news >正文

鸿蒙移动应用开发--UI组件及应用

news 来源：原创 2025/5/12 23:05:05

实验要求：

制作一个类似于deepseek的登陆界面，要求有输入框（含输入提示）、按钮、背景等部分，应用好内边距、外边距等相关知识。实验报告格式不限，背景图及logo不限。

源代码：


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Stack() {
      // 背景图
      Image($r('app.media.bg'))
        .width('100%')
        .height('100%')
        .objectFit(ImageFit.Cover)// 设置图片填充方式为覆盖整个区域

      Column() {
        Column() {
          // Logo
          Image($r('app.media.logo'))
            .width(120)
            .height(120)
            .margin({ top: 150 ,bottom:50})

          // 用户名输入框
          TextInput({
            placeholder: '请输入用户名',
          })
            .width('80%')
            .height(50)
            .backgroundColor(Color.White)
            .padding(10)
            .margin({ bottom: 20 })
            .borderRadius(25)

          // 密码输入框
          TextInput({
            placeholder: '请输入密码',
          })
            .width('80%')
            .height(50)
            .backgroundColor(Color.White)
            .padding(10)
            .margin({ bottom: 40 })
            .borderRadius(25)
            .type(InputType.Password)// 设置输入框类型为密码输入

          // 登录按钮
          Button('立即登录', { type: ButtonType.Capsule })// 创建一个胶囊形状的按钮
            .width('60%')
            .height(50)
            .backgroundColor('#007DFF')
            .fontColor(Color.White)
            .fontSize(18)

          // 辅助链接
          Row() {
            Text('忘记密码')
              .fontSize(14)
              .fontColor('#666')
              .margin({ right: 30 })

            Text('注册账号')
              .fontSize(14)
              .fontColor('#007DFF')

          }.margin({ top: 20 })
        }
        .width('100%')
        .alignItems(HorizontalAlign.Center)
      }
      .width('100%')
      .height('100%')
      //.backgroundColor('rgba(255,255,255,0.9)')
    }
    .width('100%')
    .height('100%')
  }
}

运行结果：