HarmonyOS6 - 鸿蒙电商页面实战案例

小学生波波2026-01-21 9:18

HarmonyOS6 - 鸿蒙电商页面实战案例

开发环境为：

开发工具：DevEco Studio 6.0.1 Release

API版本是：API21

本文所有代码都已使用模拟器测试成功！

1、需求分析

一共三个页面，如下：

  1. 登录页面
  2. 登录首页
  3. 个人中心

页面效果如下：

2、步骤分析

  1. 编写登录页面
  2. 编写登录成功首页
  3. 编写个人中心页面
  4. 常量抽取
  5. 调试优化

3、资源准备

首先需要准备如下资源文件：

以上图片文件放入如下目录中：

4、登录页面

编写登录页面代码，如下：

js 复制代码 
import CommonConstants from './CommonConstants'
import prompt from '@ohos.promptAction'
import router from '@ohos.router'
/**
 * 登录页面
 */

@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') })
}

// Line组件的自定义样式扩展
@Extend(Line) function lineStyle() {
  .width(CommonConstants.FULL_PARENT) // 宽度为父组件的100%
  .height($r('app.float.line_height')) // 高度
  .backgroundColor($r('app.color.line_color')) // 背景颜色
}

// Text组件的蓝色文本样式
@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 Login {
  @State
  account: string = '' // 登录的账号

  @State
  password: string = '' // 登录的密码

  @State
  isShowProgress: boolean = false // 控制是否显示 进度条
  private timeOutId: number = -1 //  控制登录超时时间的变量

  login(): void {
    if (this.account === '' || this.password === '') {
      prompt.showToast({ // 开启一个确认的弹层
        message: $r('app.string.input_empty_tips')
      })
    } else {
      this.isShowProgress = true

      if (this.timeOutId === -1) {
        // 设置一个定时器，定时两秒
        this.timeOutId = setTimeout(() => {
          // 2秒之后执行的函数
          this.isShowProgress = false
          this.timeOutId = -1
          // 页面跳转
          router.replaceUrl({
            url: "pages/Index",
            params: {
              sendMsg: this.account
            }
          }) // 目标页面会替换当前页，并销毁当前页。
        }, CommonConstants.LOGIN_DELAY_TIME)
      }
    }
  }

  aboutToDisappear() {
    // 取消定时器
    clearTimeout(this.timeOutId)
    this.timeOutId = -1
  }

  @Builder
  imageButton(image: Resource) {
    // 构建按钮图片： 本质上，就是在按钮里面增加一个Image组件。
    Button({ type: ButtonType.Circle, stateEffect: true }) { // 圆形的按钮， 并且，按钮按下去开启切换效果
      Image(image)
    }
    .height($r('app.float.other_login_image_size')) // 图片按钮高度
    .width($r('app.float.other_login_image_size')) // 图片按钮宽度
    .backgroundColor($r('app.color.background')) // 背景颜色

  }

  build() {
    Column() { // 登录页面的布局
      Image($r('app.media.logo')) // Logo图片
        .width($r('app.float.logo_image_size'))
        .height($r('app.float.logo_image_size'))
        .margin({
          top: $r('app.float.logo_margin_top'),
          bottom: $r('app.float.logo_margin_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
      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') })
        .inputStyle()
        .maxLength(CommonConstants.INPUT_ACCOUNT_LENGTH)
        .type(InputType.Number)
        .onChange((value: string) => {
          this.account = value
        })

      Line().lineStyle() // 账号输入框下面的一条线

      // 密码输入框
      TextInput({ placeholder: $r('app.string.password') })
        .inputStyle()
        .maxLength(CommonConstants.INPUT_PASSWORD_LENGTH)
        .type(InputType.Password)
        .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')) // 登录方式1
        this.imageButton($r('app.media.login_method2')) // 登录方式2
        this.imageButton($r('app.media.login_method3')) // 登录方式3
      }
    }
    .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')
    })
  }
}

常量类CommonConstants文件代码如下：

js 复制代码 
/**
 * 所有功能的通用常量。
 */
export default class CommonConstants {
  /**
   * 账号的输入长度。
   */
  static readonly INPUT_ACCOUNT_LENGTH = 11;

  /**
   * 密码的输入长度。
   */
  static readonly INPUT_PASSWORD_LENGTH = 8;

  /**
   * 输入框的左填充。
   */
  static readonly INPUT_PADDING_LEFT = 0;

  /**
   * 模拟登录的延迟时间。
   */
  static readonly LOGIN_DELAY_TIME = 2000;

  /**
   * 组件的通用间距。
   */
  static readonly COMMON_SPACE = 12;

  /**
   * 首页的标题文本。
   */
  static readonly HOME_TITLE = '首页';

  /**
   * 设置页面的标题文本。
   */
  static readonly MINE_TITLE = '我的';

