darrenjh / harmonystatedemo Goto Github PK

鸿蒙State模型ArkTS的练习demo
文档

说明 支持使用ArkTS低代码开发方式。 低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 如需使用低代码开发方式，打开Enable Super Visual开关。

ArkTS基于TypeScript生态基础上的进一步扩展

1. State模型开发指导

• UIAbility组件
• ExtensionAbility组件
• WindowStage-->WindowManager
• Context
• AbilityStage 项目路径App.ets

2. State模型应用/组件级配置配置

• app.json5 ，应用的全局配置信息。应用的包名、应用名称、图标等.字段参考
• module.json5 ，组件配置，字段参考

3. @State装饰器：组件内状态

4. UIAbility组件
   UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。

方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

针对不同的应用场景及技术背景，方舟开发框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。

这里练习的是ArkTS的声明式开发范式，UI开发概述

1. 线性布局(Row/Column)
   Row容器主轴为横向，水平布局，Column容器主轴为纵向，垂直布局。 RowColumn.ets
2. 层叠布局(Stack)
   StackLayout.ets
3. 弹性布局(Flex)
   FlexPage.ets
4. 相对布局(RelativeContainer)
   RelativeContainerPage.ets
5. 栅格布局（GridRow/GridCol)
   GridRowGridCol.ets
6. 媒体查询（mediaquery）
   MediaQueryPage.ets
7. 创建列表（List）
   ListPage.ets
8. 创建网格（Grid/GridItem）
   GridGridItemPage.ets
9. 创建轮播（Swiper） SwiperPage.ets
10. 改善布局性能 如何优化Flex的布局性能

• 使用Column/Row代替Flex。
• 大小不需要变更的子组件主动设置flexShrink属性值为0。
• 优先使用layoutWeight属性替代flexGrow属性和flexShrink属性。

1. 按钮(Button)
2. 单选框（Radio）
3. 切换按钮（Toggle）
4. 进度条（Progress）
5. 文本显示（Text/Span）
6. 文本输入（TextInput/TextArea）
7. 自定义弹窗（CustomDialog）
8. 视频播放（Video）
9. XComponent

权限说明： https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/accesstoken-guidelines-0000001493744016-V3