鸿蒙项目条记（1）

一、焦点内容-商城

1、装饰器的拓展利用，根本组件的熟悉。
2、引入根本动画实战，页面属性动画、页面跳转动画、自界说页面翻页等。
3、一次开辟，多端摆设。
4、本地数据库实战，涉及多种本地数据存储方式。
5、路由导航：路由的拦截，根据登岸的权限来界说页面表现。
6、扩展知识：舆图、定位等。
7、媒体查询、相应式结构等。
二、项目应用模块

鸿蒙体系是：1+8+n的生态，即“1”是手机，“8”是各种周边生态像耳机、车机、平板等，“n”指智能家居、智能办公等等。思量到当前的项目要顺应多端，即“一多开辟”，提出了新的开辟模式，即多Module计划机制。
（1）多Module计划机制

1、支持模块化开辟： 一个应用通常会包罗多种功能，将差别的功能特性按模块来分别和管理，是一种良好的计划方式。平凡来讲就是可以将一个巨大的项目拆分为很多个模块，每个模块负责本身独立业务。有利于分工协作，便于我们项目功能分别和维护，每个模块可以独立编译、运行。他是鸿蒙体系提供的一种架构，按照指定模式来计划就能满足我们项目计划要求。
2、支持多装备适配： 一个应用通常须要适配多种装备范例，在采取多Module计划的应用中，每个Module都会标注所支持的装备范例。平凡来讲就是每个模块独立开辟，而且每个模块都可以设置支持的装备范例，应用开辟完成后上架市场，根据Module支持装备范例举行法态分配，如pad打开应用市场看到的就是支持pad的软件大概一些指定的模块。
（2）Module范例

Module按照利用场景可以分为两种范例：
1、Ability范例的Module：这种模块可以独立编译、打包运行，相称于一个公司的子公司，可以独立运行也可以和总公司一起运行。对应到项目中，商城项目为主模块，物流信息：可以计划为一个子模块，这个模块可以和主模块一起放在手机上运行，也可以独立的放在车机、手表上面运行。
每一个Ability范例的Module编译后，会天生一个以.hap为后缀的文件，我们称其为HAP（Harmony Ability Package）包。HAP包可以独立安装和运行，是应用安装的根本单元，一个应用中可以包罗一个或多个HAP包，具体包罗如下两种范例。

• entry范例的Module：应用的主模块，包罗应用的入口界面、入口图标和主功能特性，编译后天生entry范例的HAP。每一个应用分发到同一范例的装备上的应用步伐包，只能包罗唯逐一个entry范例的HAP，也可以不包罗。
  
• feature范例的Module：应用的动态特性模块，编译后天生feature范例的HAP。一个应用中可以包罗一个或多个feature范例的HAP，也可以不包罗。
  

2、Library范例的Module： 用于实当代码和资源的共享。相称于公司里的各个部分，必须和总公司一起运行。对应到项目中，相称于一个巨大的项目我们可以拆分业务，放在每一个模块中运行，这些模块是无法独立打包运行，必须依赖整个项目。可以资助我们分工协作，也可以资助项目业务拆分后维护。一个模块雷同于一个独立的项目，项目中要用到的公共工具大概代码，假如没有提取公共模块，每个模块重复写。
Library范例的Module分为Static和Shared两种范例，编译后会天生共享包。

• Static Library：静态共享库。编译后会天生一个以.har为后缀的文件，即静态共享包HAR（Harmony Archive Package）。
  
• Shared Library：动态共享库。编译后会天生一个以.hsp为后缀的文件，即动态共享包HSP（Harmony Shared Package）。
  

---

共享包范例编译和运行方式发布和引用方式HAR

HAR中的代码和资源跟随利用方编译，假如有多个利用方，它们的编译产物中会存在多份雷同拷贝。

留意：编译HAR时，发起开启肴杂本领，掩护代码资产。