  /**
   * 其他登录方法的间距。
   */
  static readonly LOGIN_METHODS_SPACE = 44;

  /**
   * 组件的宽度或高度覆盖父组件。
   */
  static readonly FULL_PARENT = '100%';

  /**
   * 按钮的宽度。
   */
  static readonly BUTTON_WIDTH = '90%';

  /**
   * 设置列表的宽度。
   */
  static readonly SET_LIST_WIDTH = '42%';

  /**
   * 首页标签索引。
   */
  static readonly HOME_TAB_INDEX = 0;

  /**
   * 我的设置也没标签索引。
   */
  static readonly MINE_TAB_INDEX = 1;
}

5、登录首页

登录成功后调转到【Index.ets】页面，代码如下：

js 复制代码 
/**
 * APP登录成功首页
 */
import CommonConstants from './CommonConstants'
import Home from './Home'
import MySetting from './MySetting'
import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State
  currentIndex: number = CommonConstants.HOME_TAB_INDEX // 当前默认的页签索引为：首页的索引
  private tabsController: TabsController = new TabsController()

  @State
  account: number = 111
  onPageShow() { // 接受路由参数
    let acc = router.getParams() as Record<string, number>
    if (acc) {
      this.account = acc['sendMsg']
    }
  }

  @Builder
  TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex == index ? selectedImg : normalImg)
        .width($r('app.float.mainPage_baseTab_size'))
        .height($r('app.float.mainPage_baseTab_size'))
      Text(title)
        .margin({ top: $r('app.float.mainPage_baseTab_top') })
        .fontSize($r('app.float.main_tab_fontSize'))
        .fontColor(this.currentIndex === index ? $r('app.color.mainPage_selected') : $r('app.color.mainPage_normal'))
    }
    .justifyContent(FlexAlign.Center)
    .height($r('app.float.mainPage_barHeight'))
    .width(CommonConstants.FULL_PARENT)
    .onClick(() => {
      this.currentIndex = index
      this.tabsController.changeIndex(this.currentIndex) // 修改页签的索引，从而造成页面的切换
    })
  }

  build() {

    Tabs({
      barPosition: BarPosition.End, // 底部展示
      controller: this.tabsController // 页签容器的控制器
    }) { // 标签容器

      // 第一个页签： 首页
      TabContent() {
        Home()
      }
      .padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') })
      .backgroundColor($r('app.color.mainPage_backgroundColor'))
      .tabBar(this.TabBuilder(CommonConstants.HOME_TITLE, CommonConstants.HOME_TAB_INDEX,
        $r('app.media.home_selected'), $r('app.media.home_normal')))

      // 第二个页签： 我的设置页面
      TabContent() {
        MySetting({account: this.account})
      }
      .padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') })
      .backgroundColor($r('app.color.mainPage_backgroundColor'))
      .tabBar(this.TabBuilder(CommonConstants.MINE_TITLE, CommonConstants.MINE_TAB_INDEX,
        $r('app.media.mine_selected'), $r('app.media.mine_normal')))
    }
    .width(CommonConstants.FULL_PARENT)
    .backgroundColor(Color.White)
    .barHeight($r('app.float.mainPage_barHeight'))
    .barMode(BarMode.Fixed)
  }
}

【Index.ets】页面只做布局，首页内容是在【Home.ets】页面，代码如下：

js 复制代码 
/**
 * 首页
 */
import CommonConstants from './CommonConstants'
import ItemData from './ItemData'
import DataModel from './DataModel'

// @Entry
@Component
export default struct Home {

  // 轮播控制器的实例
  private swiperController: SwiperController = new SwiperController()
  
