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

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组件分类

基础组件		容器组件
组件名称	组件用途	组件名称	组件用途
button	按钮组件，显示按钮	div	基础容器，页面结构根节点，内容分组
text / span	文本组件，显示文本信息	list	列表组件，展示同类型列表项
image	图片组件，显示图片	dialog	自定义弹窗组件
input	输入框组件，接收用户数据	tabs	页面导航
progess	进度条组件，显示处理进度	swiper	轮播图
toolbar	工具栏组件，显示操作选项	badge	新事件提醒
menu	菜单组件，临时性弹出窗口	panel	弹出式组件
picker	显示日期，事件等选择器	stepper	步骤导航器

HML基础组件

<text>组件：

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

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

        <text>

<span>组件：

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

        不支持子组件<span>

        <span>

注意：

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

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

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

<image>组件:

        图片组件，用来渲染展示图片
        不支持子组件

        <image>

常用属性:

名称	类型	描述
src	string	图片的路径，支持本地路径支持base64字符串

 <button>组件:

        按钮组件，包括胶囊按钮，圆形按钮，文本按钮，弧形按钮，下载按钮
        不支持子组件

        <button>

常用属性:

名称	类型	描述
type	string	规定button按钮类型 默认显示胶囊型按钮，可选值：capsule(胶囊) circle(圆形) download(下载)等
value	string	按钮文本值
icon	string	按钮图片路径
placement	string	type属性缺省时生效，设置图片位于文本位置，取值：top bottom start end
waiting	string	waiting为true时展现等待中转圈效果，位于文本左侧，类型为 download 时不生效

 <input>组件:

        Input 是交互式组件，用于接收用户数据其类型可设置为日期，多选框和按钮等
        不支持子组件

        <input>

常用属性:

名称	类型	描述
type	string	改变组件的类型 默认值 text 可选值：text,date,number,password,button,checkbox,radio等
palceholder	string	用户输入提示信息
checked	boolean	当前组件是否被选中，仅type为checkbox和radio生效 取值：是-true  否-false
disabled	boolean	当前组件是否被禁用 取值：是-true  否-false

 <label>组件:

        为input,button,textarea组件定义相应的标注，点击该标注时会触发绑定组件的点击效果
        不支持子组件

        <label>

常用属性:

名称	类型	描述
target	string	目标组件的属性id值

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

 <rating>组件:

        评分条，表示用户使用感受的衡量标准条。
        不支持子组件

        <rating>

常用属性:

名称	类型	描述
numstars	number	设置评分条的星级总数。
rating	number	设置评分条当前评星数。
stepsize	number	设置评分条的评星步长。
indicator	boolean	设置评分条是否作为一个指示器，此时用户不可操作。

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

  <progress>组件:

        进度条，用于显示内容加载或操作处理进度。
        不支持子组件

        <progress>

常用属性:

名称	类型	描述
type	string	设置进度条的类型:  horizontal-线性  scale-ring-刻度圆环型  ring-圆环型  arc-弧形型  eclipse-日食型
percent	number	当前进度条进度 0~100
secondarypercent	number	次级进度 0~100

<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>组件:

        滑动条组件，用来快速调节设置值，如音量、亮度等。
        不支持子组件

        <slider>

常用属性:

名称	类型	描述
showtips	boolean	滑动是否由气泡提示百分比
showsteps	boolean	滑动步长标识。
step	number	滑动步长
min/max	number	最小0/最大100  存在不会生效
value	number	初始值

<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>组件:

        工具栏。放在界面底部，用于展示针对当前界面的操作选项。
        支持 <toolbar-item> 子组件。

        <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>组件:

        应用中如果有需用户关注的新事件提醒，可以采用新事件标记来标识。
        支持单个子组件 <text>

        <badge>

常用属性:

名称	类型	描述
count	number	设置消息数量
visible	boolean	是否显示消息
maxcount	number	最大消息限制，超出之后数字进行省略

<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>组件:

        列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本
        仅支持<list-item-group>和<list-item>。

        <list>

常用属性:

名称	类型	描述
scrolleffect	string	滑动效果，目前支持如下滑动效果： - spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 - fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。 - no：滑动到边缘后无效果。
divider	boolean	是否自带分隔线。 其样式参考样式列表的divider-color、divider-height、divider-length、divider-origin。

 <search>组件:

        提供搜索框组件，用于提供用户搜索内容的输入区域。
        不支持子组件

        <search>

常用属性:

名称	类型	描述
hint	string	搜索提示文字。
value	string	搜索框搜索文本值。
searchbutton	string	搜索框末尾搜索按钮文本值。

 <swiper>组件:

        滑动容器，提供切换子组件显示的能力。
        可以包含子组件。

        <swiper>

常用属性:

名称	类型	描述
autoplay	boolean	子组件是否自动播放，自动播放状态下，导航点不可操作
index	number	当前在容器中显示的子组件的索引值。
indicatordisabled	boolean	禁止用户手势操作
loop	boolean	是否开启循环滑动。
digital	boolean	是否启用数字导航点，默认为false。
scrolleffect	string	滑动效果。目前支持如下： - spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 - fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化 - none：滑动到边缘后无效果。 该属性仅在loop属性为false时生效。

练习1效果：

代码示例：如上图

练习2效果：