HAR除了支持应用内引用，还可以独立打包发布，供其他应用引用。HSPHSP中的代码和资源可以独立编译，运行时在一个进程中代码也只会存在一份。HSP一样平常随应用举行打包，当前支持应用内和集成态HSP。应用内HSP只支持应用内引用，集成态HSP支持发布到ohpm私仓和跨应用引用。

（3）HAP、HAR和HSP区别 

模块区别HAP可以代表独立的项目，打包后缀名为hap，可以独立运行到装备，也可以独立上架应用市场。HAR与HSP一样都是属于无法独立运行，但是可以将模块放在主模块利用，与HSP的区别在于：HAR模块一旦被主模块大概features模块利用，打包的时间独立打包一份代码放在对应模块中，以是多个模块利用，打包会打包多份文件，得当用于存放项目中指定某些业务，从主模块中独立出来，在商城项目中，可以将付出模块、购物车模块、商品列表都独立为HAR，在页面中引入利用。HSP type范例为shared，打包后的包名是hsp格式，无法独立编译和运行，必须依赖于entry大概application模块来运行。任何一个模块都可以引入shared模块中的内容，可以当成公共共享模块。
特点：多个模块引入shared模块内容，终极项目打包只会天生一个hsp模块举行代码的共享。
  三、一次开辟，多端摆设 

随着终端装备形态日益多样化，分布式技能渐渐冲破单一硬件界限，一个应用或服务，可以在差别的硬件装备之间随意调用、相助共享，让用户享受无缝的全场景体验。HarmonyOS体系面向多终端提供了“一次开辟，多端摆设”（后文中简称为“一多”）的本领，让开辟者可以基于一种计划，高效构建多端可运行的应用。
一多开辟紧张包罗两个层面：1、多个装备终端都 能适配运行，差别装备屏幕能看到差别的结构方案。2、根据差别终端装备打包为差别的HAP，在每一个终端装备中就能下载对应的安装包。
  

小装备

  

中装备

  

大装备

  若要完成一多开辟，我们须要将项目架构按照官方尺度三层目次结构来计划。
须要用到的技能：工程管理、媒体查询 、栅格体系，在开辟过程中用媒体查询和栅格体系一起来实现页面的结构。
（1）工程管理

当遇到须要多端适配的项目时，保举利用官方保举的三层目次架构。以后全部HAP默认放在product;common就是HSP模块，用于存放公共工具和代码；features模块就是HAR模块，可以将项目拆分为无数个模块独立管理。
   /application
 ├── common                  # 公共特性目次
 │
 ├── features                # 功能模块目次
 │   ├── feature1            # 子功能
 │   ├── feature2            # 子功能2
 │   └── ...                 # 子功能n
 │
 └── product                 # 产物层目次
     ├── wearable            # 智能穿着泛类目次
     ├── default             # 默认装备泛类目次
     └── ...
  按照官方文档，修改项目目次如下：

（2）媒体查询技能

1、根本概念与根本语法

相应式结构方式，可以检测当前装备巨细，根据差别的屏幕尺寸用户本身决定怎样结构。媒体查询技能是实现相应式结构的焦点技能。
  

相应式结构本领

  

简介

  

断点

  

用户可以本身设置屏幕的参考值，以这个值为准让屏幕巨细来匹配，匹配完成后就采取某种结构。

  

媒体查询

  

检测屏幕巨细，检测装备范例。

  

栅格体系

  

在媒体查询技能上封装好的技能，鸿蒙提供的栅格体系

   媒体查询：
 利用媒体查询来检测屏幕表现方式，下面代码中只用到了媒体查询的一个条件，只判定了横屏竖屏，要真正实现页面上元素的检测，尺寸的检测，可以添加更多的条件。

