2023-09-25 harmonyos应用开发学习笔记

.ets文件中使用资源时需要注意：
1、百分比的需要新建一个ets文件，export default class XXX { static FULL_WIDTH = 100% }
这样在页面使用时才会生效
2、颜色color的要在color中定义，不能在float等其它地方定义

示例：

@Extend(TextInput) function inputStyle () {
  .height($r('app.float.input_height')) // 这里的height高度是具体的 45vp
  .fontSize($r('app.float.input_font_size')) // 具体的18fp
  /* color的定义要在src/main/resources/base/element/color.json中定义，
   * 或者在element下新建一个xxx.json文件也可以: { "color"：[{ "name": "xxxx", "value": "xxx" }]}
 */
  .backgroundColor($r('app.color.input_background_color')) 
  .placeholderColor($r('app.color.placeholder_color'))
  .width(LoginConstant.FULL_WIDTH) // 这个width是100%，需要新建一个文件定义静态值
  .padding({ left: $r('app.float.input_padding_left') })
  .margin({ top: $r('app.float.input_margin_top')})
}

TextInput({ placeholder: $r('app.string.account_placeholder')})
        .maxLength(LoginConstant.ACCOUNT_MAX_LENGTH)
        .inputStyle()

src/main/ets/pages/Login.ets

import LoginConstant from '../common/LoginConstant'

@Extend(TextInput) function inputStyle () {
  .height($r('app.float.input_height'))
  .fontSize($r('app.float.input_font_size'))
  .backgroundColor($r('app.color.input_background_color'))
  .placeholderColor($r('app.color.placeholder_color'))
  .width(LoginConstant.FULL_WIDTH)
  .padding({ left: $r('app.float.input_padding_left') })
  .margin({ top: $r('app.float.input_margin_top')})
}
@Extend(Line) function lineStyle () {
  .width(LoginConstant.FULL_WIDTH)
  .height($r('app.float.line_height'))
  .backgroundColor($r('app.color.line_background_color'))
}
@Extend(Text) function blueText () {
  .fontSize($r('app.float.blue_text_font_size'))
  .fontColor($r('app.color.blue_text_color'))
}

@Entry
@Component

struct Login {
  @Builder loginLogo(img) {
    Image(img)
      .width($r('app.float.logo_width'))
      .height($r('app.float.logo_height'))
      .margin({
        top: $r('app.float.logo_margin_top'),
        bottom: $r('app.float.logo_margin_bottom')
      })
  }
  build() {
    Column() {
      this.loginLogo($r('app.media.login_logo2'))
      Text($r('app.string.login_page'))
        .fontSize($r('app.float.page_title_font_size'))
        .fontWeight(FontWeight.Medium)
        .fontColor($r('app.color.title_text_color'))
      Text($r('app.string.login_page_description'))
        .fontColor($r('app.color.description_text_color'))
        .fontSize($r('app.float.description_font_size'))
        .margin({
          bottom: $r('app.float.description_margin_bottom'),
          top: $r('app.float.description_margin_top')
        })
      TextInput({ placeholder: $r('app.string.account_placeholder')})
        .maxLength(LoginConstant.ACCOUNT_MAX_LENGTH)
        .inputStyle()
      Line().lineStyle()
      TextInput({ placeholder: $r('app.string.password_placeholder')})
        .type(InputType.Password)
        .maxLength(LoginConstant.PASSWORD_MAX_LENGTH)
        .inputStyle()
      Line().lineStyle()
      Row() {
        Text($r('app.string.sms_verification'))
          .blueText()
        Text($r('app.string.forget_password'))
          .blueText()
      }.justifyContent(FlexAlign.SpaceBetween)
      .width(LoginConstant.FULL_WIDTH)
      .margin({ top: $r('app.float.common_margin_top')})
      Button($r('app.string.login_button_text'))
        .width(LoginConstant.LOGIN_BUTTON_WIDTH)
        .margin({ top: $r('app.float.login_button_margin_top') })
      Text($r('app.string.register'))
        .margin({ top: $r('app.float.register_text_margin_top') })
        .fontColor($r('app.color.blue_text_color'))
      Text($r('app.string.other_login_methods'))
        .fontSize($r('app.float.other_method_font_size'))
        .margin({ top: $r('app.float.other_method_margin_top') })
        .fontColor($r('app.color.other_method_text_color'))
      Row() {
        Image($r('app.media.wechat'))
          .width(LoginConstant.OTHER_LOGIN_LOGO_WIDTH)
          .height(LoginConstant.OTHER_LOGIN_LOGO_HEIGHT)
          .margin({ right: $r('app.float.other_method_item_margin_right') })
        Image($r('app.media.qq'))
          .width(LoginConstant.OTHER_LOGIN_LOGO_WIDTH)
          .height(LoginConstant.OTHER_LOGIN_LOGO_HEIGHT)
          .margin({ right: $r('app.float.other_method_item_margin_right') })
        Image($r('app.media.huawei'))
          .width(LoginConstant.OTHER_LOGIN_LOGO_WIDTH)
          .height(LoginConstant.OTHER_LOGIN_LOGO_HEIGHT)
      }
      .margin({ top: $r('app.float.common_margin_top')})
    }
    .backgroundColor($r('app.color.row_background_color'))
    .height(LoginConstant.FULL_HEIGHT)
    .width(LoginConstant.FULL_WIDTH)
    .padding({
      left: $r('app.float.column_padding_left'),
      right: $r('app.float.column_padding_right'),
      bottom: $r('app.float.column_padding_bottom')
    })
  }
}

