HarmonyOS引导页登陆页以及tabbar的代码说明登陆页2-Toy模板网

这篇具有很好参考价值的文章主要介绍了HarmonyOS引导页登陆页以及tabbar的代码说明登陆页2。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

鸿蒙引导页,鸿蒙开发,HarmonyOS,ArkTS
代码：这里的prompt.showToast是弹出提示，@Extend(TextInput) 的功能是对TextInput做了公用的样式。isShowProgress是用来控制isShowProgress，出来一个等待效果
`

import prompt from ‘@ohos.promptAction’;
import router from ‘@ohos.router’;
import CommonConstants from ‘…/common/constants/CommonConstants’;
/**

样式TextInput
/
@Extend(TextInput)
function inputStyle() {
.placeholderColor( $r('app.color.placeholder_color')) .height($ r(‘app.float.login_input_height’))
.fontSize( $r('app.float.big_text_size')) .backgroundColor($ r(‘app.color.background’))
.width(CommonConstants.FULL_PARENT)
.padding({ left: CommonConstants.INPUT_PADDING_LEFT })
.margin({ top: $r(‘app.float.input_margin_top’) })
}
/*
样式
*/
@Extend(Line)
function lineStyle() {
.width(CommonConstants.FULL_PARENT)
.height( $r('app.float.line_height')) .backgroundColor($ r(‘app.color.line_color’))
}

@Extend(Text)
function blueTextStyle() {
.fontColor( $r('app.color.login_blue_text_color')) .fontSize($ r(‘app.float.small_text_size’))
.fontWeight(FontWeight.Medium)
}

/**

登陆界面
*/
@Entry
@Component
struct LoginPage {
@State account: string = ‘’;
@State password: string = ‘’;
@State isShowProgress: boolean = false;
private timeOutId: number = -1;

@Builder
imageButton(src: Resource) {
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image(src)
}
.height( $r('app.float.other_login_image_size')) .width($ r(‘app.float.other_login_image_size’))
.backgroundColor($r(‘app.color.background’))
}

login(): void {
if (this.account === ‘’ || this.password === ‘’) {
prompt.showToast({
message: ‘输入帐号密码不能为空’
})
} else {
this.isShowProgress = true;
if (this.timeOutId === -1) {
this.timeOutId = setTimeout(() => {
this.isShowProgress = false;
this.timeOutId = -1;
router.pushUrl({ url: ‘pages/MainPage’ });
}, CommonConstants.LOGIN_DELAY_TIME);
}
}
}

aboutToDisappear() {
clearTimeout(this.timeOutId);
this.timeOutId = -1;
}

build() {
Column() {
Image( $r (^{'} a pp . m e d ia . im g^{'})) . w i d t h ($ r(‘app.float.logo_image_size’))
.height($r(‘app.float.logo_image_size’))
.margin({ top: $r(‘app.float.logo_margin_top’), bottom: $KaTeX parse error: Expected 'EOF', got '}' at position 35: \dotsargin_bottom') }̲) Text($ r(‘app.string.login_page’))
.fontSize( $r('app.float.page_title_text_size')) .fontWeight(FontWeight.Medium) .fontColor($ r(‘app.color.title_text_color’))
Text( $r('app.string.login_more')) .fontSize($ r(‘app.float.normal_text_size’))
.fontColor($r(‘app.color.login_more_text_color’))
.margin({ bottom: $r(‘app.float.login_more_margin_bottom’), top: $r(‘app.float.login_more_margin_top’) })

  TextInput({ placeholder: $r('app.string.account') })
    .maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH)
    .type(InputType.Number)
    .inputStyle()
    .onChange((value: string) => {
      this.account = value;
    })
  Line().lineStyle()

  TextInput({ placeholder: $r('app.string.password') })
    .maxLength(CommonConstants.INPUT_PASSWORD_LENGTH)
    .type(InputType.Password)
    .inputStyle()
    .onChange((value: string) => {
      this.password = value;
    })
  Line().lineStyle()

  Row() {
    Text($r('app.string.message_login')).blueTextStyle()
    Text($r('app.string.forgot_password')).blueTextStyle()
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .width(CommonConstants.FULL_PARENT)
  .margin({ top: $r('app.float.forgot_margin_top') })

  Button($r('app.string.login'), { type: ButtonType.Capsule })
    .width(CommonConstants.BUTTON_WIDTH)
    .height($r('app.float.login_button_height'))
    .fontSize($r('app.float.normal_text_size'))
    .fontWeight(FontWeight.Medium)
    .backgroundColor($r('app.color.login_button_color'))
    .margin({ top: $r('app.float.login_button_margin_top'), bottom: $r('app.float.login_button_margin_bottom') })
    .onClick(() => {
      this.login();
    })
  Text($r('app.string.register_account'))
    .fontColor($r('app.color.login_blue_text_color'))
    .fontSize($r('app.float.normal_text_size'))
    .fontWeight(FontWeight.Medium)

  if (this.isShowProgress) {
    LoadingProgress()
      .color($r('app.color.loading_color'))
      .width($r('app.float.login_progress_size'))
      .height($r('app.float.login_progress_size'))
      .margin({ top: $r('app.float.login_progress_margin_top') })
  }

  Blank()
  Text($r('app.string.other_login_method'))
    .fontColor($r('app.color.other_login_text_color'))
    .fontSize($r('app.float.little_text_size'))
    .fontWeight(FontWeight.Medium)
    .margin({ top: $r('app.float.other_login_margin_top'), bottom: $r('app.float.other_login_margin_bottom') })
  Row({ space: CommonConstants.LOGIN_METHODS_SPACE }) {
    this.imageButton($r('app.media.login_method1'))
    this.imageButton($r('app.media.login_method2'))
    this.imageButton($r('app.media.login_method3'))
  }
}
.backgroundColor($r('app.color.background'))
.height(CommonConstants.FULL_PARENT)
.width(CommonConstants.FULL_PARENT)
.padding({
  left: $r('app.float.page_padding_hor'),
  right: $r('app.float.page_padding_hor'),
  bottom: $r('app.float.login_page_padding_bottom')
})

}
}`文章来源地址https://www.toymoban.com/news/detail-774209.html

到了这里，关于HarmonyOS引导页登陆页以及tabbar的代码说明登陆页2的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！