  build() {
    Scroll(){
      Column({space: CommonConstants.COMMON_SPACE}){
        // 第一部分： 标题
        Column() { // 创建一个子列布局
          Text($r('app.string.mainPage_tabTitles_home')) // 显示"首页"的文本 标题
            .fontWeight(FontWeight.Medium) // 设置文本字重为中等
            .fontSize($r('app.float.page_title_text_size')) // 设置文本字号
            .margin({ top: $r('app.float.mainPage_tabTitles_margin') }) // 设置文本上边距
            .padding({ left: $r('app.float.mainPage_tabTitles_padding') }) // 设置文本左边距
        }
        .width(CommonConstants.FULL_PARENT) // 设置列宽度为父容器的100%
        .alignItems(HorizontalAlign.Start) // 子元素的水平对齐方式为开始
        
        
        // 第二部分： 轮播图片
        Swiper(this.swiperController) {
          ForEach(DataModel.getSwiperImages(), (item: Resource) => {
            // 构建每一张图片组件
            Image(item)
              .borderRadius($r('app.float.home_swiper_borderRadius'))
          })
        }
        .autoPlay(true)  // 轮播组件自动播放
        .margin({top: $r('app.float.home_swiper_margin')})

        // 第三部分： 菜单列表
        Grid() { // 网格布局
          ForEach(DataModel.getFirstGridData(), (item: ItemData) => {
            GridItem() {
              Column() {
                Image(item.img)
                  .width($r('app.float.home_homeCell_size')) // 设置图片宽度
                  .height($r('app.float.home_homeCell_size')) // 设置图片高度
                Text(item.title)
                  .fontSize($r('app.float.little_text_size')) // 设置文本字号
                  .margin({ top: $r('app.float.home_homeCell_margin') }) // 设置文本上边距
              }
            }
          })
        }
        .columnsTemplate('1fr 1fr 1fr 1fr') // 设置网格的列模板，每列平分空间
        .rowsTemplate('1fr 1fr') // 设置网格的行模板，每行平分空间
        .columnsGap($r('app.float.home_grid_columnsGap')) // 设置列之间的间隔
        .rowsGap($r('app.float.home_grid_rowGap')) // 设置行之间的间隔
        .padding({ top: $r('app.float.home_grid_padding'), bottom: $r('app.float.home_grid_padding') }) // 设置网格内边距
        .height($r('app.float.home_grid_height')) // 设置网格高度
        .backgroundColor(Color.White) // 设置网格背景色为白色
        .borderRadius($r('app.float.home_grid_borderRadius')) // 设置网格边角半径

        // 第四部分： 频道列表
        Text($r('app.string.home_list')) // 显示"列表"的文本
          .fontSize($r('app.float.normal_text_size')) // 设置文本字号
          .fontWeight(FontWeight.Medium) // 设置文本字重
          .width(CommonConstants.FULL_PARENT) // 设置文本宽度为父容器的100%
          .margin({ top: $r('app.float.home_text_margin') }) // 设置文本上边距


        Grid() {
          ForEach(DataModel.getSecondGridData(), (item: ItemData) => {
            GridItem() {
              Column(){
                Text(item.title)
                  .fontSize($r('app.float.normal_text_size')) // 设置文本字号
                  .fontWeight(FontWeight.Medium) // 设置文本字重
                Text(item.others)
                  .margin({ top: $r('app.float.home_list_margin') }) // 设置文本上边距
                  .fontSize($r('app.float.little_text_size')) // 设置文本字号
                  .fontColor($r('app.color.home_grid_fontColor')) // 设置文本颜色
              }
              .alignItems(HorizontalAlign.Start)  // 两个文本框，在水平方向居左对齐
            }
            .padding({ top: $r('app.float.home_list_padding'), left: $r('app.float.home_list_padding') }) // 设置网格项内边距
            .borderRadius($r('app.float.home_backgroundImage_borderRadius')) // 设置网格项边角半径
            .align(Alignment.TopStart) // 设置网格项对齐方式为顶部开始
            .backgroundImage(item.img) // 设置网格项背景图像
            .backgroundImageSize(ImageSize.Cover) // 设置背景图像尺寸模式为覆盖
            .width(CommonConstants.FULL_PARENT) // 设置网格项宽度为父容器的100%
            .height(CommonConstants.FULL_PARENT) // 设置网格项高度为父容器的100%
          })
        }
        .width(CommonConstants.FULL_PARENT) // 设置网格宽度为父容器的100%
        .height($r('app.float.home_secondGrid_height')) // 设置网格高度
        .columnsTemplate('1fr 1fr') // 设置网格的列模板，每列平分空间
        .rowsTemplate('1fr 1fr') // 设置网格的行模板，每行平分空间
        .columnsGap($r('app.float.home_grid_columnsGap')) // 设置列之间的间隔
        .rowsGap($r('app.float.home_grid_rowGap')) // 设置行之间的间隔
        .margin({ bottom: $r('app.float.setting_button_bottom') }) // 设置网格底部外边距
      }
    }
    .height(CommonConstants.FULL_PARENT)
  }
}

【ItemData.ets】代码如下：

js 复制代码 
export default class ItemData{

  /**
   * 列表项的文本。
   */
  title: Resource;
  /**
   * 列表项的图片。
   */
  img: Resource;
  /**
   * 列表项的其他资源。
   */
  others?: Resource;

  constructor(title: Resource, img: Resource, others?: Resource) {
    this.title = title;
    this.img = img;
    this.others = others;
  }
}

【DataModel.ets】代码如下：

js 复制代码 
import ItemData from './ItemData'

export class DataModel{

  /**
   * 获取轮播图的图片数据。
   *
   * @return {Array<Resource>} 返回轮播图图片数组。
   */
  getSwiperImages(): Array<Resource> {
    let swiperImages: Resource[] = [
    $r('app.media.fig1'),
    $r('app.media.fig2'),
    $r('app.media.fig3'),
    $r('app.media.fig4')
    ];
    return swiperImages;
  }


