【HarmonyOS开发】华为商城应用页面实行示例解析（ArkTS实战解析） ...

一.实行配景

本次项目为华为云鸿蒙应用入门级开发者认证的实行项目，借此来巩固对ArkTS的学习。
实行源地点

   开发者云实行_云实行KooLabs_在线实行_上云实践_云盘算实行_AI实行_华为云官方实行平台-华为云
   实行目标

   本实行一共需要完成以下三个部门的使命：本实行将模仿制作华为商城应用商品展示界，该款应用需要实现如下功能结果。
  

• 用户切换左侧导航的商品类别，右侧滚动到对应的内容。
  
• 滚动右侧详细商品的内容，左侧会切换对应的商品类别导航。 
  

  实行结果 

二.实行详细解析

GoodsModel.ets

1. export default class GoodsModel {
2.   CommodityId: number; // 所属商品类别id
3.   goodsId: number;     // 商品id
4.   goodsName: string;   // 商品名称
5.   imageUrl: Resource;  // 商品展示图片
6.   price: number;       // 商品价格
8.   // 使用构造函数创建商品数据模型
9.   constructor(CommodityId: number, goodsId: number, goodsName: string, imageUrl: Resource, price: number) {
10.     this.CommodityId = CommodityId;
11.     this.goodsId = goodsId;
12.     this.goodsName = goodsName;
13.     this.imageUrl = imageUrl;
14.     this.price = price;
15.   }
16. }

复制代码

        这里是使用ArkTS语法创建了一个GoodsModel类，constructor作为其构造器，用来记载商品品类，使用并默认导出这个类。
   

• export：用于导出模块中的函数、类、接口或变量。
  
  
  
  • 一个模块可以有多个 export。
    
  • 导出时，你必须指定导出的名称，这些名称在导入时必须划一。
    
  • 导入时，需要使用花括号 {} 来指定导入的项，并且可以重命名导入的项。
    
  
  
• export default：用于导出模块中的默认值。这个默认值可以是函数、类、对象等。
  
  
  
  • 每个模块只能有一个默认导出。
    
  • 导出时，不需要指定名称。
    
  • 导入时，不需要花括号，并且可以为导入的项指定任何名称。
    
  
  

  NavigationModel.ets

        此文件中也是创建了一个NavigationModel的默认导出类。记载商品分类。
LinkDataModel.ets

        创建了一个LinkDataModel联合类。将商品与分类联合起来。
NavigationViewModel.ets

        创建NavigationViewModel类，获取商品分类列表数据，返回商品类别的ID以及对应连接的详细商品信息列表。

1. //导入先前创建好的三个数据模型
2. //TODO
3. import NavigationModel from './NavigationModel';
4. import GoodsModel from './GoodsModel';
5. import LinkDataModel from './LinkDataModel';
6. class NavigationViewModel {
7.   /**
8.    * 获取商品分类列表数据
9.    *
10.    * 返回 Array<商品分类模型> 商品类别的ID 以及 对应连接的具体商品信息列表 linkDataList
11.    */
12.   getLinkData(): Array<NavigationModel> {
13.     let linkDataList: Array<NavigationModel> = [];
14.     let superId: number = 0;
15.     //TODO
16.     LINK_DATA.forEach((item: LinkDataModel) => {
17.       if (superId !== item.superId) {
18.         // 如果该分类id不存在，则添加此商品分类模型中
19.         let GoodsItem: NavigationModel = new NavigationModel(item.superId, item.superName, []);
20.         linkDataList.push(GoodsItem);
21.       }
22.       // 添加具体商品信息模型
23.       let GoodsItem: GoodsModel = new GoodsModel(superId, item.id, item.GoodsName, item.imageUrl, item.price);
24.       linkDataList[linkDataList.length-1].GoodsList.push(GoodsItem);
25.       superId = item.superId;
26.     });
27.     return linkDataList;
28.   }
29. }
31. let navigationViewModel = new NavigationViewModel();
33. export default navigationViewModel as NavigationViewModel;
35. // 创建所链接具体数据
36. const LINK_DATA: LinkDataModel[] = [
37.   new LinkDataModel(1, '热门商品', 1, 'HUAWEI P60 Art', $r('app.media.ic_img_1'), 0),
38.   new LinkDataModel(1, '热门商品', 2, 'HUAWEI P60 Pro', $r('app.media.ic_img_2'), 5000),
39.   new LinkDataModel(1, '热门商品', 3, 'HUAWEI Mate 50 Pro 4G', $r('app.media.ic_img_3'), 5000),
40. ...,
41.   new LinkDataModel(6, '智慧屏', 36, '华为智慧屏 V98', $r('app.media.ic_img_10'),3000),
42.   new LinkDataModel(6, '智慧屏', 37, '华为智慧屏  V85', $r('app.media.ic_img_11'), 5000),
43. ]

