浅谈ArkTS/ArkUI组件开发

浅谈ArkTS/ArkUI组件开发

本篇文章将从一个移动开发头脑的维度出发，浅谈ArkTS组件开发的底子问题，比如状态管理、装饰器、属性传递、自定义构建函数、插槽、条件渲染，模块引用和路由跳转等。

---

创建项目

这里利用截图简朴过一下，不再赘述了

页面和组件

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'Hello World';
6.   build() {
7.     RelativeContainer() {
8.       Text(this.message)
9.         .id('HelloWorld')
10.         .fontSize(50)
11.         .fontWeight(FontWeight.Bold)
12.         .alignRules({
13.           center: { anchor: '__container__', align: VerticalAlign.Center },
14.           middle: { anchor: '__container__', align: HorizontalAlign.Center }
15.         })
16.     }
17.     .height('100%')
18.     .width('100%')
19.   }
20. }

复制代码

看页面入口Index组件，装饰器

• @Entry装饰器修饰的组件，表示这是个入口组件。且表示是一个独立page页面，通过router举行跳转。
  
• @Component利用该装饰器修饰的组件，表示自定义组件，可举行页面渲染。
  
• build雷同ReactNative中的render方法。生成节点树实例。
  

另外，鸿蒙ArkUI是一套构建分布式应用界面的声明式UI开发框架，利用声明式的写法。也就是只能利用表达式，与jsx语法对比来看

1. // 感受下ReactNative中的组件，响应式编程范式（特点：都有一个return，属性样式以插入标签方式实现）
2. // return 之后是如何写的~
3. render() {
4.         const {errDisMsg, title='账**', backMsg='返回'} = this.state;
5.          //公共错误
6.          ...省略...
7.         return (
8.             <View style={{ flex: 1 }}>
9.                 <View style={styles.container}>
10.                     <View>
11.                         <ICBCWAPHeader {...header} />
12.                         <View style={{ backgroundColor: '#F5F7F9' }} />
13.                         {bodytext}
14.                     </View>
15.                 </View>
16.             </View>
17.         );
18.     }
19. }

复制代码

1.   // 与上面使用ReactNative组件响应式开发对比，该ArkUI声明式开发如下
2.   // 方式与响应式相近，无return返回，有属性样式的链式调用
3.   build() {
4.     Stack({ alignContent: Alignment.Top }) {
5.       Image($r('app.media.ic_app_logo'))
6.         .width(80)
7.         .height(80)
8.         .margin({ top: 160 })
9.         .borderRadius(30)
10.         .sharedTransition('imgAppLogo', {
11.           duration: 300,
12.           curve: Curve.Linear
13.         })
14.       Column() {
15.         Text("剧影新视界")
16.           .fontSize(SizeConstant.TEXT_XXL)
17.           .fontColor('#CC333333')
18.           .fontWeight(FontWeight.Medium)
19.       }
20.       .width("100%")
21.       .height(100)
22.       .margin(260)
23.       .padding({ top: SizeConstant.SPACE_XL, bottom: SizeConstant.SPACE_XL })
24.       .alignItems(HorizontalAlign.Center)
25.       .justifyContent(FlexAlign.SpaceEvenly)
26.      ... 省略...
27.     }.width("100%").height("100%").backgroundColor('#F5F5F5')
28.   }

复制代码

可以发现声明式的开发中的一个小特点，组件中不必要renturn。
自定义组件

上面组件的开发示例代码中，我们用到 @Entry装饰器。它装饰的组件，则是通过路由可跳转进入的页面组件。其实对于自定义组件，不必要@Entry装饰器的修饰利用（@Entry修饰的组件，属于入口组件，可通过router举行跳转），且不是页面组件，不可路由进入。利用开发中的一段代码介绍下

1. /**
2. * @auther y**
3. * @description 登陆页面
4. * @date 今天
5. */
6. @Entry  // 通过该装饰器装饰，可路由页面组件
7. @Component
8. struct LoginPage {
9.   @StorageLink(THEME_TYPE) themeType: ThemeType = ThemeType.DEFAULT
10.   @State qrcodeValueBean?: Partial<QrcodeValueBean> = {}
11.   @State authStep: LoginAuthStep | undefined = undefined
13.   aboutToAppear() {
14.     this.authStep = LoginAuthStep.GENERATE_QRCODE_ING
15.   }
17.   build() {
18.     Stack({ alignContent: Alignment.Top }) {
19.       Image($r('app.media.ic_app_logo'))
20.           ... 省略 ...
21.           Stack() {
22.           this.QrcodeBuilder()
23.         }.layoutWeight(1)
24.           ...省略...
25.       }
26.     }.width("100%").height("100%").backgroundColor(AppTheme.primary)
27.   }
29.   @Builder QrcodeBuilder() {
30.     ViewStateLayout({ onLoadData: async (viewState) => {
31.       this.qrcodeValueBean = (await loginViewModel.qrcodeAuth(viewState,
32.         (authStep: LoginAuthStep) => {
33.           this.authStep = authStep
34.         })).data
35.     } }) {
36.     // 这里引入自定义组件
37.       CpnQRCode({ qrcodeValueBean: this.qrcodeValueBean as QrcodeValueBean })
38.     }
39.   }
40. ... 省略转场动画...
41. // 省略放在下方~
42. // 自定义组件