  /**
   * 第三部分的数据： 菜单列表数据
   * @returns
   */
  getFirstGridData(): Array<ItemData> {
    let firstGridData: ItemData[] = [
      new ItemData($r('app.string.my_love'), $r('app.media.love')),
      new ItemData($r('app.string.history_record'), $r('app.media.record')),
      new ItemData($r('app.string.message'), $r('app.media.message')),
      new ItemData($r('app.string.shopping_cart'), $r('app.media.shopping')),
      new ItemData($r('app.string.my_goal'), $r('app.media.target')),
      new ItemData($r('app.string.group'), $r('app.media.circle')),
      new ItemData($r('app.string.favorites'), $r('app.media.favorite')),
      new ItemData($r('app.string.recycle_bin'), $r('app.media.recycle'))
    ];
    return firstGridData;
  }

  /**
   * 第四部分的数据： 频道列表数据
   * @returns
   */
  getSecondGridData(): Array<ItemData> {
    let secondGridData: ItemData[] = [
      new ItemData($r('app.string.mainPage_top'), $r('app.media.top'), $r('app.string.mainPage_text_top')),
      new ItemData($r('app.string.mainPage_new'), $r('app.media.new'), $r('app.string.mainPage_text_new')),
      new ItemData($r('app.string.mainPage_brand'), $r('app.media.brand'), $r('app.string.mainPage_text_brand')),
      new ItemData($r('app.string.mainPage_found'), $r('app.media.found'), $r('app.string.mainPage_text_found'))
    ];
    return secondGridData;
  }

  /**
   * 获取设置列表的数据。
   *
   * @return {Array<PageResource>} 返回设置列表数据数组。
   */
  getSettingListData(): Array<ItemData> {
    let settingListData: ItemData[] = [
      new ItemData($r('app.string.setting_list_news'), $r('app.media.news'), $r("app.string.setting_toggle")),
      new ItemData($r('app.string.setting_list_data'), $r('app.media.data')),
      new ItemData($r('app.string.setting_list_menu'), $r('app.media.menu')),
      new ItemData($r('app.string.setting_list_about'), $r('app.media.about')),
      new ItemData($r('app.string.setting_list_storage'), $r('app.media.storage')),
      new ItemData($r('app.string.setting_list_privacy'), $r('app.media.privacy'))
    ];
    return settingListData;
  }

}

// 导入
export default new DataModel()

6、个人中心

【MySetting.ets】页面属于个人中心页面，代码如下：

js 复制代码 
/**
 * 我的设置页面
 */
import CommonConstants from './CommonConstants'
import ItemData from './ItemData'
import DataModel from './DataModel'
import router from '@ohos.router';

// @Entry
@Component
export default  struct MySetting {


  private account: number;


  // 构建设置单元格的函数，接收一个ItemData类型的item作为参数
  @Builder
  settingCell(item: ItemData) {
    Row() { // 创建一个行布局
      Row({ space: CommonConstants.COMMON_SPACE }) { // 创建一个有间隔的内嵌行布局
        Image(item.img) // 显示图像
          .width($r('app.float.setting_size')) // 设置图像的宽度
          .height($r('app.float.setting_size')) // 设置图像的高度
        Text(item.title) // 显示文本
          .fontSize($r('app.float.normal_text_size')) // 设置文本的字号
      }

      // 如果item的others属性为空，则显示一个图像，否则显示一个开关组件
      if (item.others == null) {
        Image($r('app.media.right_grey')) // 显示一个灰色的箭头图像
          .width($r('app.float.setting_jump_width')) // 设置图像宽度
          .height($r('app.float.setting_jump_height')) // 设置图像高度
      } else {
        Toggle({ type: ToggleType.Switch, isOn: false }) // 显示一个开关组件
      }
    }
    .justifyContent(FlexAlign.SpaceBetween) // 设置内容在主轴方向的对齐方式为两端对齐
    .width(CommonConstants.FULL_PARENT) // 设置宽度为父容器的100%
    .padding({ // 设置内边距
      left: $r('app.float.setting_settingCell_left'),
      right: $r('app.float.setting_settingCell_right')
    })
  }

