鸿蒙系统应用开发项目化教程 课件 项目4 开发分布式相册

长沙民政职业技术学院鸿蒙应用开发项目四开发相册本项目为手机用户开发一个相册，这个相册即要有一般手机都有的基本相册功能，又要有基于分布式能力的照片共享功能。CONTENTS目录任务一完成主界面UI设计和媒体访问权限的申请1任务二

读取并展示媒体库的图片2掌握鸿蒙系统权限申请方法；掌握系统多媒体数据访问方法；掌握弹性布局的使用；掌握常用组件的使用；掌握页面状态管理和渲染控制技术知识目标能进行项目的需求分析和功能设计；能使用各种布局、组件、系统能力开发复杂应用；能力目标培养项目分析与设计能力；培养运用多种技术解决复杂问题的能力。素养目标教学目标场景描述主界面在主界面中以标签页的形式提供“照片”、“相册”两大功能，默认显示“照片”标签页。如果有照片，显示如图（a）的界面，如果没有照片，显示如图4-1（b）所示的界面。系统中没有照片时：如果没有照片，显示如图（b）所示的界面应用启动时：“照片”标签页从手机存储中获取所有图片，将这些图片按日期组织在一起，以日期倒序方式将这些图片的缩略图显示在列表中，每日的图片水平方向显示，一行显示不下换行显示，如图（a）。本项目为手机用户开发一个简易相册。利用鸿蒙OS提供的媒体访问能力查询手机中的相册和图片信息，并利用强大的UI组件展示这些数据。场景描述显示图片明细从“照片”或“相册”的图片列表中点击任何一张缩略图时，调用“显示原图”界面将原图显示出来

本项目为手机用户开发一个简易相册。利用鸿蒙OS提供的媒体访问能力查询手机中的相册和图片信息，并利用强大的UI组件展示这些数据。场景描述相册标签页“相册”标签页从手机中获取所有相册信息，以相册封面图标显示在下方列表中相册中的照片列表：将相册中的所有图片的缩略图以日期倒序方式显示在列表中。当点击相册中任何一张图片时，显示如前面所示的图片原图。点击相册标签时：显示“照片”标签页，如图（a）。点击相册图标，显示相册中的所有照片，如图（b）。本项目为手机用户开发一个简易相册。利用鸿蒙OS提供的媒体访问能力查询手机中的相册和图片信息，并利用强大的UI组件展示这些数据。任务1完成主界面UI设计和媒体访问权限的申请01任务目标及重点难点任务描述1、完成项目的创建；2、编写主界面布局代码；3、实现对媒体访问权限的申请。任务目的1、知识目标：（1）掌握Tabs组件的使用；（2）掌握动态构建UI元素的方法；（3）掌握鸿蒙系统权限申请方法；（4）掌握状态管理和条件渲染的运用2、能力目标：（1）能使用布局、组件、系统权限的申请等技术开发复杂应用；（2）培养项目分析与设计能力；（3）培养运用多种技术解决复杂问题的能力。3、素质目标：（1）培养良好的编程习惯重难点1、重点：（1）Tabs组件的使用（2）动态构建UI元素（3）状态管理和条件渲染（4）系统权限的申请2、难点：（1）Tabs组件的使用（2）系统权限的申请02010304Tabs组件实现标签页效果的组件状态管理AskUI的实现界面动态渲染的机制渲染控制根据不同的条件做出不同的界面渲染效果权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。完成任务所需知识清单01完成任务所需知识清单一个Tabs组件是一个标签页容器组件，通过标签进行内容视图切换来实现多页内容展示，每个标签页对应一个内容视图。每个内容视图是一个TabContent子组件。Tabs组件的接口定义如下：Tabs(value?:{barPosition?:BarPosition,index?:number,controller?:TabsController})Tabs组件实现标签页效果的组件Tabs接口参数说明表参数名参数类型必填参数描述barPositionBarPosition否设置Tabs的标签位置。默认值：BarPosition.Startindexnumber否设置初始标签索引。默认值：0controller否设置Tabs控制器。用于控制Tabs组件进行标签切换。不支持一个TabsController控制多个Tabs组件。01完成任务所需知识清单Tabs组件实现标签页效果的组件