复制代码

最根本的自定义组件，也就是下面如许写的了

1. // 自定义组件，不可路由进入的组件，且非页面组件
2. @Component   /**自定义组件：第一步 */
3. struct/**自定义组件：第二步 */ CpnQRCode {
4.   @ObjectLink qrcodeValueBean: QrcodeValueBean
6.   build()/**自定义组件：第三步 */ {
7.    QRCode(this.qrcodeValueBean.qraurl).width(160).height(160)
8.   }
9. }

复制代码

链式调用

链式调用，就是我们常用到的可以不停通过.方法调用执行方法的路子。如安卓火热的RxJava(Rxjava其基于变乱流的链式调用、逻辑简洁)。另外，有Flutter开发经验的会发现，与Flutter声明式编码如出一辙。那相对于混合开发技能栈的ReactNative和React、Vue相应式UI编程范式就大不一样啦。但是只要有以上任何一种技能栈的丰富开发经验，ArkUI样式写法就很容易理解和上手。

而且上面许多样式并不常用，只要有UI样式编码经验，心底成竹在胸的知道，该如何定义和使其显现，开发则不成问题。样式开发中雷同上图提示的功能，同样可以通过@Extend和@Styles这俩装饰器来集中实现。@Styles或@Extend目前不支持export导出，后续这两个装饰器不会继续演进

• @Extend装饰器 定义扩展组件样式。
  
• @Styles装饰器 定义组件重用样式，支持通用属性和通用变乱。
  

@Styles装饰器

@Styles装饰器，用来定义一些公共底子的样式能力。如颜色背景，透明度、内边距、外边距等。可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不必要添加function关键字。定义在组件内部，该方法被认为是该组件的私有、特殊范例的成员函数，有助于提升组件内聚；定义在外部，可构建作为底子样式库提供支持。
@Extend

@Styles不能携带参数，恰好@Extend增补了这一缺点。（和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。）
   和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义
  

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'Hello World';
5.   build() {
6.     RelativeContainer() {
7.       Text(this.message)
8.         .TextStyle()
9.         .TextStyleExtend()
10.     }
11.     .height('100%')
12.     .width('100%')
13.   }
14. }
16. @Extend(Text) function TextStyleExtend (fontSize: number = 20, id: string = 'hello-world') {
17.   .fontSize(fontSize)
18.   .fontWeight(FontWeight.Bolder)
19.   .id(id)
20.   .alignRules({
21.     center: { anchor: '__container__', align: VerticalAlign.Center },
22.     middle: { anchor: '__container__', align: HorizontalAlign.Center }
23.   })
24. }
25. @Styles
26. function TextStyle () {
27.   .backgroundColor(Color.Blue)
28.   .border({width: {top:2}, color: Color.Gray})
29.   .margin({left: '15vp'})
30. }

复制代码

属性和状态

在声明式UI编程范式中，UI是应用步伐状态的函数，应用步伐状态的修改会更新相应的UI界面。ArkUI采用了MVVM模式，其中ViewModel将数据与视图绑定在一起，数据更新的时候直接更新视图。如下图所示：

   属性prop，通过外部传入，由父到子的单向数据流传递；利用者(子组件)无法修改。
状态state，组件私有状态，参于组件内部交互处理逻辑。
  @State装饰器

上述截图及代码中有用到@State装饰器，修饰一个标量，在该变量被改变时，会触发UI重绘。
   利用@State装饰器，表示定义状态与当前组件的一种绑定；即必要用到状态的变化引发组件的重绘渲染。否则，不要利用绑定。
  

@Prop装饰器

被@Prop装饰器修饰的成员标量。引用从外部传入，在内部利用。相比ReactNative自定义组件，可认为是自定义组件对外开放的接口。以方便自定义组件吸收参数并机动的设计出可预期的组件样式和功能。

源码中，同时支持状态和属性的改变