复制代码

CommodityItem.ets

        创建导航栏组件，显示右侧商品导航栏。 

1. // 引入先前构建好的常量类别，框架代码中已提供
2. import Constants from '../common/constants/Constants';
3. @Component
4. export default struct CommodityItem {
5.   CommodityName?: string;
6.   @Prop isSelected: boolean = false;
7.   onClickAction = () => {
8.     // TODO
10.   }
12.   build() {
13.     Text(this.CommodityName)
14.       .fontSize($r('app.float.normal_font_size'))
15.       .fontColor(this.isSelected ? $r('app.color.base_font_color') : $r('app.color.normal_font_color'))
16.       .fontFamily(this.isSelected ? $r('app.string.hei_ti_medium') : $r('app.string.hei_ti'))
17.       .fontWeight(this.isSelected ? Constants.TITLE_FONT_WEIGHT : Constants.LABEL_FONT_WEIGHT)
18.       .textAlign(TextAlign.Center)
19.       .backgroundColor(this.isSelected ? $r('app.color.base_background') : '')
20.       .width(Constants.FULL_PERCENT)
21.       .height($r('app.float.classify_item_height'))
22.       .onClick(this.onClickAction)
23.   }
24. }

复制代码

GoodsItem.ets

        创建商品组件，显示商品。

1. // 引入先前构建好的常量类别，框架代码中已提供
2. import Constants from '../common/constants/Constants';
3. // 引入之前创建好的具体商品数据模型
4. //TODO
5. import GoodsModel from '../viewmodel/GoodsModel';
7. // 构建具体商品信息子项
8. @Component
9. export default struct GoodsItem {
10.   //TODO
11.   @Prop itemStr:string = '';
12.   item?:GoodsModel;
13.   // 在创建自定义组件的新实例后，在执行其build()函数之前执行。
14.   //TODO
15.   aboutToAppear() {
16.     this.item = JSON.parse(this.itemStr);
17.   }
18.   build() {
19.     Row() {
20.       Row(){
21.         //TODO
22.         Image(this.item !== undefined ? this.item?.imageUrl : '')
23.           .height(Constants.FULL_PERCENT)
24.           .aspectRatio(1)
25.       }.height(70)
26.       .width(70)
27.       Column() {
28.         //TODO
29.         Text(  )
30.           .fontSize($r('app.float.normal_font_size'))
31.           .fontColor($r('app.color.base_font_color'))
32.           .fontFamily($r('app.string.hei_ti_medium'))
33.           .maxLines(Constants.TITLE_LINE_NUMBER)
34.           .textOverflow({ overflow: TextOverflow.Clip })
35.           .lineHeight($r('app.float.title_line_height'))
36.           .width(Constants.FULL_PERCENT)
37.         // 当商品的价格等于0时，这显示免费，否则显示具体价格。
38.         //TODO
39.         Text(this.item?.price === 0 ? $r('app.string.free_price') : $r('app.string.price_str', this.item?.price))
40.           .fontSize($r('app.float.header_font_size'))
41.           .fontColor($r('app.color.price_color'))
42.           .fontFamily($r('app.string.hei_ti_medium'))
43.       }
44.       .padding($r('app.float.course_item_padding'))
45.       .layoutWeight(1)
46.       .alignItems(HorizontalAlign.Start)
47.       .justifyContent(FlexAlign.SpaceBetween)
48.       .height(Constants.FULL_PERCENT)
49.     }
50.     .clip(true)
51.     .borderRadius($r('app.float.normal_border_radius'))
52.     .backgroundColor($r('app.color.start_window_background'))
53.     .width('100%')
54.     .height($r('app.float.course_item_height'))
55.   }
56. }