Tabs的属性说明：Tabs组件除支持组件的通用属性外，还支持如下表的属性：名称参数类型描述verticalboolean设置为false是为横向Tabs，设置为true时为纵向Tabs。默认值：falsescrollableboolean设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。默认值：truebarModeBarModeTabBar布局模式，具体描述见BarMode枚举说明。默认值：BarMode.FixedbarWidthnumber|Length8+TabBar的宽度值。barHeightnumber|Length8+TabBar的高度值。animationDurationnumberTabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。默认值：20001完成任务所需知识清单Tabs组件实现标签页效果的组件

示例：实现一个如图的标签页界面。02完成任务所需知识清单

状态管理AskUI的实现界面动态渲染的机制ArkTS提供了多维度的状态管理机制，在ArkUI开发框架中，和UI相关联的数据，不仅可以在组件内使用，还可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，也可以是应用全局范围内的传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活地利用这些能力来实现数据和UI的联动。ArkTS定义了多个修饰器实现页面级变量的状态管理，具体下表：装饰器装饰内容说明@State基本数据类型，类，数组修饰的状态数据被修改时会执行自定义组件build方法中的部分UI描述（使用该状态变量的UI组件）来进行UI界面更新。@Prop基本数据类型，类，数组修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，当前组件会重新渲染。@Link基本数据类型，类，数组父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。@Observed类@Observed应用于类，表示该类中的数据变更被UI页面管理。@ObjectLink被@Observed所装饰类的对象@ObjectLink装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会重新渲染。@Provide基本数据类型，类，数组@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面重新渲染。@Consume基本数据类型，类，数组@Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。02完成任务所需知识清单

状态管理AskUI的实现界面动态渲染的机制应用级变量的状态管理使用AppStorage实现。AppStorage是整个应用程序状态的中心“数据库”，UI框架会针对应用程序创建单例AppStorage对象，并提供相应的装饰器和接口供应用程序使用。@StorageLink：@StorageLink(name)的原理类似于@Consume(name)，不同的是，该给定名称的链接对象是从AppStorage中获得的，在UI组件和AppStorage之间建立双向绑定同步数据。@StorageProp：@StorageProp(name)将UI组件数据与AppStorage进行单向同步，AppStorage中值的更改会更新UI组件中的数据，但UI组件无法更改AppStorage中的数据。AppStorage还提供了用于业务逻辑实现的API，用于添加、读取、修改和删除应用程序的状态数据，此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。PersistentStorage提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态数据，这些数据描述了应用程序运行的设备环境。03完成任务所需知识清单

渲染控制根据不同的条件做出不同的界面渲染效果ArkTS提供了条件渲染和循环渲染两种渲染控制能力。本节介绍条件渲染：使用if/else进行条件渲染，说明如下：if/else条件语句可以使用状态变量，并且在更新场景下必须使用状态变量。使用if/else可以使子组件的渲染依赖条件语句。必须在容器组件内使用。某些容器组件限制子组件的类型或数量，将if/else用于这些组件内时，这些限制将同样应用于if/else语句内创建的组件。例如，Grid容器组件的子组件仅支持GridItem组件，在Grid内使用if/else时，则if/else语句内也仅允许使用GridItem组件。if/else语句的每个分支都包含一个构建UI的描述，此类描述中必须创建一个或多个子组件。在初始渲染时，if语句会执行其中的一个条件成立的分支并将生成的子组件添加到if/else的父组件中。每当if或elseif条件语句中使用的状态变量发生变化时，条件渲染都会更新并重新进行条件评估，如果分支条件发生了变化，这意味着需要构建另一个条件分支，此时框架将删除所有以前渲染的组件，然后执行条件成立分支的UI描述，将生成的子组件添加到其父组件中。03完成任务所需知识清单

渲染控制根据不同的条件做出不同的界面渲染效果示例：状态变量count的初值为10，build函数中采用if语句进行条件渲染，根据count的值显示不同内容。当点击文字时，count减一。由于count是状态变量，它的变化会引起if条件的重新评估，这样可以看到显示内容随着count的减少不断变化。1@Entry2@Component3structIfElseExample{4@Statecount:number=105build(){6Column(){7if(this.count<0){8Text('countisnegative').fontSize(14)9}elseif(this.count%2===0){10Text('countiseven').fontSize(14)11}else{12Text('countisodd').fontSize(14)13}14}.width('100%').onClick(()=>{15this.count=this.count-1;16})17}18}04完成任务所需知识清单

