一起学鸿蒙呀~~

【代码】BaseRecyclerViewAdapterHelper4的使用。

【代码】TabLayout 和 ViewPager2。

本篇Codelab将介绍如何使用基础组件Slider，通过拖动滑块调节应用内字体大小。实现两个页面的UX：主页面和字体大小调节页面。拖动滑块改变字体大小系数，列表页和调节页面字体大小同步变化。往右拖动滑块字体变大，反之变小。字体大小支持持久化存储，再次启动时，应用内字体仍是调节后的字体大小。

在移动互联网蓬勃发展的今天，移动应用给我们生活带来了极大的便利，这些便利的本质在于数据的互联互通。因此在应用的开发中数据存储占据了非常重要的位置，HarmonyOS应用开发也不例外。本文将为您介绍HarmonyOS提供的数据管理能力之一首选项。首选项为应用提供Key-Value键值型的数据存储能力，支持应用持久化轻量级数据，并对其进行增删改查等。该存储对象中的数据会被缓存在内存中，因此它可以获得更快的存取速度，下面详细介绍下首选项的开发过程。

本篇Codelab是基于ArkTS的声明式开发范式实现的样例，主要介绍了数据请求和touch事件的使用。数据请求。列表下拉刷新。列表上拉加载。使用List组件实现数据列表。使用Tabs、TabContent组件实现内容视图切换。网络数据请求。触摸事件onTouch的使用。

日常生活中我们使用应用程序看新闻、发送消息等，都需要连接到互联网，从服务端获取数据。例如，新闻应用可以从新闻服务器中获取最新的热点新闻，从而给用户打造更加丰富、更加实用的体验。那么要实现这样一种能实时从服务端获取数据的场景，就依赖于HTTP数据请求。HTTP即超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。

本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了Web组件如何加载本地和云端H5小程序。所加载的页面是由HTML+CSS+JavaScript实现的完整小应用。Web组件加载H5页面。ArkTS和H5页面交互。使用Web组件加载H5页面。使用ArkTS与H5页面进行交互。

相信大家都遇到过这样的场景，有时候我们点击应用的页面，会跳转到一个类似浏览器加载的页面，加载完成后，才显示这个页面的具体内容，这个加载和显示网页的过程通常都是浏览器的任务。ArkUI为我们提供了Web组件来加载网页，借助它我们就相当于在自己的应用程序里嵌入一个浏览器，从而非常轻松地展示各种各样的网页。本文将为您介绍Web组件一些常用API的使用。

本篇Codelab主要介绍组件动画animation属性设置。当组件的某些通用属性变化时，可以通过属性动画实现渐变效果，提升用户体验。本Codelab使用的display接口处于mock阶段，在预览器上使用会显示白屏现象，可选择在真机或模拟器上运行。自定义下拉刷新通过自定义List组件RefreshComponent实现。在List容器中添加自定义刷新头部组件和其它的需要刷新部件，RefreshComponent提供了头部样式设置，刷新部件样式设置和刷新回调方法设置。

属性动画，是最为基础的动画，其功能强大、使用场景多，应用范围较广。一、页面布局发生变化。例如添加、删除部分组件元素。二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素，或者将部分元素从一端移动到另外一端。三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。

点击兴趣爱好选项，通过customDialogController.open方法弹出自定义弹窗，根据需要选择相应的兴趣爱好，效果如图所示：在view目录下，点击鼠标右键 > New > ArkTS File，新建一个ArkTS文件，然后命名为CustomDialogWidget子组件。在CustomDialogWidget的aboutToAppear方法，通过manager.getStringArrayValue方法获取本地资源数据进行初始化。...return;if (!

在我们日常使用应用的时候，可能会进行一些敏感的操作，比如删除联系人，这时候我们给应用添加弹窗来提示用户是否需要执行该操作，如下图所示：弹窗是一种模态窗口，通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前，用户无法操作其他界面内容。确认类：例如警告弹窗AlertDialog。选择类：包括文本选择弹窗TextPickerDialog 、日期滑动选择弹窗DatePickerDialog、时间滑动选择弹窗TimePickerDialog等。您可以根据业务场景，选择不同类型的弹窗。

Swiper组件的使用。List组件的使用。Video组件的使用。Slider组件的使用。如何实现自定义视频控制器。

在手机、平板或是智慧屏这些终端设备上，媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。以视频功能为例，在应用开发过程中，我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件，我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频，也包括查看我们存储在本地的视频内容。

State、@Prop、@Link、@Watch、@Provide、@Consume的使用。List组件的使用。自定义弹窗的使用。Slider组件的使用。

在应用中，界面通常都是动态的。如图1所示，在子目标列表中，当用户点击目标一，目标一会呈现展开状态，再次点击目标一，目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。图1展开/收起目标项ArkUI作为一种声明式UI，具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时，状态的变化会触发组件自动更新。所以在ArkUI中，我们只需要通过一个变量来记录状态。当改变状态的时候，ArkUI就会自动更新界面中受影响的部分。

由于“首页”和“我的”页面中有多处图片和文字的组合，因此提取出ItemData类。在MainViewModel.ets文件中对页面使用的资源进行定义，在MainViewModel.ets文件中定义数据。others?: Resource;.........Button、Image、TextInput、Text等基础组件的使用。Column、Row、List、Tabs等容器组件的使用。

在我们常用的应用中，经常会有视图内容切换的场景，来展示更加丰富的内容。比如下面这个页面，点击底部的页签的选项，可以实现“首页”和“我的”两个内容视图的切换。ArkUI开发框架提供了一种页签容器组件Tabs，开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样，不同的页面设计页签不一样，可以把页签设置在底部、顶部或者侧边。本文将详细介绍Tabs组件的使用。

在我们常用的手机应用中，经常会见到一些数据列表，如设置页面、通讯录、商品列表等。下图中两个页面都包含列表，“首页”页面中包含两个网格布局，“商城”页面中包含一个商品列表。上图中的列表中都包含一系列相同宽度的列表项，连续、多行呈现同类数据，例如图片和文本。常见的列表有线性列表（List列表）和网格布局（Grid列表）：为了帮助开发者构建包含列表的应用，ArkUI提供了List组件和Grid组件，开发者使用List和Grid组件能够很轻松的完成一些列表页面。

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。了解布局容器的主轴和交叉轴，主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。属性名称描述设置子组件在主轴方向上的对齐格式。alignItems设置子组件在交叉轴方向上的对齐格式。