1. //(1)引入媒体查询对象
2. import mediaquery from '@ohos.mediaquery';
3. //目前官方提供从Kit中获取
4. import { mediaquery } from '@kit.ArkUI';
5. @Entry
6. @Component
7. struct Index {
8.   @State message:string = "媒体查询技术";
9.   //(2)检测屏幕是否为横屏,orientation:landscape查询条件：屏幕格式
10.   private listener =mediaquery.matchMediaSync('(orientation:landscape)')
11.   //(4)当满足媒体查询条件时，触发回调
12.   onPortrait = (mediaQueryResult: mediaquery.MediaQueryResult)=>{
13.     if (mediaQueryResult.matches) {
14.       AlertDialog.show({message:"横屏"})
15.     }else {
16.       AlertDialog.show({message:"竖屏"})
17.     }
18.   }
19.     //(3)给listener监听器绑定一个函数
20.   aboutToAppear(): void {
21.     this.listener.on("change",this.onPortrait)
22.   }
23.   build() {
24.     Column(){
25.       Text(this.message)
26.       .fontSize(50)
27.     }
28.     .width('100%')
29.     .height('100%')
30.     .backgroundColor(Color.Green)
31.   }
32. }

复制代码

2、媒体查询条件

内体查询条件是一个完备的表达方式，由媒体范例、逻辑利用符、媒体特性构成。
文档链接详情：媒体查询 (@ohos.mediaquery)-构建结构-开辟结构-UI开辟 (ArkTS声明式开辟范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开辟者
名称特性媒体范例screen是默认的范例，不写也默认这个范例。一样平常将screen表现彩色屏幕。逻辑利用符用于链接多个条件的符号，and：“与”；or：“或”；not：必须搭配screen利用，取反媒体查询效果；等等媒体特性用于指定装备的范围，包罗装备的状态、巨细、名字。比力height、width等宽高尺寸，resolution分辨率，orientation屏幕的方向

1. private listener =mediaquery.matchMediaSync('(320vp<=width<600vp)')
2. //修改此处查询条件，根据不同的查询返回结果来定义不同的样式属性

复制代码

1. //(1)引入媒体查询对象
2. import mediaquery from '@ohos.mediaquery';
4. @Entry
5. @Component
6. struct Index {
7.   @State message:string = "媒体查询技术";
8.   //(2)检测屏幕宽度
9.   private listener =mediaquery.matchMediaSync('(320vp<=width<600vp)')
10.   //(4)当满足媒体查询条件时，触发回调
11.   onPortrait = (mediaQueryResult: mediaquery.MediaQueryResult)=>{
12.     if (mediaQueryResult.matches) {
13.       AlertDialog.show({message:"手机"})
14.     }else {
15.       AlertDialog.show({message:"其他设备"})
16.     }
17.   }
18.     //(3)给listener监听器绑定一个函数
19.   aboutToAppear(): void {
20.     this.listener.on("change",this.onPortrait)
21.   }
22.   build() {
23.     Column(){
24.       Text(this.message)
25.       .fontSize(50)
26.     }
27.     .width('100%')
28.     .height('100%')
29.     .backgroundColor(Color.Green)
30.   }
31. }

复制代码

3、封装媒体查询工具 

需求：根据屏幕巨细来自动辨认我们的装备范例，装备尺寸现在紧张分为xs,sm,md,lg，封装工具按照下面的断点来实现页面厘革，检测装备的范例。
参考断点：
  

断点名称

  

取值范围（vp）

  

xs

  

[0, 320）

  

sm

  

[320, 600)

  

md

  

[600, 840)

  

lg

  

[840, +∞)

  3.1 媒体查询常量：

在开辟媒体查询的时间，我们会用到很多的数字大概一些值，这些数字大概值，只管不要直接硬编码到代码中，有须要将代码中常用的参数封装到常量文件中，页面用来调用。在entry大概default的项目中未来让页面表现内容更加规范，因此也界说了一个常量文件，位置default/ets/constants/BasicConstants.ets

1. //default/src/main/ets/Constants/BasicConstants
2. //常量文件：封装了页面常用的一些值，封装好了以后可以直接引用，不用再写一遍
3. //减少页面数字、结果的硬编码
4. export class BasicContants{
5.   //常量要求变量名字必须大写 readonly只读
6.   static readonly FULL_WIDTH = '100%'
7.   static readonly FULL_HEIGHT = '100%'
8.   static readonly FONT_SIZE_SMALL = '14vp'
9.   static readonly FONT_SIZE_MEDIUM = '16vp'
10.   static readonly FONT_SIZE_BIG = '20vp'
11.   static readonly FONT_SIZE_LARGE = '30vp'
12. }

复制代码

 在页面中利用：

1. import {BasicContants} from '../Constants/BasicContants'
3. @Entry
4. @Component
5. struct Index {
6. @State message:string = "常量使用";
7.   build() {
8.     Column(){
9.       Text(this.message)
10.       .fontSize(BasicContants.FONT_SIZE_LARGE)
11.     }
12.     .width(BasicContants.FULL_WIDTH)
13.     .height(BasicContants.FULL_HEIGHT)
14.   }
15. }

复制代码

3.2 媒体查询工具： 

其属于公共开辟工具，以后任何HAP模块，大概其他模块都可以利用这个工具，因此代码放在common的HSP模块中举行封装，哪个模块利用，直接引入共享。
3.2.1 封装常量

开辟过程中，媒体查询有很多常量须要利用，这些常量都封装为一个媒体查询的常量文件，思量到媒体查询工具是公用的工具，我们可以将这个工具放在common模块中的utils中，将常量文件放在common/src/main/ets/constants文件夹下，此处定名为BreakPointConstants，译为“媒体查询断电点常量”。

1. /**
2. *Constants for breakpoint
3. */
4. export class BreakPointConstants{
5.   /**
6.   *这个单位页面上表示初始值
7.   */
8.   static readonly BREAKPOINT_INIT = 'init';
9.   /**
10.   * 这个单位页面上表示手机
11.   */
12.   static readonly BREAKPOINT_SM = 'sm';
13.   /**
14.   * 这个单位页面上表示折叠屏
15.   */
16.   static readonly BREAKPOINT_MD = 'md';
17.   /**
18.   * 这个单位页面上表示pad
19.   */
20.   static readonly BREAKPOINT_LG = 'lg';
21.   /**
22.   *这个单位页面上表示大屏
23.   */
24.   static readonly BREAKPOINT_XL = 'xl';
25.   /**
26.   *这个单位页面上表示超大屏
27.   */
28.   static readonly BREAKPOINT_XXL = 'xxl';
29.   /**
30.   *断点数组,根据不同的尺寸大小说明修改数组样式
31.   */
32.   static readonly BREAKPOINT_VALUE:Array<string> = ['320vp','600vp','840vp','1080vp','1280vp'];
33.   /**
34.   *列在水平方向占多少份
35.   */
36.   static readonly COLUMN_SM:string = '4';
37.   static readonly COLUMN_MD:string = '8';
38.   static readonly COLUMN_LG:string = '12';
39.   /**
40.   *
41.   */
42.   static readonly GUTTER_X:number = 12;
43.   /**
44.   *
45.   */
46.   static readonly SPAN_SM:number = 4;
47.   static readonly SPAN_MD:number = 6;
48.   static readonly SPAN_LG:number = 8;
49.   /**
50.   *
51.   */
52.   static readonly OFFSET_MD:number = 1;
53.   static readonly OFFSET_LG:number = 2;
54.   /**
55.   *
56.   */
57.   static readonly CURRENT_BREAKPOINT:string = 'currentbreakpoint';
58.   /**
59.   *
60.   */
61.   static readonly FONT_SIZE_SM:number = 14;
62.   static readonly FONT_SIZE_MD:number = 16;
63.   static readonly FONT_SIZE_LG:number = 18;
64.   /**
65.   *
66.   */
67.   static readonly COVER_MARGIN_SM:number = 10;
68.   static readonly COVER_MARGIN_MD:number = 30;
69.   static readonly COVER_MARGIN_LG:number = 40;
70.   /**
71.   *
72.   */
73.   static readonly RANGE_SM:string = '(320vp<=width<600vp)';
74.   static readonly RANGE_MD:string = '(600vp<=width<840vp)';
75.   static readonly RANGE_LG:string = '(840vp<=width<1080vp)';
76.   static readonly RANGE_XL:string = '(1080vp<=width<1280vp)';
77.   static readonly RANGE_XXL:string = '(1280vp<=width)';
78. }

复制代码

3.2.2 封装媒体查询工具

在common/src/main/ets/utils创建一个媒体查询公共代码，BreakPointSystem.ets文件

1. import {BreakPointConstants} from '../constants/BreakPointConstants'
2. import { mediaquery } from '@kit.ArkUI'
4. export class BreakPointSystem{
5.   //当前尺寸是多大,媒体查询，得到单位要将这个sm、md、lg、xl、xxl保存到全局，currentBreakpint作为key保存起来
6.   private currentBreakpint:string = BreakPointConstants.BREAKPOINT_INIT
7.   /**
8.   *步骤一：屏幕大小的条件查询
9.   */
10.   private smListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_SM)
11.   private mdListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_MD)
12.   private lgListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_LG)
13.   private xlListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_XL)
14.   private xxlListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_XXL)
16.   //定义一个公共函数，用来保存当前屏幕的检测结果
17.   //将sm、md、lg、xl、xxl保存到“应用的状态”
18.   private updateCurrentBreakpoint(breakpoint:string){
19.     if (this.currentBreakpint !== breakpoint) {
20.       this.currentBreakpint = breakpoint
21.       //将当前单位做应用存储,setOrCreate是创建初始化的意思,()中存储一个键值，名字和存储内容
22.       AppStorage.setOrCreate<string>(BreakPointConstants.CURRENT_BREAKPOINT,this.currentBreakpint)
23.     }
24.   }
25.   /**
26.   *步骤二：给监听器绑定“change”事件
27.   */
28.   private isBreakpointSM = (mediaQueryResult: mediaquery.MediaQueryResult)=>{
29.     //如果匹配成功
30.     if (mediaQueryResult.matches) {
31.       //将sm的单位保存起来
32.       this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_SM)
33.     }
34.   }
35.   private isBreakpointMD = (mediaQueryResult: mediaquery.MediaQueryResult)=>{
36.     //如果匹配成功
37.     if (mediaQueryResult.matches) {
38.       //将md的单位保存起来
39.       this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_MD)
40.     }
41.   }
42.   private isBreakpointLG = (mediaQueryResult: mediaquery.MediaQueryResult)=>{
43.     //如果匹配成功
44.     if (mediaQueryResult.matches) {
45.       //将lg的单位保存起来
46.       this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_LG)
47.     }
48.   }
49.   private isBreakpointXL = (mediaQueryResult: mediaquery.MediaQueryResult)=>{
50.     //如果匹配成功
51.     if (mediaQueryResult.matches) {
52.       //将xl的单位保存起来
53.       this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_XL)
54.     }
55.   }
56.   private isBreakpointXXL = (mediaQueryResult: mediaquery.MediaQueryResult)=>{
57.     //如果匹配成功
58.     if (mediaQueryResult.matches) {
59.       //将xxl的单位保存起来
60.       this.updateCurrentBreakpoint(BreakPointConstants.BREAKPOINT_XXL)
61.     }
62.   }
64.   //这个函数外面要调用，因此不能再用private修饰
65.   public register(){
66.     this.smListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_SM);
67.     this.smListener.on('change',this.isBreakpointSM);
68.     this.mdListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_MD);
69.     this.mdListener.on('change',this.isBreakpointMD);
70.     this.lgListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_LG);
71.     this.lgListener.on('change',this.isBreakpointLG);
72.     this.xlListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_XL);
73.     this.xlListener.on('change',this.isBreakpointXL);
74.     this.xxlListener = mediaquery.matchMediaSync(BreakPointConstants.RANGE_XXL);
75.     this.xxlListener.on('change',this.isBreakpointXXL);
76.   }
78.   //接触事件绑定，优化代码
79.   public unregister(){
80.     this.smListener.off('change',this.isBreakpointSM);
81.     this.mdListener.off('change',this.isBreakpointMD);
82.     this.lgListener.off('change',this.isBreakpointLG);
83.     this.xlListener.off('change',this.isBreakpointXL);
84.     this.xxlListener.off('change',this.isBreakpointXXL);
85.   }
86. }