1. @Entry
2. @Component
3. struct Index {
4.   @State message: string = 'Hello World';
5.   build() {
6.     RelativeContainer() {
7.       // 在父级组件中轻松调用，并传入子组件@Prop修饰的属性'text_color'赋值
8.       // `若`text_color传入值使用@State装饰的message，即ZidingyiComponent({text_color: this.message})
9.       // 且在当前组件（父级）生命周期方法中对该状态message做修改变化，
10.       // 那么在父组件状态值的变化同时会触发子组件（ZidingyiComponent）属性的变化。达到数据流的单向传递效果。
11.       ZidingyiComponent({text_color: 'red'})
12.     }
13.     .height('100%')
14.     .width('100%')
15.   }
16. }
18. /**自定义子组件，子组件中定义了@State和@Prop*/
19. @Component
20. struct ZidingyiComponent {
21.   @Prop text_color: string = '#FFFFFF'
22.   @State text_size: number = 18
24.   aboutToAppear(): void {
25.     this.text_size = 66 // 自定义组件生命周期中改变状态，触发渲染
26.   }
28.   build() {
29.     Text('自定义组件，prop由外部传入，默认是白色')
30.       .TextStyleExtend(this.text_size, this.text_color, 'id')
31.       .TextStyle()
32.   }
33. }
34. @Extend(Text) function TextStyleExtend (fontSize: number = 20, fontColor:string = 'black', id: string = 'hello-world') {
35.   .fontSize(fontSize)
36.   .fontColor(fontColor)
37.   .fontWeight(FontWeight.Bolder)
38.   .id(id)
39.   .alignRules({
40.     center: { anchor: '__container__', align: VerticalAlign.Center },
41.     middle: { anchor: '__container__', align: HorizontalAlign.Center }
42.   })
43. }
44. @Styles
45. function TextStyle () {
46.   .backgroundColor(Color.Blue)
47.   .border({width: {top:2}, color: Color.Gray})
48.   .margin({left: '15vp'})
49. }

复制代码

属性监听

@Watch属性监听装饰器，可以监听@Prop和@State装饰对象的变化。所监听的装饰对象发生变化，触发@Watch的回调方法。且，一个对象只能被监听一次。

1. @State @Watch('onMessageChange') message: string = 'Hello World';
2. onMessageChange() {
3.   hilog.info(0x88, 'onMessageChange', '@Watch装饰器监听变量message发生变化后，触发该方法执行')
4. }
5. // 页面每次显示时触发一次
6. onPageShow(): void {
7.   this.message = '修改message，为了触发@Watch'
8. }

复制代码

构建函数组件和插槽实现

从官网定义看@Builder称作UI元素复用机制，@Builder所装饰的函数遵循build()函数语法规则，开发者可以将重复利用的UI元素抽象成一个方法，在build方法里调用自定义构建函数，也可作为一种自定义组件利用与看待。
@Builder 和 @BuilderParam

值得注意的是，@BuilderParam装饰的方法只能被自定义构建函数（@Builder装饰的方法）初始化。@BuilderParam可实现插槽

   ArkUI引入了@BuilderParam装饰器，该装饰器用于声明任意UI描述的一个元素，雷同slot占位符。
  简朴的举例，（定义需求）在父级组件中定义了一个@Builder函数构件(一个完整的函数组件，且具备通用性)；然后在子组件中定义并初始化了@BuilderParam。父组件在利用子组件的同时，将父级组件中的通用函数组件传递到子组件中利用，以实现雷同的slot占位符效果。
提示：@BuilderParam出现的同时，必然会有@Builder的出现。反之不同。

1. @Entry
2. @Component
3. struct Index {
4.   @Builder BuilderComponent() {
5.     Button('Builder自定义构建函数')
6.       .type(ButtonType.Capsule)
7.       .fontColor('#333333')
8.       .fontSize('16fp')
9.   }
10.   
11.   build() {
12.     RelativeContainer() {
13.       // 父组件中使用自定义子组件，并传入子组件（父组件的函数组件）
14.       // 传递组件哦
15.       ZidingyiComponent({BuilderParamsComponent: this.BuilderComponent})
16.     }
17.     .height('100%')
18.     .width('100%')
19.   }
20. }
22. @Component
23. struct ZidingyiComponent {
24.   @Builder BuilderComponent() {
25.     // 空的，初始化@BuilderParam使用
26.   }
27.   @BuilderParam BuilderParamsComponent:()=>void = this.BuilderComponent
29.   build() {
30.     RelativeContainer() {
31.       Text('自定义子组件')
32.     }
33.     .height('100%')
34.     .width('100%')
35.   }
36. }

复制代码

装饰器

单向同步

数据流单向同步的方式，在以上已描述带过。即在子孙组件中利用@Prop装饰器修饰定义的变量对象，可以引流父组件数据向子组件单向传递。

双相同步

数据流的双向同步，即父级组件中嵌入子组件。通过双向数据流装饰器@Link/@StorageLInk/@ObjectLink装饰的变量，任何一方的改变都会触发另外一方的数据变化，从而变化的数据驱动UI重绘。

