页面开发

本章介绍图片美化应用中如何使用”一多”的布局能力，完成页面层级的一套代码、多端适配。

布局能力

本节由不同页面展开，介绍每个页面区域使用到的具体布局能力，帮助开发者从零到一进行图片美化应用的开发。

相册

相册页显示所有图片。观察相册页在折叠屏上的UX设计图，可以进行如下设计：

• 将相册页划分为2个区域，效果图如下：

相册页的2个基础区域介绍及实现方案如下表所示：

区域编号	简介	实现方案
1	顶部返回	使用[自适应布局]实现左侧返回图标及文字，右侧图标。
2	相册列表	使用[网格]实现相册列表。

示意图如下：

当组件区域宽度变化时，可以通过[onAreaChange] API获取组件的相关信息，并调整相册列数。

// features/albumView/src/main/ets/views/AlbumView.ets
// 监控组件区域变化
Flex({ direction: FlexDirection.Column }) {
  // ...
  .onAreaChange((oldValue: Area, newValue: Area) => {
    this.gridColumn = this.getGridColumn(newValue.width);
  })
  // ...
}

// features/albumView/src/main/ets/views/AlbumView.ets
// 列数计算公式
getGridColumn(value: Length): number {
  return Math.floor(2 * ((parseInt(JSON.stringify(value)) / 360) - 1) + 4);
}

大图预览

大图预览显示一张图片。观察大图预览页在折叠屏上的UX设计图，可以进行如下设计：

• 将大图预览页划分为4个区域，效果图如下：

相册页的4个基础区域介绍及实现方案如下表所示：

区域编号	简介	实现方案
1	顶部返回	使用[自适应布局]实现左侧返回图标及文字，右侧图标。
2	图片展示	使用[Image]组件展示图片。
3	相册滚动展示	使用[列表]实现相册滚动展示。
4	图片操作	使用[自适应布局]实现图标自适应摆放。

示意图如下：

图片编辑

在折叠屏中，可以切换图片区域与编辑操作区域的摆放位置。观察图片编辑页在折叠屏上的UX设计图，可以进行如下设计：

• 将图片编辑页划分为3个区域，效果图如下：

• 区域2与区域3使用[Flex]组件实现左右摆放与上下摆放的切换

图片编辑的3个基础区域介绍及实现方案如下表所示：

区域编号	简介	实现方案
1	顶部返回	使用[自适应布局]实现左侧返回图标及文字，右侧图标。
2	图片展示	使用[Image]组件展示图片。
3	编辑操作栏	使用[Flex]组件实现编辑操作栏的自适应摆放。

示意图如下：

交互开发

对于不同类型的智能设备，用户可能有不同的交互方式，如通过触摸屏、鼠标、触控板等。如果针对不同的交互方式单独做适配，会增加开发工作量同时产生大量重复代码。为解决这一问题，我们统一了各种交互方式的API，即实现了[交互归一]。常见的交互有触屏事件、键鼠事件、焦点事件。图片美化涉及的交互主要涉及图片的缩放。

双指缩放

在触控屏与触控板上进行双指捏合或张开可以实现缩放功能。本文中有两处涉及双指缩放：

• 相册页，双指缩放控制相册中图片列数变更。

• 大图预览页，双指缩放控制图片的宽高变更。

  双指缩放使用[PinchGesture] API实现， 当触发双指缩放时，可以实时获取缩放比例参数，传入[scale] API（控制组件缩放的API）即可调整图片的比例。

// features\pictureView\src\main\ets\view\CenterPart.ets
Row() {
  Column() {
    Image($r('app.media.photo'))
      .autoResize(true)
  }
}
// ...
// 组件缩放 API
.scale({ x: this.scaleValue, y: this.scaleValue, z: 1 })
// 双指缩放 API
.gesture(PinchGesture({ fingers: FINGER_NUM })
  .onActionUpdate((event: GestureEvent | undefined) => {
    if (event) {
      this.scaleValue = this.pinchValue * event.scale;
    }
  })
  .onActionEnd(() => {
    this.pinchValue = this.scaleValue;
  }))