HarmonyOS学习笔记——ArkUI框架体系、HML基础组件、HML高级组件

大家好，欢迎来到IT知识分享网。

ArkUl框架体系

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

基本概念

UI: 即用户界面

        开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理

组件:

        UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。

        开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面

两种开发范式

针对不同的应用场景及技术背景，方舟开发框架提供两种开发范式: 基于ArKTS的声明式开发范式和兼容JS的类Web开发范式

1.声明式开发范式:

        采用基于TypeScript声明式UI语法扩展而来的ArKTS语言，从组件、动画和状态管理三个维度提供UI绘制能力

2.类Web开发范式:

        采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑

HML组件

HML组件

1.什么是组件?

        组件(Component)是界面搭建与显示的最小单位，每个组件通过对数据和方法的封装，实现独立的、可重复使用、可视的、可交互的功能单元，开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面

2.什么是HML?

        HML(HarmonyOS Markup Lanquage)是一套类HTML的标记语言，是兼容类Web开发范式中三段式开发范式的一部分，通过HML组件页面具备数据绑定、事件绑定、条件染和逻辑控制等高级能力

3.如何使用类Web开发范式进行鸿蒙应用开发?

        兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，U界面自动触发更新

4. 创建项目:模型选择: FA模型 开发语言选择: JS

5. 删除清空 index .css index.html index.js 中原有的内容

        在写代码之前打开目录下的 config.json 文件

        修改代码：”autoDesignWidth”: false 为 “autoDesignWidth”: true

HML组件分类

HML基础组件

<text>组件：

        text是文本组件，用于呈现一段文本信息

        支持子组件 <span></span>

<span>组件：

        作为<text>子组件提供文本修饰能力

        不支持子组件<span>

注意：

        文本内可以以使用 \r\n 换行

        不支持text内容和span子组件同时存在，如果同时存在，只显示span内容

<!-- 只显示 span 内容--> <div> <text> text的内容 <span>span的内容</span> </text> </div>

<image>组件:

常用属性:

 <button>组件:

常用属性:

 <input>组件:

常用属性:

 <label>组件:

常用属性:

<div class="container"> <input type="checkbox" id="repwd"></input> <label target="repwd">记住密码</label> </div> 

 <rating>组件:

常用属性:

<div class="container"> <!-- 评分标签--> <text>当前应用评分</text> <!-- indicator="true"时只能作为一个指示，用户不可操作--> <rating numstars="5" rating="1" @change="changeRating" id="rating" indicator="false"></rating> </div> 

  <progress>组件:

常用属性:

<div class="container"> <!-- progress 进度条组件 默认线性型 type: horizontal-线性 scale-ring-刻度圆环型 ring-圆环型 arc-弧形型 eclipse-日食型 percent 当前进度条进度 0~100 secondarypercent 次级进度 0~100 --> <progress type="horizontal" percent="10" secondarypercent="37"></progress> <progress type="scale-ring" percent="10" secondarypercent="50"></progress> <progress type="ring" percent="10" secondarypercent="60"></progress> <progress type="arc" percent="10" secondarypercent="60"></progress> <progress type="eclipse" percent="10" secondarypercent="60"></progress> </div> 

 <slider>组件:

常用属性:

<div class="container"> <!-- slider 滑动组件 showtips 滑动是否由气泡提示百分比 showsteps 滑动步长标识。 step 滑动步长 min/max 最小0/最大100 存在不会生效 value 初始值 --> <slider showsteps="false" showtips="true" step="10"></slider> <slider showsteps="false" showtips="true" step="10" min="10" max="200" value="40"></slider> </div> 

 <toolbar>组件:

<div class="container"> <!-- 工具栏组件 --> <toolbar> <!-- 最大的显示数量为5个 如果存在6个以上 则保留前4个剩下的折叠--> <toolbar-item value="首页" icon="common/images/icons/home.png"></toolbar-item> <toolbar-item value="喜欢" icon="common/images/icons/like.png"></toolbar-item> <toolbar-item value="有鱼" icon="common/images/icons/fish.png"></toolbar-item> <toolbar-item value="我的" icon="common/images/icons/my.png"></toolbar-item> <toolbar-item value="更多" icon="common/images/icons/my.png"></toolbar-item> <toolbar-item value="推荐" icon="common/images/icons/my.png"></toolbar-item> </toolbar> </div> 

.container { display: flex; flex-direction: column; justify-content: center; align-items: center; left: 0px; top: 0px; width: 100%; height: 100%; } toolbar { /* 固定定位*/ position: fixed; left: 0; bottom: 0; right: 0; } toolbar-item { color: blueviolet; font-size: 16px; /* 文本尺寸是否跟随系统设置的字体缩放尺寸*/ allow-scale: true; } 

<badge>组件:

常用属性:

<div class="container"> <!-- count 设置消息数量 visible 是否显示消息 maxcount 最大消息限制，超出之后数字进行省略 --> <badge count="10" visible="true" maxcount="9"> <text>信息</text> </badge> </div> 

text { font-size: 20px; } badge { margin-top: 200px; width: 50px; }

 <list>组件:

常用属性:

 <search>组件:

常用属性:

 <swiper>组件:

常用属性:

练习1效果：

代码示例：如上图

练习2效果：