  build() {
    Scroll(){
      Column({space: CommonConstants.COMMON_SPACE}){
        Column(){ // 创建一个内嵌的列布局
          Text($r('app.string.mainPage_tabTitles_mine')) // 显示文本
            .fontWeight(FontWeight.Medium) // 设置字体权重
            .fontSize($r('app.float.page_title_text_size')) // 设置字号
            .margin({ top: $r('app.float.mainPage_tabTitles_margin') }) // 设置外边距
            .padding({ left: $r('app.float.mainPage_tabTitles_padding') }) // 设置内边距
        }
        .width(CommonConstants.FULL_PARENT) // 设置宽度为父容器的100%
        .alignItems(HorizontalAlign.Start) // 设置子项在交叉轴上的对齐方式为开始对齐

        // 接下来是账户信息的布局
        Row() {
          Image($r('app.media.account')) // 显示账户图片
            .width($r('app.float.setting_account_size')) // 设置图片宽度
            .height($r('app.float.setting_account_size')) // 设置图片高度
          Column() {
            Text($r('app.string.setting_account_name')) // 显示账户名称
              .fontSize($r('app.float.setting_account_fontSize')) // 设置字号
            Text(this.account.toString()) // 显示账号
              .fontSize($r('app.float.little_text_size')) // 设置字号
              .margin({ top: $r('app.float.setting_name_margin') }) // 设置外边距
          }
          .alignItems(HorizontalAlign.Start) // 设置子项在交叉轴上的对齐方式为开始对齐
          .margin({ left: $r('app.float.setting_account_margin') }) // 设置外边距
        }
        .margin({ top: $r('app.float.setting_account_margin') }) // 设置外边距
        .alignItems(VerticalAlign.Center) // 设置子项在交叉轴上的对齐方式为居中对齐
        .width(CommonConstants.FULL_PARENT) // 设置宽度为父容器的100%
        .height($r('app.float.setting_account_height')) // 设置高度
        .backgroundColor(Color.White) // 设置背景颜色为白色
        .padding({ left: $r('app.float.setting_account_padding') }) // 设置内边距
        .borderRadius($r('app.float.setting_account_borderRadius')) // 设置边角半径

        // 列表布局组件
        List(){

          ForEach(DataModel.getSettingListData(), (item: ItemData) => {
            // 构建每一个列表项
            ListItem() {
              this.settingCell(item)
            }
            .height($r('app.float.setting_list_height'))
          })
        }
        .backgroundColor(Color.White) // 设置背景颜色为白色
        .width(CommonConstants.FULL_PARENT) // 设置宽度为父容器的100%
        .height(CommonConstants.SET_LIST_WIDTH) // 设置高度
        .divider({ // 设置列表项之间的分割线
          strokeWidth: $r('app.float.setting_list_strokeWidth'), // 设置分割线的宽度
          color: Color.Grey, // 设置分割线的颜色为灰色
          startMargin: $r('app.float.setting_list_startMargin'), // 设置分割线的起始边距
          endMargin: $r('app.float.setting_list_endMargin') // 设置分割线的结束边距
        })
        .borderRadius($r('app.float.setting_list_borderRadius')) // 设置边角半径
        .padding({ top: $r('app.float.setting_list_padding'), bottom: $r('app.float.setting_list_padding') }) // 设置内边距

        Blank()

        // 退出按钮的布局
        Button($r('app.string.setting_button'), { type: ButtonType.Capsule }) // 创建一个按钮
          .width(CommonConstants.BUTTON_WIDTH) // 设置按钮宽度
          .height($r('app.float.login_button_height')) // 设置按钮高度
          .fontSize($r('app.float.normal_text_size')) // 设置字号
          .fontColor($r('app.color.setting_button_fontColor')) // 设置字体颜色
          .fontWeight(FontWeight.Medium) // 设置字体权重
          .backgroundColor($r('app.color.setting_button_backgroundColor')) // 设置背景颜色
          .margin({ bottom: $r('app.float.setting_button_bottom')}) // 设置外边距
          .onClick(() => {
            // 页面跳转
            router.replaceUrl({
              url: "pages/Login",
              params: {
                sendMsg: this.account
              }
            })
          })
      }
      .height(CommonConstants.FULL_PARENT)
    }
  }
}

7、资源文件

所有页面中涉及到的变量都抽取出来了，在如下文件中：

7.1、string.json

【base】目录和【zh_CN】目录下的string.json文件，内容如下：