上面截图来自实际项目工程，表达的不够明确。下面手写一段代码再次解释下利用装饰器如何实现数据的双向同步。

1. @Entry
2. @Component
3. struct Index {
4.   @State @Watch('showChangeCallback') isShow: boolean = false;
5.   showChangeCallback() {
6.     // 监听`isShow`的变化，并触发该回调方法。
7.     // 回调方法中，修改全局缓存的`isShow`的值。之后被装饰器@StorageLink、@StorageProp绑定`isShow`的变量对象。
8.     // 变量对象的值都将响应变化
9.     AppStorage.setOrCreate<Boolean>('isShow', !this.isShow);
10.   }
12.   aboutToAppear(): void {
13.     // 初始化isShow的全局缓存
14.     AppStorage.setOrCreate<Boolean>('isShow', this.isShow);
15.   }
16.   build() {
17.     RelativeContainer() {
18.       ZidingyiComponent()
19.       Button('改变isShow在AppStorage的缓存').onClick(()=>{this.isShow = true/**命中变化*/})
20.     }
21.     .height('100%')
22.     .width('100%')
23.   }
24. }
26. @Component
27. struct ZidingyiComponent {
28.   @StorageLink('isShow') _isShow: boolean = false; // 响应AppStorage中缓存的`isShow`，双向传递
29.   build() {
30.     RelativeContainer() {
31.       if (this._isShow) Text('自定义子组件文本'); else Button('自定义子组件按钮');
32.       Zidingyi2Component({_isShow_: this._isShow})
33.     }
34.     .height('45vp')
35.     .width('100%')
36.   }
37. }
39. @Component
40. struct Zidingyi2Component {
41.   // @Link 装饰器修饰的对象 _isShow_ 可实现双向传递
42.   // _isShow_的修改（变化）会同时修改到『ZidingyiComponent』中的`_isShow`值，同时修改到AppStorage中缓存的`isShow`。
43.   // 然后『ZidingyiComponent』中「@StorageLink('isShow') _isShow: boolean」的`_isShow`值同时响应变化。
44.   @Link _isShow_: boolean;
45.   build() {
46.     RelativeContainer() {
47.       if (this._isShow_) Text('自定义子组件文本2');
48.       else Button('自定义子组件按钮2').onClick(()=>this._isShow_ = true/**命中修改*/);
49.     }
50.     .height('45vp')
51.     .width('100%')
52.   }
53. }

复制代码

模块引用

如果我要对我的工程开发举行模块化架构解耦处理，如下截图
其中common目次下，创建的module模块，利用的静态共享包；features目次下，创建的module模块，利用的是动态共享包；

此时，在Index.ets主模块入口文件中利用common模块中的资源。那么必要做以下配置操纵利用。

• 引用配置，在主模块的oh-package.json5中配置
  

1. {
2.   "name": "visionofscript",
3.   "version": "1.0.0",
4.   "description": "Please describe the basic information.",
5.   "main": "",
6.   "author": "",
7.   "license": "",
8.   "dependencies": {
9.     "@ohos/DrawerLayoutLib": "file:../common/DrawerLayoutView",
10.     "@ohos/CommonAndViewLib": "file:../common/CommonAndViewLib"
11.   }
12. }

复制代码

• 引用利用，在主模块（其他模块）中的文件中import后，即可正常利用
  

1. import { DrawerLayout } from '@ohos/DrawerLayoutLib';

复制代码

路由跳转

跳转利用体系os自带api，必要引入import router from '@ohos.router';
模块内跳转

   entry主模块内部路由的跳转，由接待页跳转到应用首页
  分解上面路由跳转参数，比方~ 注意：目的页面文件名后，不加后缀名 .ets
router.replaceUrl({url: 「页面所在」})

• 页面所在 pages/home/HomeIndex
  router.replaceUrl({url: 'pages/home/HomeIndex'})
  

更值得注意的是：跳转的目的页面，雷同安卓的Activity（每创建出一个Activity，都必要在AndroidManifest.xml中配置），必要在 main_pages.json中举行注册。否则，找不到跳转目的页面。

跨模块跳转

   如上面模块引用下截图展示的架构介绍~
跨module的路由跳转的方式： entry主模块页面，点击跳转按钮，跳转至hsp模块指定页面。
router.pushUrl({ url: '@bundle:「包名」/「模块名」/「页面所在」'})
  分解上面路由跳转参数，比方~ 注意：目的页面文件名后，不加后缀名 .ets

• 包名 cn.com.cec.tiomovie
  
• 模块名 mine
  
• 页面所在 ets/pages/Index
  

router.pushUrl({url: '@bundle:cn.com.cec.tiomovie/mine/ets/pages/Index'})

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