src/main/ets/common/LoginConstant.ets

export default class LoginConstant {
  // 其它登录方式logo宽度
  static OTHER_LOGIN_LOGO_WIDTH: string = '35vp'

  // 其它登录方式logo高度
  static OTHER_LOGIN_LOGO_HEIGHT: string = '35vp'

  // 全宽度
  static FULL_WIDTH = '100%'

  // 全高度
  static FULL_HEIGHT = '100%'

  // 登录按钮宽度
  static LOGIN_BUTTON_WIDTH = '90%'

  // 帐号最大输入长度
  static ACCOUNT_MAX_LENGTH = 11

  // 密码最大输入长度
  static PASSWORD_MAX_LENGTH = 18
}

src/main/resources/base/element/login_color.json

{
  "color": [
    {
      "name": "input_background_color",
      "value": "#F1F3F5"
    },
    {
      "name": "line_background_color",
      "value": "#33182431"
    },
    {
      "name": "title_text_color",
      "value": "#182431"
    },
    {
      "name": "description_text_color",
      "value": "#99182431"
    },
    {
      "name": "blue_text_color",
      "value": "#007dff"
    },
    {
      "name": "placeholder_color",
      "value": "#99182431"
    },
    {
      "name": "other_method_text_color",
      "value": "#ff8f8f8f"
    },
    {
      "name": "row_background_color",
      "value": "#f1f3f5"
    }
  ]
}

src/main/resources/base/element/login_float.json

{
  "float": [
    {
      "name": "input_height",
      "value": "45vp"
    },
    {
      "name": "input_font_size",
      "value": "18fp"
    },
    {
      "name": "input_padding_left",
      "value": "5vp"
    },
    {
      "name": "input_margin_top",
      "value": "12vp"
    },
    {
      "name": "line_height",
      "value": "1vp"
    },
    {
      "name": "logo_width",
      "value": "78vp"
    },
    {
      "name": "logo_height",
      "value": "78vp"
    },
    {
      "name": "logo_margin_top",
      "value": "100vp"
    },
    {
      "name": "logo_margin_bottom",
      "value": "8vp"
    },
    {
      "name": "page_title_font_size",
      "value": "24fp"
    },
    {
      "name": "description_font_size",
      "value": "16fp"
    },
    {
      "name": "description_margin_top",
      "value": "8vp"
    },
    {
      "name": "description_margin_bottom",
      "value": "30vp"
    },
    {
      "name": "blue_text_font_size",
      "value": "14fp"
    },
    {
      "name": "common_margin_top",
      "value": "12vp"
    },
    {
      "name": "login_button_margin_top",
      "value": "80vp"
    },
    {
      "name": "register_text_margin_top",
      "value": "12vp"
    },
    {
      "name": "other_method_font_size",
      "value": "14fp"
    },
    {
      "name": "other_method_margin_top",
      "value": "130vp"
    },
    {
      "name": "other_method_item_margin_right",
      "value": "42vp"
    },
    {
      "name": "column_padding_left",
      "value": "12vp"
    },
    {
      "name": "column_padding_right",
      "value": "12vp"
    },
    {
      "name": "column_padding_bottom",
      "value": "24vp"
    }
  ]
}

resources的文件 为了区分一下，都新建了一个json文件去管理

image.png

只是简单的记录一下