复制代码

3.2.3 工具袒露 

在common/index.ets下

1. export { BreakPointConstants } from './src/main/ets/constants/BreakPointConstants'
2. export { BreakPointSystem } from './src/main/ets/utils/BreakPointSystem';

复制代码

3.2.4 导入利用

在default/ets/Index.ets下，以后便可以根据得到的单元来决定页面怎样结构，当检测sm的时间，一行表现两个商品，当检测md的时间，一行可以表现四个商品，当检测到lg的时间，一行可以多表现一些商品等相应式方案。

1. import {BreakPointSystem,BreakPointConstants} from '@ohos/common'
2. import {BasicContants} from '../Constants/BasicContants'
4. @Entry
5. @Component
6. struct Index {
8.   //暴露除一个类，需要new实例化才能使用
9.   private breakpointSystem = new BreakPointSystem()
10.   @StorageProp("currentbreakpoint") currentBreakpoint:string = BreakPointConstants.BREAKPOINT_INIT
12.   aboutToAppear(): void {
13.     //进入界面想要注册监听器,工具中已经将值传到了全局AppStorage
14.     this.breakpointSystem.register()
15.   }
16.   aboutToDisappear(): void {
17.     //组件销毁时要将监听器销毁，利于内存的回收
18.     this.breakpointSystem.unregister()
19.   }
20.   build() {
21.     Column(){
22.       Text(`当前屏幕尺寸单位类型为:${this.currentBreakpoint}`)
23.       .fontSize(BasicContants.FONT_SIZE_LARGE)
24.     }
25.     .width(BasicContants.FULL_WIDTH)
26.     .height(BasicContants.FULL_HEIGHT)
27.   }
28. }

