【综合案例】使用DevEco Studio编写京东登录界面

效果展示

模块拆分

1. 布局容器 + 顶部 + Logo
2. 输入框+登录区域
3. 底部模块区域

知识点

1. 复选框 Checkbox
2. 一段文本多个样式：Text 包裹 Span
3. Row 或 Column 空白区域填充：Blank
4. 线性渐变背景：

   .linearGradient({
         angle: 135, // 设置颜色渐变起始角度为顺时针方向45°
         colors: [
           [0xceeff2, 0.0],
           [0xf2e0de, 0.4],
           [0xFFFFFF, 0.8],
         ]
       })

代码展示

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      // 顶部区域
      Row() {
        Image($r("app.media.close"))
          .width(20)
          .fillColor("#999")
        Text("帮助")
          .fontWeight(600)
          .fontColor("#999")
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)

      //logo部分
      Image($r("app.media.jd_logo"))
        .fillColor("#fff")
        .width(250)
        .height(250)
      // 国家/地址部分
      Row() {
        Text('国家/地址')
          .fontColor("#666")
          .layoutWeight(1)
        Text("中国(+86)")
          .fontColor("#666")
          .layoutWeight(1)
          .textAlign(TextAlign.End)
        Image($r("app.media.right"))
          .width(20)
          .fillColor("#999")
      }
      .margin({
        bottom: 20
      })
      .width('100%')
      .height(40)
      .width("100%")
      .padding({
        left: 15,
        right: 10
      })
      .backgroundColor("#fff")
      .borderRadius(20)

      // 文本框部分
      TextInput({ placeholder: "请输入手机号" })
        .height(40)
        .borderRadius(20)
        .placeholderColor("#666")
        .backgroundColor("#fff")
      // 协议部分
      Row() {
        Checkbox()
          .width(10)
          .margin({ top: 7 })
        // 如果一段文本中，有样式需要单独设置，可以使用text包裹span
        Text() {
          Span("我已阅读并同意")
          Span("《京东隐私政策》")
            .fontColor("#4E81E9")
          Span("《京东用户服务协议》")
            .fontColor("#4E81E9")
          Span("未注册的手机号将自动创建京东账号")
        }
        .fontSize(12)
        .lineHeight(20)
        .fontColor("#666")
      }
      .alignItems(VerticalAlign.Top)
      .margin({
        top: 20,
        bottom: 25
      })
      .width("100%")

      // 登录部分
      Button("登录")
        .width("100%")
        .backgroundColor("#C02838")
      Row({ space: 25 }) {
        Text("新用户注册")
          .fontSize(13)
          .fontColor("#666")
        Text("账号密码登录")
          .fontSize(13)
          .fontColor("#666")
        Text("无法登录")
          .fontSize(13)
          .fontColor("#666")
      }
      .margin({
        top: 15
      })

      // 填充组件作用：填充空白区域【自适应】
      Blank()
      // 其他登录方式
      Column() {
        Text("其他登录方式")
          .height(22)
          .fontSize("14")
          .fontColor("#666")
          .margin({
            bottom: 20
          })
        Row() {
          Image($r("app.media.jd_huawei"))
            .width(35)
          Image($r("app.media.jd_wechat"))
            .width(35)
            .fillColor("#56a44a")
          Image($r("app.media.jd_weibo"))
            .width(35)
            .fillColor("#C02838")
          Image($r("app.media.jd_QQ"))
            .width(35)
            .fillColor("#1296db")
        }
        .margin({
          bottom: 30
        })
        .width("100%")
        .justifyContent(FlexAlign.SpaceAround)
      }
    }
    .padding(20)
    .width("100%")
    .height("100%")
    .linearGradient({
      angle: 135, // 设置颜色渐变起始角度为顺时针方向45°
      colors: [
        [0xceeff2, 0.0],
        [0xf2e0de, 0.4],
        [0xFFFFFF, 0.8],
      ]
    })
  }
}