【“蒙”友会“稿”起来】HarmonyOS 3.1握手Serverless - UI篇_width($r('app.float.iconsize')

 前言：

        此帖主要讲解界面开发，有了此UI界面，之后的结合Serverless认证服务、云函数、云数据库、云存储帖子就有面子了^_^ 打算这系列结合Serverless不用端云一体化项目开发，在AGC开通好相关配置，然后下载相关json文件，复制到项目中使用，跟着开发文档一步步配置，从中学习到更多的知识，当然初学者，可以创建端云一体化项目学习、开发，更容易上手，然后再尝试创建一个空项目或带模板项目，手工配置Serverless相关设置，本UI项目是基于Login Ability模板创建的，添加了邮箱注册和手机注册页面。

效果：

讲解：

      1. 主界面、包含标题导航组件，登录组件，注册组件，客服与隐私声明组件，其实主界面就是一个组合页面，有各组件拼接而成，关键代码以下：

@Entry
@Component
struct LoginPage {
  @Builder NavigationTitle() {
    Row() {
      Text($r('app.string.title'))
        .fontSize($r('app.float.title_text_size'))
        .fontColor($r('app.color.title'))
        .fontWeight(CommonConstants.TITLE_FONT_WEIGHT)
    }
    .alignItems(VerticalAlign.Center)
  }
 
  build() {
    Column() {
      // 标题导航组件
      Navigation()
        .title(this.NavigationTitle())
        .hideToolBar(true)
        .align(Alignment.Start)
        .width(CommonConstants.NAVIGATION_WIDTH_PERCENT)
        .height($r('app.float.navigation_height'))
        .titleMode(NavigationTitleMode.Mini)
 
      Scroll() {
        Column() {
          // 登录组件
          LoginComponent()
          // 占位组件
          Blank()
          // 邮箱和手机注册入口组件
          AuthComponent()
          // 隐私声明和客服组件
          PrivacyStatementComponent()
        }
        .height(CommonConstants.SCROLL_HEIGHT_PERCENT)
        .constraintSize({ minHeight: $r('app.float.scroll_min_height') })
        .alignItems(HorizontalAlign.Start)
      }
      .layoutWeight(CommonConstants.LOGIN_SCROLL_LAYOUT_WEIGHT)
    }
    .width(CommonConstants.LOGIN_PAGE_WIDTH_PERCENT)
    .backgroundColor($r('app.color.login_page_background'))
  }
}复制

      2. 登录组件, 包含文本框组件、分割线组件、按钮组件、Cloumn容器，关键代码以下：

@Component
export struct LoginComponent {
  @State userName: string = '';
  @State password: string = '';
 
  build() {
    Column() {
      // 手机号或邮箱为用户名
      TextInput({ placeholder: $r('app.string.username') })
        .width(CommonConstants.TEXT_INPUT_WIDTH_PERCENT)
        .height($r('app.float.text_input_height'))
        .placeholderColor($r('app.color.text_input_place_holder'))
        .placeholderFont({ size: $r('app.float.text_input_font_size') })
        .backgroundColor($r('app.color.login_input_text_background'))
        .fontSize($r('app.float.text_input_font_size'))
        .padding({ left: $r('app.float.username_padding_left') })
        .onChange((value: string) => {
          this.userName = value;
        })
      // 分割线
      Divider()
        .width(CommonConstants.DIVIDER_WIDTH_PERCENT)
        .height($r('app.float.divider_height'))
        .color($r('app.color.divider'))
        .alignSelf(ItemAlign.Center)
      // 密码框
      TextInput({ placeholder: $r('app.string.password') })
        .width(CommonConstants.TEXT_INPUT_WIDTH_PERCENT)
        .height($r('app.float.text_input_height'))
        .placeholderColor($r('app.color.text_input_place_holder'))
        .placeholderFont({ size: $r('app.float.text_input_font_size') })
        .fontSize($r('app.float.text_input_font_size'))
        .backgroundColor($r('app.color.login_input_text_background'))
        .type(InputType.Password)
        .padding({ left: $r('app.float.password_padding_left') })
        .onChange((value: string) => {
          this.password = value;
        })
      // 分割线
      Divider()
        .width(CommonConstants.DIVIDER_WIDTH_PERCENT)
        .height($r('app.float.divider_height'))
        .color($r('app.color.divider'))
        .alignSelf(ItemAlign.Center)
      // 登录按钮
      Button($r('app.string.login'))
        .width(CommonConstants.BUTTON_WIDTH_PERCENT)
        .height($r('app.float.login_btn_height'))
        .margin({ top: $r('app.float.login_btn_margin_top') })
        .borderRadius($r('app.float.login_btn_border_radius'))
        .fontSize($r('app.float.text_input_font_size'))
        .fontWeight(CommonConstants.LOGIN_TEXT_FONT_WEIGHT)
        .enabled(isLoginButtonClickable(this.userName, this.password))
        .fontColor(isLoginButtonClickable(this.userName, this.password)
          ? Color.White
          : $r('app.color.login_font_normal'))
        .backgroundColor(isLoginButtonClickable(this.userName, this.password)
          ? $r('app.color.login_btn_enabled')
          : $r('app.color.login_btn_normal'))
        .onClick(() => {
          router.pushUrl({
            url: CommonConstants.MINE_PAGE_URL
          });
        })
    }
    .padding($r('app.float.login_operation_area_padding'))
  }
}复制

      3. 注册组件, 包含Image组件，Row容器组件，关键代码以下：

@Component
export struct AuthComponent {
  build() {
    Row() {
      // 邮箱注册账号入口图标
      Image($r("app.media.ic_mail"))
        .width(CommonConstants.ICON_SIZE)
        .height(CommonConstants.ICON_SIZE)
        .onClick(() => {
          router.pushUrl({
            url: CommonConstants.EMAIL_PAGE_URL
          });
        })
      // 手机注册账号入口图标
      Image($r("app.media.ic_phone"))
        .width(CommonConstants.ICON_SIZE)
        .height(CommonConstants.ICON_SIZE)
        .margin({ left: $r('app.float.icon_space') })
        .onClick(() => {
          router.pushUrl({
            url: CommonConstants.PHONE_PAGE_URL
          });
        })
    }
    .width(CommonConstants.ROW_WIDTH_PERCENT)
    .justifyContent(FlexAlign.Center)
    .margin({bottom: $r('app.float.statement_area_margin_bottom')})
 
  }
}复制

      4. 客服与隐私声明组件，包含Text文本组件、Flex容器组件，关键代码以下：

@Component
export struct PrivacyStatementComponent {
  build() {
    Flex({
      direction: FlexDirection.Row,
      justifyContent: FlexAlign.Center
    }) {
      // 客服入口
      Text($r('app.string.problem_encountered'))
        .fontSize($r('app.float.statement_text_size'))
        .fontColor($r('app.color.problem_encountered_font'))
        .textAlign(TextAlign.Center)
        .onClick(() => {
          router.pushUrl({
            url: CommonConstants.CUSTOMER_SERVICE_PAGE_URL
          });
        })
      // 隐私声明入口
      Text($r('app.string.privacy_statement'))
        .fontSize($r('app.float.statement_text_size'))
        .fontColor($r('app.color.privacy_statement_font'))
        .textAlign(TextAlign.Center)
        .margin({ left: $r('app.float.statement_space') })
        .onClick(() => {
          router.pushUrl({
            url: CommonConstants.PRIVACY_PAGE_URL
          });
        })
    }
    .width(CommonConstants.FLEX_WIDTH_PERCENT)
    .margin({
      bottom: $r('app.float.statement_area_margin_bottom')
    })
  }
}复制

      5. 隐私声明页面，包含导航组件、Image组件、WebView组件，加载本地html文件，关键代码以下：

@Entry
@Component
struct PrivacyPage {
  //Webview控制器
  webController: WebviewController = new webview.WebviewController();
 
  build() {
    Column() {
      // 导航组件
      Navigation()
        .hideToolBar(true)
        .height($r('app.float.title_height'))
        .width(CommonConstants.NAVIGATION_WIDTH_PERCENT)
        .titleMode(NavigationTitleMode.Mini)
      // 图片组件
      Image($r('app.media.ic_public_privacy'))
        .width($r('app.float.icon_length'))
        .height($r('app.float.icon_length'))
        .objectFit(ImageFit.Contain)
        .margin({
          top: $r('app.float.icon_margin_top'),
          bottom: $r('app.float.icon_margin_bottom')
        })
      // Webview组件
      Web({
        src: $rawfile('privacy.html'),
        controller: this.webController
      })
    }
  }
}复制

总结：

       从简单的登录页面布局，学习到了Text组件、TextInput组件、Divider组件、Button组件、Navigation组件、Image组件、Web组件、Flex容器、Row容器、Column容器的使用，只有我们多用组件，它才会为我们的App添加多彩，任何页面都是有组件拼接出来了，当我们学会运用组件，创造组件，页面才更加吸引眼球。有了UI界面，下面集成Serverless的认证服务、云函数、云数据库操作，就更方便了。

进入华为专区，解锁更多内容