利用电竞快览应用学ArkUI
发布时间：2021-11-22 13:27:23 所属栏目：系统 来源：互联网
导读：为了能够进一步对OpenHarmony3.0内置应用做修改，我需要先掌握ArkUI声明式开发范式的相关知识。通过电竞快览应用示例能够快速学习ArkUI声明式开发，并对相关知识点进行扩展学习，最终达到对组件、布局、动效和数据状态管理的初步掌握，并将最终的健康饮食应
|
为了能够进一步对OpenHarmony3.0内置应用做修改，我需要先掌握ArkUI声明式开发范式的相关知识。通过电竞快览应用示例能够快速学习ArkUI声明式开发，并对相关知识点进行扩展学习，最终达到对组件、布局、动效和数据状态管理的初步掌握，并将最终的健康饮食应用程序安装到烧录了OpenHarmony3.0的Hi3516开发板上。 ArkUI是一套构建HarmonyOS应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套TS/JS API，就能在多个HarmonyOS设备上提供生动而流出的用户界面体验。 ——引自HarmonyOS应用开发官网 准备 DevEco Studio 3.0 Beta1 OpenHarmony SDK 3.0 数据来源于天行数据API 通过电竞快览应用学ArkUI 1. 创建电竞快览应用(OpenHarmony版) 配置OpenHarmony SDK 打开DevEco Studio，点击左下角Configure，选择Setting进入设置界面。在SDK Manager菜单下选择OpenHarmony SDK，自定义存放路径，并勾选安装Platforms下的SDK及Tools下的Previewer和Toolchains。 【图尔科技(宁)】电竞快览（ArkUI版）-鸿蒙HarmonyOS技术社区 【图尔科技(宁)】电竞快览（ArkUI版）-鸿蒙HarmonyOS技术社区 点击Create Project创建项目 在Choose Your Ability Template界面下拉到最底部，选择[Standard]Empty Ability模板 【图尔科技(宁)】电竞快览（ArkUI版）-鸿蒙HarmonyOS技术社区 配置工程界面完善项目信息 【图尔科技(宁)】电竞快览（ArkUI版）-鸿蒙HarmonyOS技术社区 Project name：项目名称 Project type：项目类型 Bundle name：包名称 Save location：项目保存地址 Language：选择编程语言(eTS) Compatible API version：选择兼容版本(API Version 7) Device type：设备类型(Phone) 点击Finish，等待项目构建完成。 目录结构说明 【图尔科技(宁)】电竞快览（ArkUI版）-鸿蒙HarmonyOS技术社区 app.ets 全局应用逻辑和应用生命周期管理。 pages 存放所有组件页面。 common 存放公共代码(可选)。 resources 存放资源配置文件。 删除config.json文件中js -> pages标签下的pages/second 删除index.ets文件中的一些代码，如图所示： 【图尔科技(宁)】电竞快览（ArkUI版）-鸿蒙HarmonyOS技术社区 删除second.ets文件 2. 术语 认识@Entry 用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。单个源文件中，可以存在多个自定义组件，但最多可以使用@Entry装饰一个自定义组件。 认识@Component 在声明式UI中，所有的页面都是由组件构成。使用@Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件。 build函数 build函数用于定义组件的声明式UI描述。 认识@Builder @Builder装饰器定义了一个如何渲染自定义组件的方法。通过其可以在一个自定义组件内快速生成多个布局内容。比如要在一个页面显示多个名称，使用多个Text组件显得代码臃肿且冗余，使用@Builder定义一个公用的方法，在组件中引入，代码量少且达到了复用。 3. 构建电竞新闻列表 【图尔科技(宁)】电竞快览（ArkUI版）-鸿蒙HarmonyOS技术社区 由图可知，整个界面分为上下两部分，上部分显示标题栏，下部分显示电竞新闻列表。 页面中使用的组件 1)Column组件 Column组件是容器组件，是沿垂直方向布局的容器。相对的就存在沿水平方向布局的容器，其为Row组件，这两个组件我将它们定位为线性布局容器。 可以通过alignItems属性来设置子组件在水平方向上的对齐格式。提供了Start、Center、End三种对齐方式。 Column() { //子组件 } .alignItems(HorizontalAlign.Center) 2)Flex组件 Flex是弹性布局组件，其提供五个属性来控制子组件的显示方式。 Flex({direction: FlexDirection.Row，wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Stretch, alginContent: FlexAlign.Start}) direction：描述子组件在Flex容器上排列的方向，即主轴方向，也就是子组件是以横向排列还是纵向排列。 FlexDirection.Row：横向(行方向)排列，从行起始位置开始。 FlexDirection.RowReverse：横向(行方向)排列，与Row方向相反，即从行尾开始排列。 FlexDirection.Column：纵向(列方向)排列，从列起始位置开始。 FlexDirection.ColumnReverse：纵向(列方向)排列，与Column方向相反，即从列尾开始排列。 （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号