js 复制代码 
{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "label"
    },{
      "name": "login_text",
      "value": "登录"
    },{
      "name": "login_page",
      "value": "登录界面"
    },{
      "name": "login_more",
      "value": "登录账号以使用更多服务"
    },{
      "name": "account",
      "value": "请输入账号"
    },{
      "name": "password",
      "value": "请输入密码"
    },{
      "name": "message_login",
      "value": "短信验证码登录"
    },{
      "name": "forgot_password",
      "value": "忘记密码"
    },{
      "name": "login",
      "value": "登录"
    },{
      "name": "register_account",
      "value": "注册账号"
    },{
      "name": "other_login_method",
      "value": "其他方式登录"
    },{
      "name": "mainPage_tabTitles_home",
      "value": "Home"
    },{
      "name": "my_love",
      "value": "My favorite"
    },
    {
      "name": "history_record",
      "value": "History"
    },
    {
      "name": "message",
      "value": "Message"
    },
    {
      "name": "shopping_cart",
      "value": "Shopping cart"
    },
    {
      "name": "my_goal",
      "value": "My goal"
    },
    {
      "name": "group",
      "value": "Group"
    },
    {
      "name": "favorites",
      "value": "Favorites"
    },
    {
      "name": "recycle_bin",
      "value": "Recycle Bin"
    },
    {
      "name": "home_list",
      "value": "Home List"
    },
    {
      "name": "mainPage_top",
      "value": "Rankings"
    },
    {
      "name": "mainPage_text_top",
      "value": "Xiamen Station, we'll see you."
    },
    {
      "name": "mainPage_new",
      "value": "New product debut"
    },
    {
      "name": "mainPage_text_new",
      "value": "Xiamen Station, we'll see you."
    },
    {
      "name": "mainPage_brand",
      "value": "Big name flash"
    },
    {
      "name": "mainPage_text_brand",
      "value": "More Big Names"
    },
    {
      "name": "mainPage_found",
      "value": "Find good things"
    },
    {
      "name": "mainPage_text_found",
      "value": "Xiamen Station, we'll see you."
    },
    {
      "name": "mainPage_tabTitles_mine",
      "value": "Mine"
    },{
      "name": "setting_account_name",
      "value": "Mr. Lee"
    },
    {
      "name": "setting_account_email",
      "value": "2000000@shenhua.cc"
    },{
      "name": "setting_list_news",
      "value": "Push Notifications"
    },
    {
      "name": "setting_list_data",
      "value": "Data Management"
    },
    {
      "name": "setting_list_menu",
      "value": "Menu Settings"
    },
    {
      "name": "setting_list_about",
      "value": "Clear Cache"
    },
    {
      "name": "setting_list_storage",
      "value": "清除缓存"
    },
    {
      "name": "setting_list_privacy",
      "value": "Privacy Agreement"
    },
    {
      "name": "setting_toggle",
      "value": "switch"
    },
    {
      "name": "setting_button",
      "value": "Logout"
    },
    {
      "name": "input_empty_tips",
      "value": "The input cannot be empty."
    }
  ]
}

【en_US】目录下的string.json文件，内容如下：

js 复制代码 
{
  "string": [
    {
      "name": "module_desc",
      "value": "module description"
    },
    {
      "name": "EntryAbility_desc",
      "value": "description"
    },
    {
      "name": "EntryAbility_label",
      "value": "我的英文App"
    },{
      "name": "login_text",
      "value": "登录"
    },{
      "name": "login_page",
      "value": "登录界面"
    },{
      "name": "login_more",
      "value": "登录账号以使用更多服务"
    },{
      "name": "account",
      "value": "请输入账号"
    },{
      "name": "password",
      "value": "请输入密码"
    },{
      "name": "message_login",
      "value": "短信验证码登录"
    },{
      "name": "forgot_password",
      "value": "忘记密码"
    },{
      "name": "login",
      "value": "登录"
    },{
      "name": "register_account",
      "value": "注册账号"
    },{
      "name": "other_login_method",
      "value": "其他方式登录"
    },
    {
      "name": "mainPage_tabTitles_home",
      "value": "Home"
    },
    {
      "name": "my_love",
      "value": "My favorite"
    },
    {
      "name": "history_record",
      "value": "History"
    },
    {
      "name": "message",
      "value": "Message"
    },
    {
      "name": "shopping_cart",
      "value": "Shopping cart"
    },
    {
      "name": "my_goal",
      "value": "My goal"
    },
    {
      "name": "group",
      "value": "Group"
    },
    {
      "name": "favorites",
      "value": "Favorites"
    },
    {
      "name": "recycle_bin",
      "value": "Recycle Bin"
    },
    {
      "name": "home_list",
      "value": "Home List"
    },
    {
      "name": "mainPage_top",
      "value": "Rankings"
    },
    {
      "name": "mainPage_text_top",
      "value": "Xiamen Station, we'll see you."
    },
    {
      "name": "mainPage_new",
      "value": "New product debut"
    },
    {
      "name": "mainPage_text_new",
      "value": "Xiamen Station, we'll see you."
    },
    {
      "name": "mainPage_brand",
      "value": "Big name flash"
    },
    {
      "name": "mainPage_text_brand",
      "value": "More Big Names"
    },
    {
      "name": "mainPage_found",
      "value": "Find good things"
    },
    {
      "name": "mainPage_text_found",
      "value": "Xiamen Station, we'll see you."
    },
    {
      "name": "mainPage_tabTitles_mine",
      "value": "Mine"
    },{
      "name": "setting_account_name",
      "value": "Mr. Lee"
    },
    {
      "name": "setting_account_email",
      "value": "2000000@shenhua.cc"
    },{
      "name": "setting_list_news",
      "value": "Push Notifications"
    },
    {
      "name": "setting_list_data",
      "value": "Data Management"
    },
    {
      "name": "setting_list_menu",
      "value": "Menu Settings"
    },
    {
      "name": "setting_list_about",
      "value": "Clear Cache"
    },
    {
      "name": "setting_list_storage",
      "value": "清除缓存"
    },
    {
      "name": "setting_list_privacy",
      "value": "Privacy Agreement"
    },
    {
      "name": "setting_toggle",
      "value": "switch"
    },{
      "name": "setting_button",
      "value": "Logout"
    },
    {
      "name": "input_empty_tips",
      "value": "The input cannot be empty."
    }
  ]
}

