鸿蒙任务列表与秒表集合软件开发（六）

个人登录页面部分功能实现解析

  build() {
    Column() {
      // 登录文本
      Text('登录')
        .fontSize(24)
        .fontWeight(FontWeight.Medium)
        .fontColor(Color.Black)
        .margin({ top: 100 });

      // 登录提示文本
      Text('登录帐号以使用更多服务')
        .fontSize(16)
        .fontColor(Color.Gray)
        .margin({ top: 16, bottom: 30 });

      // 账号输入框
      TextInput({ placeholder: '账号' })
        .maxLength(11)
        .type(InputType.Number)
        .placeholderColor(Color.Gray)
        .height(45)
        .fontSize(18)
        .width('100%')
        .padding({ left: 0 })
        .margin({ top: 12 });

      // 下划线
      Divider()
        .width('100%')
        .height(2)
        .color(Color.Gray);

      // 密码输入框
      TextInput({ placeholder: '密码' })
        .maxLength(8)//设置最大长度
        .type(InputType.Password)//设置输入类型
        .placeholderColor(Color.Gray)//设置占位符颜色
        .height(45)
        .fontSize(18)
        .width('100%')
        .padding({ left: 5 })//设置内边距
        .margin({ top: 12 });//设置外边距

      // 下划线
      Divider()
        .width('100%')
        .height(2)
        .color(Color.Gray);
      // 登录按钮
      Button() {
        Text('登录').fontColor(Color.White)
      }
      .height(50)
      .width(150)
      .margin({ top: 30 })//设置外边距
      .onClick(() => {
        //点击事件
      })
      
      // 注册账号按钮
      Button() {
        Text('注册账号').fontColor('007dfe')
      }
      .height(30)
      .width(150)
      .backgroundColor(Color.White)
      .margin({ top: 5 })//设置外边距
      .onClick(() => {
        //点击事件
      })

    }
    .height('100%')
    .width('100%')
    .padding({ left: 12, right: 12, bottom: 24 });
  }

简单的登录页面组件的定义和构建布局

1. 整体结构：

   • MyPage 组件被标记为 @Entry，可能是整个应用的入口点。
   • @Component 表明这是一个组件，可能是某个 UI 框架的组件声明方式。

2. 界面构建：

   • 使用 build() 方法构建界面，主要通过嵌套调用函数和链式调用来定义组件的属性和样式。

3. Column 和其子组件：

   • Column 可能是一个布局组件，用于垂直排列子组件。
   • Text 用于显示文本，设定了登录标题和提示文本的样式。
   • TextInput 用于输入文本，设定了账号和密码输入框的样式和属性，如类型、占位符、颜色等。
   • Divider 用于绘制分隔线，为输入框下方添加了灰色的横线。

4. Button：

   • Button 组件包裹了两个按钮：登录按钮和注册账号按钮。
   • 每个按钮包含一个 Text 组件用于显示按钮上的文本。
   • 按钮设定了点击事件处理函数 (onClick)、样式 (高度、宽度、颜色、外边距等)。

5. 样式和布局：

   • 整体页面使用 height、width、padding 来定义尺寸和内边距，确保布局的美观和合理。