推荐订阅源

先做一个登录界面：

@Entry
@Component
struct login2 {
  // 定义输入框状态变量
  @State username: string = ''
  @State password: string = ''
  @State showPassword: boolean = false

  build() {
    Column() {
      // 应用图标
      Image($r('app.media.app_logo')) // 请在资源文件中添加对应图标
        .width(80)
        .height(80)
        .margin({ top: 80, bottom: 20 })

      // 标题
      Text('标题2364')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 6 })

      // 副标题
      Text('login.subtitle')
        .fontSize(14)
        .fontColor('#666666')
        .margin({ bottom: 40 })

      // 用户名输入框
      TextInput({ placeholder: '请输入22' })
        .width('80%')
        .height(50)
        .borderRadius(25)
        .backgroundColor('#F5F5F5')
        .padding({ left: 20 })
        .margin({ bottom: 15 })
        .onChange(value => this.username = value)

      // 密码输入框
      TextInput({ placeholder: $r('app.string.password_hint') })
        .type(InputType.Password)
        .width('80%')
        .height(50)
        .borderRadius(25)
        .backgroundColor('#F5F5F5')
        .padding({ left: 20 })
        .margin({ bottom: 10 })
        .onChange(value => this.password = value)

      // 短信登录和忘记密码
      Row() {
        Text('sms.login')
          .fontSize(14)
          .fontColor('#1677FF')
          .margin({ left: '10%' })

        Text('忘记密码')
          .fontSize(14)
          .fontColor('#1677FF')
          .margin({ right: '10%' })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .margin({ bottom: 30 })

      // 登录按钮
      Button('登录')
        .width('80%')
        .height(50)
        .fontSize(16)
        .backgroundColor('#1677FF')
        .borderRadius(25)
        .margin({ bottom: 15 })
        .onClick(() => {
          // 登录逻辑处理
          this.handleLogin()
        })

      // 注册链接
      Text('注册')
        .fontSize(14)
        .fontColor('#1677FF')
        .onClick(() => {
          // 跳转到注册页面
        })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }

  // 登录处理方法
  private handleLogin() {
    // 实现登录逻辑
    if (!this.username) {
      // 提示用户名不能为空
      return
    }
    if (!this.password) {
      // 提示密码不能为空
      return
    }
    // 调用登录接口...
  }
}