权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。ATM(AccessTokenManager)是HarmonyOS上基于AccessToken构建的统一的应用权限管理能力。默认情况下，应用只能访问有限的系统资源。但某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。HarmonyOS提供了一种访问控制机制来保证这些数据或功能不会被不当或恶意使用，即应用权限。应用权限保护的对象可以分为数据和功能。数据包含了个人数据（如照片、通讯录、日历、位置等）、设备数据（如设备标识、相机、麦克风等）、应用数据。功能则包括了设备功能（如打电话、发短信、联网等）、应用功能（如弹出悬浮框、创建快捷方式等）等。应用权限是程序访问或操作某种对象的通行证，它使得系统可以规范各类应用程序的行为准则，实现用户隐私的保护机制。当应用访问或操作目标对象时，目标对象会对应用进行权限检查，如果没有对应权限，则访问或操作将被拒绝。当前，ATM提供的应用权限校验功能是基于统一管理的TokenID（Tokenidentity）。TokenID是每个应用的身份标识，ATM通过应用的TokenID来管理应用的权限。04完成任务所需知识清单

权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。（1）权限使用的基本原则在进行权限的申请和使用时，需要满足以下基本原则：应用申请的权限，都必须有明确、合理的使用场景和功能说明，确保用户能够清晰明了地知道申请权限的目的、场景、用途；禁止诱导、误导用户授权；应用使用权限必须与申请所述一致。应用权限申请遵循最小化原则，只申请业务功能所必要的权限，禁止申请不必要的权限。应用在首次启动时，避免频繁弹窗申请多个权限；权限须在用户使用对应业务功能时动态申请。用户拒绝授予某个权限时，与此权限无关的其他业务功能应能正常使用，不能影响应用的正常注册或登录。业务功能所需要的权限被用户拒绝且禁止后不再提示，当用户主动触发使用此业务功能或为实现业务功能所必须时，应用程序可通过界面内文字引导，让用户主动到“系统设置”中授权。当前不允许应用自行定义权限，应用申请的权限应该从已有的权限列表中选择。已有权限列表参看华为开发者网站的相关说明。04完成任务所需知识清单

权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。（2）权限等级说明根据接口所涉数据的敏感程度或所涉能力的安全威胁影响，ATM模块定义了不同开放范围的权限等级来保护用户隐私。能力权限等级APL（AbilityPrivilegeLevel）指的是应用的权限申请优先级的定义，不同APL等级的应用能够申请的权限等级不同。应用的权限等级可以分为三个等级：APL级别说明normal等级普通应用。默认情况下，应用的APL等级都为normal等级。normal权限允许应用访问超出默认规则外的普通系统资源。这些系统资源的开放（包括数据和功能）对用户隐私以及其他应用带来的风险很小。该类型的权限仅向APL等级为normal及以上的应用开放。system_basic等级该等级的应用服务提供系统基础服务。system_basic权限允许应用访问操作系统基础服务相关的资源。这部分系统基础服务属于系统提供或者预置的基础功能，比如系统设置、身份认证等。这些系统资源的开放对用户隐私以及其他应用带来的风险较大。该类型的权限仅向APL等级为system_basic及以上的应用开放。system_core等级该等级的应用服务提供操作系统核心能力。system_core权限涉及到开放操作系统核心资源的访问操作。这部分系统资源是系统最核心的底层服务，如果遭受破坏，操作系统将无法正常运行。鉴于该类型权限对系统的影响程度非常大，目前暂不向任何三方应用开放。04完成任务所需知识清单