7.2、color.json

代码如下：

js 复制代码 
{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    },
    {
      "name": "white",
      "value": "#FFFFFF"
    },
    {
      "name": "background",
      "value": "#F1F3F5"
    },
    {
      "name": "title_text_color",
      "value": "#182431"
    },
    {
      "name": "login_more_text_color",
      "value": "#99182431"
    },
    {
      "name": "placeholder_color",
      "value": "#99182431"
    },
    {
      "name": "line_color",
      "value": "#33182431"
    },
    {
      "name": "login_button_color",
      "value": "#007DFF"
    },
    {
      "name": "login_blue_text_color",
      "value": "#007DFF"
    },
    {
      "name": "other_login_text_color",
      "value": "#838D97"
    },
    {
      "name": "loading_color",
      "value": "#182431"
    },
    {
      "name": "mainPage_selected",
      "value": "#1698CE"
    },
    {
      "name": "mainPage_normal",
      "value": "#6B6B6B"
    },
    {
      "name": "mainPage_backgroundColor",
      "value": "#F1F3F5"
    },
    {
      "name": "home_grid_fontColor",
      "value": "#99182431"
    },
    {
      "name": "setting_button_backgroundColor",
      "value": "#E5E8EA"
    },
    {
      "name": "setting_button_fontColor",
      "value": "#FA2A2D"
    }
  ]
}

7.3、float.json

代码如下：

js 复制代码 
{
  "float": [
    {
      "name": "logo_image_size",
      "value": "78vp"
    },
    {
      "name": "logo_margin_top",
      "value": "100vp"
    },
    {
      "name": "logo_margin_bottom",
      "value": "8vp"
    },
    {
      "name": "page_title_text_size",
      "value": "24fp"
    },
    {
      "name": "normal_text_size",
      "value": "16fp"
    },
    {
      "name": "big_text_size",
      "value": "18fp"
    },
    {
      "name": "small_text_size",
      "value": "14fp"
    },
    {
      "name": "little_text_size",
      "value": "12fp"
    },
    {
      "name": "login_more_margin_bottom",
      "value": "30vp"
    },
    {
      "name": "login_more_margin_top",
      "value": "8vp"
    },
    {
      "name": "login_input_height",
      "value": "45vp"
    },
    {
      "name": "forgot_margin_top",
      "value": "8vp"
    },
    {
      "name": "input_margin_top",
      "value": "12vp"
    },
    {
      "name": "line_height",
      "value": "1vp"
    },
    {
      "name": "login_button_height",
      "value": "40vp"
    },
    {
      "name": "login_button_margin_top",
      "value": "87vp"
    },
    {
      "name": "login_button_margin_bottom",
      "value": "12vp"
    },
    {
      "name": "vertical_line_margin",
      "value": "15vp"
    },
    {
      "name": "login_progress_size",
      "value": "30vp"
    },
    {
      "name": "login_progress_margin_top",
      "value": "20vp"
    },
    {
      "name": "other_login_margin_top",
      "value": "50vp"
    },
    {
      "name": "other_login_margin_bottom",
      "value": "12vp"
    },
    {
      "name": "login_page_padding_bottom",
      "value": "24vp"
    },
    {
      "name": "other_login_image_size",
      "value": "48vp"
    },
    {
      "name": "page_padding_hor",
      "value": "12vp"
    },
    {
      "name": "mainPage_baseTab_top",
      "value": "4vp"
    },
    {
      "name": "mainPage_baseTab_margin",
      "value": "8vp"
    },
    {
      "name": "mainPage_padding",
      "value": "12vp"
    },
    {
      "name": "mainPage_barHeight",
      "value": "56vp"
    },
    {
      "name": "mainPage_baseTab_size",
      "value": "25vp"
    },
    {
      "name": "main_tab_fontSize",
      "value": "10fp"
    },
    {
      "name": "mainPage_tabTitles_margin",
      "value": "12vp"
    },
    {
      "name": "mainPage_tabTitles_padding",
      "value": "12vp"
    },
    {
      "name": "home_swiper_borderRadius",
      "value": "16vp"
    },
    {
      "name": "home_swiper_margin",
      "value": "24vp"
    },
    {
      "name": "home_grid_columnsGap",
      "value": "8vp"
    },
    {
      "name": "home_grid_rowGap",
      "value": "12vp"
    },
    {
      "name": "home_grid_padding",
      "value": "12vp"
    },
    {
      "name": "home_grid_height",
      "value": "124vp"
    },
    {
      "name": "home_grid_margin",
      "value": "10vp"
    },
    {
      "name": "home_list_margin",
      "value": "4vp"
    },
    {
      "name": "home_list_padding",
      "value": "8vp"
    },
    {
      "name": "home_grid_borderRadius",
      "value": "24vp"
    },
    {
      "name": "home_text_margin",
      "value": "12vp"
    },
    {
      "name": "home_backgroundImage_borderRadius",
      "value": "12vp"
    },
    {
      "name": "home_secondGrid_height",
      "value": "260vp"
    },
    {
      "name": "home_secondGrid_margin",
      "value": "10vp"
    },
    {
      "name": "home_homeCell_size",
      "value": "24vp"
    },
    {
      "name": "home_homeCell_margin",
      "value": "4vp"
    },
    {
      "name": "home_homeCell_width",
      "value": "80vp"
    },
    {
      "name": "home_homeCell_height",
      "value": "80vp"
    },
    {
      "name": "setting_name_margin",
      "value": "4vp"
    },
    {
      "name": "setting_account_margin",
      "value": "24vp"
    },
    {
      "name": "setting_account_size",
      "value": "48vp"
    },
    {
      "name": "setting_account_fontSize",
      "value": "20fp"
    },
    {
      "name": "setting_account_text_height",
      "value": "28vp"
    },
    {
      "name": "setting_account_height",
      "value": "96vp"
    },
    {
      "name": "setting_account_padding",
      "value": "24vp"
    },
    {
      "name": "setting_account_borderRadius",
      "value": "16vp"
    },
    {
      "name": "setting_list_height",
      "value": "48vp"
    },
    {
      "name": "setting_list_padding",
      "value": "4vp"
    },
    {
      "name": "setting_list_borderRadius",
      "value": "16vp"
    },
    {
      "name": "setting_list_startMargin",
      "value": "42vp"
    },
    {
      "name": "setting_list_endMargin",
      "value": "24vp"
    },
    {
      "name": "setting_list_strokeWidth",
      "value": "0.25vp"
    },
    {
      "name": "setting_button_bottom",
      "value": "55vp"
    },
    {
      "name": "setting_size",
      "value": "22vp"
    },
    {
      "name": "setting_padding",
      "value": "10vp"
    },
    {
      "name": "setting_jump_width",
      "value": "12vp"
    },
    {
      "name": "setting_jump_height",
      "value": "24vp"
    },
    {
      "name": "setting_settingCell_left",
      "value": "8vp"
    },
    {
      "name": "setting_settingCell_right",
      "value": "22vp"
    }
  ]
}