复制代码

3.3.5 留意事项

 1、由于工具封装袒露的是一个类，因此引入这个工具过后须要实例化一次。

1. private breakpointSystem = new BreakPointSystem()

复制代码

2、在页面生命周期中举行注册和烧毁。

1. aboutToAppear(): void {
2.     //进入界面想要注册监听器,工具中已经将值传到了全局AppStorage
3.     this.breakpointSystem.register()
4.   }
5.   aboutToDisappear(): void {
6.     //组件销毁时要将监听器销毁，利于内存的回收
7.     this.breakpointSystem.unregister()
8.   }

复制代码

3、通过应用存储获取当前检测到的屏幕尺寸。

1. @StorageProp("currentbreakpoint") currentBreakpoint:string = BreakPointConstants.BREAKPOINT_INIT

复制代码

 4、假如想要在全局存储利用，但是不是页面大概组件中，而是在一个class类中举行只存利用，那么我们可以用setOrCreate来实现。

1. AppStorage.setOrCreate<string>(BreakPointConstants.CURRENT_BREAKPOINT,this.currentBreakpint)

复制代码

 留意：新版本官方文档明确表现引用HSP的模块不支持预览，官方阐明：

• 预览不支持引用HSP。引用了HSP的模块不支持预览，请直接在HSP内预览或模拟HSP。
  

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-previewer-arkts-js-V5
誊写时可以先在HAP大概HAR中实现，如有须要再往出抽离。
（3）栅格体系