权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。（3）权限类型说明根据授权方式的不同，权限类型可分为system_grant（系统授权）和user_grant（用户授权）。system_grantsystem_grant指的是系统授权类型，在该类型的权限许可下，应用被允许访问的数据不会涉及到用户或设备的敏感信息，应用被允许执行的操作不会对系统或者其他应用产生大的不利影响。如果在应用中申请了system_grant权限，那么系统会在用户安装应用时，自动把相应权限授予给应用。应用需要在应用商店的详情页面，向用户展示所申请的system_grant权限列表。user_grantuser_grant指的是用户授权类型，在该类型的权限许可下，应用被允许访问的数据将会涉及到用户或设备的敏感信息，应用被允许执行的操作可能对系统或者其他应用产生严重的影响。该类型权限不仅需要在安装包中申请权限，还需要在应用动态运行时，通过发送弹窗的方式请求用户授权。在用户手动允许授权后，应用才会真正获取相应权限，从而成功访问操作目标对象。比如说，在权限定义列表中，麦克风和摄像头对应的权限都是属于用户授权权限，列表中给出了详细的权限使用理由。应用需要在应用商店的详情页面，向用户展示所申请的user_grant权限列表。04完成任务所需知识清单

权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。（4）不同权限类型的授权流程如果应用需要获取目标权限，那么需要先进行权限申请。权限申请首先，开发者需要在配置文件中声明目标权限。权限授权如果目标权限是system_grant类型，开发者在进行权限申请后，系统会在安装应用时自动为其进行权限预授予，开发者不需要做其他操作即可使用权限。如果目标权限是user_grant类型，开发者在进行权限申请后，在运行时触发动态弹窗，请求用户授权，具体操作见user_grant权限请求授权的步骤详解。04完成任务所需知识清单

权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。（5）user_grant权限请求授权的步骤详解在应用需要获取user_grant权限时，需完成以下步骤：①在配置文件中，声明应用需要请求的权限；②将应用中需要申请权限的目标对象与对应目标权限进行关联，让用户明确地知道，哪些操作需要用户向应用授予指定的权限；③运行应用时，在用户触发访问操作目标对象时应该调用接口，精准触发动态授权弹框。该接口的内部会检查当前用户是否已经授权应用所需的权限，如果当前用户尚未授予应用所需的权限，该接口会拉起动态授权弹框，向用户请求授权；④检查用户的授权结果，确认用户已授权才可以进行下一步操作。04完成任务所需知识清单

权限申请某些情况下，应用需要访问额外的系统或其他应用的数据或功能，系统或应用也必须以明确的方式对外提供接口来共享其数据或功能。（6）示例以本章的项目为例，相册需要访问系统的媒体库资源，这需要申请ohos.permission.READ_MEDIA权限。本示例以申请ohos.permission.READ_MEDIA权限为例，说明应用中申请权限的一般做法。ohos.permission.READ_MEDIA权限是user_grant类型的权限，因此，根据前面说明，需要做两个工作：首先需在工程配置文件module.json5中申明该权限，然后还需要在运行时在用户需要访问媒体库时触发动态授权弹框，向用户请求权限。输入主题完成应用的主界面UI框架设计任务1的实施任务目标完成应用所需媒体访问权限的申请创建项目并完成应用的主界面UI框架设计01任务1的实施

创建项目启动开发工具DevEcoStudio，创建一个新项目，选择“EmptyAbility”。在项目配置对话框中设置项目名为MyAlbum，项目类型为Application，其他相关设置参见下图中的设置。完成这些选项设置后按“Finish”按钮创建项目。02任务1的实施

主界面UI设计实现主界面的标签页效果，标签页对应的内容视图由于需要读取系统的媒体库，在本步骤中暂不考虑，先用简单文本替代，只实现基本框架。主界面的代码写在ets/pages文件夹下的Index.ets文件中，页面代码如代码清单4-5所示。界面效果如下图：03任务1的实施

应用所需权限的申请为了在主界面的Tabs的内容去显示系统媒体库中的图片，需要读取媒体库数据，这需要应用具有媒体库读取权限。按照知识清单中第四个知识点“系统权限申请”的说明，读取系统媒体库需要“ohos.permission.READ_MEDIA”权限。具体步骤在工程配置文件module.json5中申明该权限，配置文件中申明权限的代码如代码清单4-2所示在代码中动态申请权限。由于是启动应用时就弹框申请权限，因此，动态申请权限的代码写在应用入口Ability的代码文件中。在ets/entryability/EntryAbility.ts文件的最前面添加如下代码，引入需要的模块：importabilityAccessCtrlfrom'@ohos.abilityAccessCtrl';再将代码清单4-3中的第12~23行的代码加入到ets/entryability/EntryAbility.ts的onWindowStageCreate方法的最后。04任务1的实施