8、小结

最后工程目录结构如下：

  • 希望本文对你有所帮助！
  • 本人如有任何错误或不当之处，请留言指出，谢谢！
相关推荐
钮钴禄·爱因斯晨4 小时前
操作系统第一章：计算机系统概述
linux·windows·ubuntu·系统架构·centos·鸿蒙系统·gnu
indexsunny1 天前
互联网大厂Java面试实战：Spring Boot与微服务在电商场景中的应用解析
java·数据库·spring boot·微服务·maven·flyway·电商
熊猫钓鱼>_>1 天前
【开源鸿蒙跨平台开发先锋训练营】DAY 2 React Native for OpenHarmony 开发笔记与实战指南
react native·开源·harmonyos·arkts·openharmony·gitcode·atomgit
小学生波波2 天前
最新版鸿蒙开发工具DevEco Studio保姆级安装教程
arkts·鸿蒙系统·安装教程·deveco studio·鸿蒙开发·harmonyos6
小学生波波2 天前
HarmonyOS6 - 弹框选择年份和月份实战案例
鸿蒙·鸿蒙开发·弹窗组件·harmonyos6·选择年份
世人万千丶2 天前
Day 5: Flutter 框架文件系统交互 - 鸿蒙沙盒机制下的文件读写与安全策略
学习·flutter·华为·harmonyos·鸿蒙·鸿蒙系统
小学生波波2 天前
HarmonyOS6 - Progress进度条组件案例
arkts·鸿蒙系统·鸿蒙开发·progress·harmonyos6·进度条组件
小学生波波2 天前
HarmonyOS6 - WaterFlow瀑布流容器案例
鸿蒙系统·鸿蒙开发·harmonyos6·waterflow·瀑布流容器
世人万千丶2 天前
Day 5: Flutter 框架 SQLite 数据库进阶 - 在跨端应用中构建结构化数据中心
数据库·学习·flutter·sqlite·harmonyos·鸿蒙·鸿蒙系统
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)032025 Telegram 最新免费社工库机器人（LetsTG可[特殊字符]）搭建指南（含 Python 脚本）04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08Linux下V2Ray安装配置指南09Claude Code Skills 实用使用手册10BongoCat - 跨平台键盘猫动画工具