栅格体系相称于鸿蒙已经封装好的组件，可以实现在页面结构中，根据屏幕巨细来决定元素分列规则。栅格体系的底层着实也是用到了媒体查询技能。
栅格的样式由Margin、Gutter、Columns三个属性决定。

单个Column的宽度是体系连合Margin、Gutter和Columns自动盘算的，不须要也不答应开辟者手动设置。在现实利用场景中，可以根据须要设置差别断点下栅格组件中元素占据的列数，同时也可以调解Margin、Gutter、Columns的取值，从而实现差别的结构效果。
名称简介Margin相对应用窗口、父容器的左右边沿的间隔，决定了内容可展示的团体宽度。Gutter相邻的两个Column之间的间隔，决定内容间的细密水平。Columns栅格中的列数，其数值决定了内容的结构复杂度，默认最多12列。 1、栅格容器组件GridRow

栅格组件提供了丰富的断点定制本领，开辟者可以修改断点的取值范围，支持启用最多6个断点。

1. //基础代码
2. @Entry
3. @Component
4. struct GridRowSample1 {
5.   @State bgcolors:Color[]=[Color.Red, Color.Blue, Color.Yellow, Color.Green, Color.Gray, Color.Black,Color.Pink,Color.Orange]
6.   build() {
7.     GridRow(){
8.       ForEach(this.bgcolors, (item:Color, index) => {
9.         GridCol(){
10.           Text(`${index}`)
11.             .textAlign(TextAlign.Center)
12.             .backgroundColor(item)
13.             .width(30)
14.             .height(100)
15.         }
16.       }, (item:Color, index) => JSON.stringify(item))
17.     }
18.   }
19. }