运行调试如果开发机内存在16G以上，可以采用本地模拟器调试，如内存小于16G，应使用远程模拟器。在设备管理器对话框选择“远程模拟器”标签页，按要求登录华为账号，选择一台远程手机模拟器进行本项目的调试。由于Stage模式只要API9支持，因此，选择P50，API选择9，进行调试。04任务1的实施

运行调试如果开发机内存在16G以上，可以采用本地模拟器调试，如内存小于16G，应使用远程模拟器。在设备管理器对话框选择“远程模拟器”标签页，按要求登录华为账号，选择一台远程手机模拟器进行本项目的调试。由于Stage模式只要API9支持，因此，选择P50，API选择9，进行调试。点击开发工具的运行按钮，部署并运行app。可以看到app在模拟器中启动，并弹出了权限确认框在权限确认弹框中选择“允许”，可以看到标签页的内容视图中显示“所有图片列表”，表示app获得了读取媒体库的权限。任务拓展在本任务的权限申请逻辑中，利用了AppStorage容器中的全局变量与页面上修饰器@StorageProp修饰的变量之间的自动同步能力，并利用状态管理能力实现了页面内容与权限的同步。这种同步也可以用鸿蒙的事件机制实现。EventHub提供了UIAbility组件级别的事件机制，以UIAbility组件为中心提供了订阅、取消订阅和触发事件的数据通信能力。在使用EventHub之前，首先需要获取EventHub对象。基类Context提供了EventHub对象。代码清单4-6是ets/entryability/EntryAbility.ts文件的onWindowStageCreate的代码。第17行和第19行使用EventHub的emit方法发送"test"事件通知，并携带一个boolean型数据。在ets/pages/Index.ets页面文件中，通过EventHub对象可以订阅事件，具体做法如清单文件4-7所示。第10~14行中通过EventHub的on函数订阅了“test”事件，当收到事件通知时执行第二个参数中定义的方法代码。完成了项目主要的界面设计和应用所需权限的申请，项目可以弹出权限确认框请用户确权，根据用户许可情况显示不同内容。完成了本任务的开发之后，就可以在已有代码基础上进行媒体数据访问部分的开发了。完成的编码Tabs组件状态管理条件渲染系统权限申请学到的知识任务小结任务小结任务2读取并展示媒体库的图片02任务目标及重点难点任务描述在任务4-1的代码基础上实现从系统媒体库读取图片，并实现这些图片在界面上的展示功能。任务目的1、知识目标：（1）掌握媒体库图片的读取方法；（2）掌握弹性布局的使用；（3）掌握常用控件的使用；（4）掌握循环渲染的使用2、能力目标：（1）能编媒体库访问程序（2）能编写自适应布局界面3、素质目标：（1）培养良好的编程习惯重难点1、重点：（1）媒体库图片读取；（2）弹性布局（3）循环渲染2、难点：（1）媒体库图片读取；（2）循环渲染1423弹性布局循环渲染媒体库的读取Image组件知识清单完成任务所需知识清单01完成任务所需知识清单本任务用弹性布局组件Flex实现图片列表的显示，关于Flex组件的详细说明参见项目2中任务2-1的知识清单中关于布局组件的说明。弹性布局Flex组件

02完成任务所需知识清单下面代码清单是实现循环渲染的语句的基本语法：循环渲染通过循环渲染（ForEach）从数组中获取数据，并为每个数据项创建相应的组件，可实现数据的动态展示效果并减少代码复杂度。

ForEach(arr:any[],itemGenerator:(item:any,index?:number)=>void,keyGenerator?:(item:any,index?:number)=>string)参数名参数类型必填参数描述arrany[]是必须是数组，允许设置为空数组，空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数，例如arr.slice(1,3)。itemGenerator(item:any,index?:number)=>void是生成子组件的lambda函数，为数组中的每一个数据项创建一个或多个子组件，单个子组件或子组件列表必须包括在大括号“{...}”中。keyGenerator(item:any,index?:number)=>string否用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时，其键值不得更改，当数组中的数据项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，不提供时框架默认使用index+JSON.stringify(item)的方式生成。为了使开发框架能够更好地识别数组更改，提高性能，建议开发者提供自定义的键值生成器。如将数组反向时，如果没有提供键值生成器，则ForEach中的所有节点都将重建。02完成任务所需知识清单循环渲染通过循环渲染（ForEach）从数组中获取数据，并为每个数据项创建相应的组件，可实现数据的动态展示效果并减少代码复杂度。