复制代码

MainPage.ets

        此文件为程序入口页面，将上述所有文件调度起来形成页面。
   

• aboutToAppear()主要作加载过程，setTimeout()在延Constants.LOADING_DURATION时间后被实行，() => { ... }在这里本质上是一个回调函数。
  
• @Builder允许在自界说组件内界说一个或多个自界说构建函数，同时只允许组内调用。
  
• build()中还使用了列表List()组件，在其中通过ForEach遍历生成了多个商品项。
  

1. // 导入数据模型以及创建好的自定义组件
2. import Constants from '../common/constants/Constants';
3. //TODO
4. import NavigationModel from '../viewmodel/NavigationModel';
5. import GoodsModel from '../viewmodel/GoodsModel';
6. import GoodsItem from '../view/GoodsItem';
7. import CommodityItem from '../view/CommodityItem';
8. import NavigationViewModel from '../viewmodel/NavigationViewModel';
9. @Entry
10. @Component
11. struct IndexPage {
12.     //TODO
13.   @State currentCommodity: number = 0; // 被选中的左侧商品分类序号
14.   @State requestSuccess: boolean = false; // 是否加载成功
15.   private CommodityList: Array<NavigationModel> = []; // 左侧商品分类列表
16.   private CommodityScroller: Scroller = new Scroller(); // 左侧商品类别导航滚动条
17.   private scroller: Scroller = new Scroller(); // 右侧商品信息导航条
18.   // 搜索框
19.   @State changeValue: string = ''
20.   @State submitValue: string = ''
21.   controller: SearchController = new SearchController() // 搜索框控制器
23.   // 生命周期函数
24.   //TODO
25.   aboutToAppear() {
26.     // 在应用加载页面上显示“正在加载中”的文字提示
27.     setTimeout(() => {
28.       this.CommodityList = NavigationViewModel.getLinkData();
29.       this.requestSuccess = true;
30.     }, Constants.LOADING_DURATION);
32.   }
34.   // @Builder可以在自定义组件内定义一个或多个自定义构建函数，这里创建了左侧导航栏商品分类被选中时的样式。
35.   // 自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。
36.   // TODO
37.     @Builder   CommodityHeader(CommodityName: string) {
38.     Row() {
39.       Text(CommodityName)
40.         .fontSize($r('app.float.header_font_size'))
41.         .fontColor($r('app.color.base_font_color'))
42.         .fontFamily($r('app.string.hei_ti_medium'))
43.         .fontWeight(Constants.TITLE_FONT_WEIGHT)
44.     }
45.     .padding({ left: $r('app.float.item_padding_left') })
46.     .height($r('app.float.classify_item_height'))
47.     .width(Constants.FULL_PERCENT)
48.     .backgroundColor($r('app.color.base_background'))
49.   }
50.   // 定义当切换样式改变函数
51.   //TODO
52.   CommodityChangeAction(index: number, isCommodity: boolean) {
53.     if (this.currentCommodity !== index) {
54.       // 更改商品分类状态
55.       this.currentCommodity = index;
56.       if (isCommodity) {
57.         // 滚动右侧商品滚动条，滚动到选中区域
58.         this.scroller.scrollToIndex(index);
59.       } else {
60.         // 滚动左侧商品导航条，滚动到选中区域
61.         this.CommodityScroller.scrollToIndex(index);
62.       }
63.     }
64.   }
65.   build() {
66.     Column(){
67.       Row(){
68.         // 搜索框
69.         //TODO
70.         Search({ value: this.changeValue, placeholder: '手表', controller: this.controller })
71.           .searchButton('搜索')
72.           .width(350)
73.           .height(40)
74.           .backgroundColor('#F5F5F5')
75.           .placeholderColor(Color.Grey)
76.           .placeholderFont({ size: 14, weight: 400 })
77.           .textFont({ size: 14, weight: 400 })
78.           .onSubmit((value: string) => {
79.             this.submitValue = value
80.           })
81.           .onChange((value: string) => {
82.             this.changeValue = value
83.           })
84.       }.backgroundColor($r('app.color.classify_background'))
85.       // 界面整体使用Row组件实现横向布局，分为左右两部分。
86.       // 均使用List组件实现对导航和内容的数据展示，导航部分固定宽度，内容部分自适应屏幕剩余宽度并用ListItemGroup完成每个导航下的内容布局。
87.       Row() {
88.         if (this.requestSuccess) {
89.           List({ scroller: this.CommodityScroller }) {
90.             // 循环商品分类导航列表
91.             //TODO
92.             ForEach(this.CommodityList, (item: NavigationModel, index?: number) => {
93.               ListItem() {
94.                 CommodityItem({
95.                   CommodityName: item.goodsName,
96.                   isSelected: this.currentCommodity === index,
97.                   onClickAction: () => {
98.                     if (index !== undefined) {
99.                       // 调用切换函数
100.                       this.CommodityChangeAction(index, true);
101.                     }
102.                   }
103.                 })
104.               }
105.             }, (item: NavigationModel) => item.goodsName + this.currentCommodity)
107.           }
108.           .height(Constants.FULL_PERCENT)
109.           .width($r('app.float.classify_item_width'))
110.           .backgroundColor($r('app.color.classify_background'))
111.           .scrollBar(BarState.Off)
112.           // 循环具体商品信息列表
113.           List({ scroller: this.scroller }) {
114.             //TODO
115.             ForEach(this.CommodityList, (CommodityItem: NavigationModel) => {
116.               ListItemGroup({
117.                 header: this.CommodityHeader(CommodityItem.goodsName),
118.                 space: Constants.GOODS_ITEM_PADDING
119.               }) {
120.                 ForEach(CommodityItem.GoodsList, (courseItem: GoodsModel) => {
121.                   ListItem() {
122.                     GoodsItem({ itemStr: JSON.stringify(courseItem) })
123.                   }
124.                 }, (courseItem: GoodsModel) => `${courseItem.goodsId}`)
125.               }
126.             }, (item: NavigationModel) => `${item.commodityId}`)
129.           }
130.           .padding({ left: $r('app.float.item_padding_left'), right: $r('app.float.course_item_padding') })
131.           .sticky(StickyStyle.Header)
132.           .layoutWeight(1)
133.           .edgeEffect(EdgeEffect.None)
134.           .onScrollIndex((start: number) => this.CommodityChangeAction(start, false))
135.         } else {
136.           Text($r('app.string.loading'))
137.             .fontFamily($r('app.string.hei_ti_medium'))
138.             .textAlign(TextAlign.Center)
139.             .height(Constants.FULL_PERCENT)
140.             .width(Constants.FULL_PERCENT)
141.         }
142.       }
144.     }.backgroundColor($r('app.color.base_background'))
145.   }
146. }

复制代码

三.总结

        笔者在此只是大概对某些地方做了粗略的总结与表明，对于别的有疑问的地方笔者可自行到华为官网搜刮查询。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。