复制代码

栅格组件（GridRow）的直接孩子节点只可以是栅格子组件（GridCol），默认一行最多表现12个元素，代表12列栅格结构，栅格结构是一种计划流程，很多框架都会采取，每一家框架的计划会有所区别。
1.1 GridRow支持参数

columns自界说设置一行最多表现多少列，用columns属性来控制。

1. //sm最多显示三列
2. GridRow({columns:3}){
4. }

复制代码

可以指定根据差别的屏幕尺寸计划差别的元素分列个数。

1. //sm最多显示三列,md最多显示8列
2. GridRow({columns:{sm:4,md:8}}){
4. }

复制代码

  breakpoints答应用户根据屏幕来自界说断点值。默认情况下，官方提供4个断点，最多支持6个断点。
断点名称取值范围（vp）xs[0, 320）sm[320, 600)md[600, 840)lg[840, +∞)

1. //sm最多显示三列,md最多显示8列
2. GridRow({columns:{sm:4,md:8}},
3. //自定义断点：200vp便是sm,300vp表示md......
4.          breakpoints:{value:['200vp','300vp','400vp','500vp','600vp']}
5.   ){
6. }

复制代码

 direction可以设置容器内里子元素分列数序，紧张是Row和RowReverse。

1. //sm最多显示三列,md最多显示8列
2. GridRow({columns:{sm:4,md:8}},
3. //自定义断点：200vp便是sm,300vp表示md......
4.          breakpoints:{value:['200vp','300vp','400vp','500vp','600vp']},
5.          direction:GridRowDirection.Row
6.   ){
7. }

复制代码

 gutter设置子元素在水平方向分列过程中默认的间距。

1. //sm最多显示三列,md最多显示8列
2. GridRow({columns:{sm:4,md:8}},
3. //自定义断点：200vp便是sm,300vp表示md......
4.          breakpoints:{value:['200vp','300vp','400vp','500vp','600vp']},
5.          direction:GridRowDirection.Row，
6.          gutter:10
7.   ){
8. } 

复制代码

1.2 子组件GridCol支持参数

GridCol组件支持设置span、offset和order三个参数。

1. //sm最多显示三列,md最多显示8列
2. GridRow({columns:{sm:4,md:8}}
4.   ){
5.       //span参数可以设置指定每一个单元格的份数
6.       GridCol({span:{sm:2,md:4},
7.       //offset可以通过这个属性来控制当前盒子的偏移份数，相当于设置了margin-left。
8.       offset:1,
9.       //order可以用来改变盒子排列的前后顺序
10.   }){
11.   }
12. } 

复制代码

参数名范例必填默认值阐明span{xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?:number}是-在栅格中占据的列数。span为0，意味着该元素既不到场结构盘算，也不会被渲染。offset{xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?:number}否0相对于前一个栅格子组件偏移的列数。order{xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?:number}否0 元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。
  2、栅格结构范例结构

范例页面场景-结构本领-页面开辟的一多本领先容-一次开辟，多端摆设 - 华为HarmonyOS开辟者
四、Module构建流程

（1）HAP包构建流程

1、以一个单独的商城项目中舆图功能作为一个模块为例，选中项目鼠标右键新建模块，

2、 回跳到选择构建模块范例，选择第一个，

 3、填写修改module名字，由于只能有一个entry，以是我们创建feature范例，可以有多个feature范例。

 4、默认Ability名字即可，

 5、创建乐成，以后可以把舆图、付出干系的一些功能独立出去放在这个模块，多个模块之间是可以举行通讯的。

6、想要设置HAP打包后可以在什么装备运行，须要在/src/main/module.json下的“deviceTypes”中设置答应装备范例： 

 （2）HSP包构建流程

1、与上述构建HAP范例，但在选择模块时选择Shared Library

2、名字取名为common，

3、创建乐成，在项目中我们一样平常只会创建一个shared模块，内里会放一些我们公共的工具包、公共组件都会存放在common模块中，其他ability模块中引入利用。

4、查察common模块范例，在common/module.json5下查察： 

 5、每个模块都能引入这个common模块中的内容，但是在末了打包的时间只会产生一份hsp代码，淘汰代码体积，以后修改了公共代码，其他页面都将直接修改。
6、袒露公共代码时，common内里写的代码根本上都是其他模块要用的公共代码，以是代码写完了将对象内容暴袒露去，其他模块才华引入。在common/index.ets下誊写，因此只要在这个文件暴袒露去了指定组件、工具、插件等，其他模块就可以利用。

 7、common是一个独立的模块，内里的内容假如须要利用，须要将common模块引入到其他模块中做成一个依赖项，其他模块在开辟代码的时间，找对应的某个函数，先找本身本身有没有，假如没有内容，就会去找依赖项中有没有，在oh_modules文件夹下存放本身的依赖和第三方依赖。好比common模块就是本身的依赖，axios属于第三方依赖。

 在devDependencies下将common包添加到全局依赖下

1. "devDependencies": {
2.     "@ohos/hypium": "1.0.21",
3.     "@ohos/hamock": "1.0.0",
4.     "@ohos/common": "file:./common"
5.   }

复制代码

ps:写入后肯定要记得实行Run，才算打包。

但如许会报错，

 办理方法如下图：

 如许在@ohos下边有了相应的依赖包。
 （3）HAR包构建流程

1、在项目目次下创建一个文件夹features，

2、选中features，右键创建一个module,

3、根据模块需求界说模块名字，这个文件下创建的模块都是HAR模块，

4、打开指定模块的module.json5文件，

5、袒露公共代码时，在对应的模块中找到对应的index.ets ,

1. export { MainPage } from './src/main/ets/components/MainPage';

复制代码

在主模块中引入指定homelibrary, 方法雷同HSP须要在oh-package.json5修改，而且Run打包，

如许在相应位置便有了依赖包，可以在entry大概其他HAP处导入。