ForEach函数的使用说明：ForEach必须在容器组件内使用。生成的子组件应当是允许包含在ForEach父容器组件中的子组件。允许子组件生成器函数中包含if/else条件渲染。键值生成器必须针对每个数据生成唯一的值，如果键值相同，将导致键值相同的UI组件被框架忽略，从而无法在父容器内显示。itemGenerator函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。02完成任务所需知识清单循环渲染通过循环渲染（ForEach）从数组中获取数据，并为每个数据项创建相应的组件，可实现数据的动态展示效果并减少代码复杂度。

示例：下面代码清单中，数组arr中存放了3个整数，ForEack遍历该数组，将数组中的每个元素生成为页面中的一个Text组件和一个Divider组件。1@Entry2@Component3structIndex{4@Statearr:number[]=[10,20,30]56build(){7Column({space:5}){8ForEach(this.arr,(item:number)=>{9Text(`itemvalue:${item}`).fontSize(18)10Divider().strokeWidth(2).color(Color.Black)11},(item:number)=>item.toString())12}13}14}03完成任务所需知识清单媒体库读取系统媒体库资源包括音频、视频和图片资源，本章只涉及图片资源方面的知识。媒体库涉及用户个人数据信息，所以应用首先需要向用户申请媒体库读写操作权限才能保证功能的正常运行。

涉及的权限如下表所示：权限名说明授权方式ohos.permission.READ_MEDIA允许应用读取用户外部存储中的媒体文件信息。user_grantohos.permission.WRITE_MEDIA允许应用读写用户外部存储中的媒体文件信息。user_grantohos.permission.MEDIA_LOCATION允许应用访问用户媒体文件中的地理位置信息。user_grant03完成任务所需知识清单媒体库读取系统媒体库资源包括音频、视频和图片资源，本章只涉及图片资源方面的知识。媒体库涉及用户个人数据信息，所以应用首先需要向用户申请媒体库读写操作权限才能保证功能的正常运行。

由于本任务只需要读取媒体数据，因此需要申请ohos.permission.READ_MEDIA权限。权限申请的步骤及代码参见任务4-1的知识清单及任务的实施部分。在获得用户对读取媒体的权限许可后，就可以开始读取媒体数据了。基本的开发步骤为：①导入mediaLibrary模块以使用媒体库相关接口。②通过getContext获取应用上下文。③获取媒体库实例。关键代码如代码清单4-10所示。04完成任务所需知识清单Image组件Image是图片组件，支持本地图片和网络图片的渲染展示。

Image是图片组件，支持本地图片和网络图片的渲染展示。Image的接口语法为：Image(src:string|PixelMap|Resource)参数说明见下表说明。参数名参数类型必填参数描述srcstring|

PixelMap

|

Resource是图片的数据源，支持本地图片和网络图片。当使用相对路径引用图片资源时，例如Image("common/test.jpg")，不支持跨包/跨模块调用该Image组件，建议使用$r方式来管理需全局使用的图片资源。-支持的图片格式包括png、jpg、bmp、svg和gif。-支持datashare://路径前缀的字符串，用于访问通过dataability提供的图片路径。图片加载前需要。-支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。04完成任务所需知识清单Image组件Image是图片组件，支持本地图片和网络图片的渲染展示。

示例：图片组件属性示例。先将两张图片复制到entry模块的src/main/resources/base/media下，再编写如代码4-3（扫描二维码）所示的代码。第一步：读取媒体库图片第二步：在“照片”标签内容视图中显示所有图片第三步：调试“照片”标签的功能第五步：显示选中相册中的所有照片第四步：在“相册”标签内容视图中显示所有相册封面第六步：调试“相册”标签的功能任务2的实施任务1实现了基本UI框架，界面中用一个Tabs组件呈现了两个标签页，但标签页的内容视图中还没有用图片填充，本任务将在此基础上完成用媒体库图片填充内容视图的功能。任务目标实施步骤01任务2的实施

读取媒体库图片选择entry模块的main文件夹并点击鼠标右键，选择“New”，再选“Directory”