HarmonyOS Next 一多开发(下)

我们在上节讲到了响应式布局的断点，接下来接着介绍响应式布局。

响应式布局

媒体查询

常用于两种场景：

1.针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。

2.当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。

核心用法

导入模块---->创建监听器---->注册监听器---->移除监听器

// 1. 导入 模块
import mediaquery from '@ohos.mediaquery';

// 2. 创建监听器 
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)');
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)');

// 3. 注册监听器
// 组件即将创建出来
aboutToAppear(): void {
  // 添加回调函数
  listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
    console.log('changeRes:', JSON.stringify(res))
    // 执行逻辑
  })
  listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {
    console.log('changeRes:', JSON.stringify(res))
    // 执行逻辑
  })
}

// 4. 移除监听器
// 即将销毁
aboutToDisappear(): void {
  // 移除监听 避免性能浪费
  listenerXS.off('change')
  listenerSM.off('change')
}

具体代码

// 1. 导入媒体查询模块
import mediaquery from '@ohos.mediaquery';

// 2. 创建监听器
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)')
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)')
const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)')
const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(840vp<=width)')


@Entry
@Component
struct Demo09 {
  @State breakPoint: string = ''
  @State bgColor: Color = Color.White

  aboutToAppear(): void {
    // 3. 注册监听器
    listenerXS.on('change', (res: mediaquery.MediaQueryResult)=>{
      // 尺寸符合要求则结果为true {"matches":true,"media":"(0vp<=width<320vp)"}
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'XS'
        this.bgColor = Color.Red
      }
    })
    listenerSM.on('change', (res: mediaquery.MediaQueryResult)=>{
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'SM'
        this.bgColor = Color.Green
      }
    })
    listenerMD.on('change', (res: mediaquery.MediaQueryResult)=>{
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'MD'
        this.bgColor = Color.Blue
      }
    })
    listenerLG.on('change', (res: mediaquery.MediaQueryResult)=>{
      // console.log('mkLog', JSON.stringify(res))
      if(res.matches){
        this.breakPoint = 'LG'
        this.bgColor = Color.Pink
      }
    })
  }

  aboutToDisappear(): void {
    // 4. 移除监听器
    listenerXS.off('change')
    listenerSM.off('change')
    listenerMD.off('change')
    listenerLG.off('change')
  }

  build() {
    RelativeContainer() {
      Text(this.breakPoint)
        .id('Demo09HelloWorld')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
    .expandSafeArea([SafeAreaType.SYSTEM])
    .backgroundColor(this.bgColor)
  }

}

使用查询结果

事件中通过 AppStorage.set(key,value)的方式保存当前断点值，需要使用的位置通过 AppStorage 来获取即可。

// 1. 导入模块
import mediaquery from '@ohos.mediaquery';

// 2. 创建监听器
const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)')
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)')
const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)')
const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(800vp<=width)')


@Entry
@Component
struct Index {
  // @State curBp: string = ''

  @StorageProp('currentBreakPoint') currentBreakPoint: string = 'sm'

  aboutToAppear(): void {
    listenerXS.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
        if(res.matches){
          // this.curBp = 'xs'
          AppStorage.set('currentBreakPoint', 'xs')
        }
    })

    listenerSM.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
      if(res.matches){
         // this.curBp = 'sm'
        AppStorage.set('currentBreakPoint', 'sm')
      }
    })

    listenerMD.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
      if(res.matches){
        // this.curBp = 'md'
        AppStorage.set('currentBreakPoint', 'md')
      }
    })

    listenerLG.on('change', (res: mediaquery.MediaQueryResult)=>{
      console.log('changeRes:', JSON.stringify(res))
      if(res.matches){
        // this.curBp = 'lg'
        AppStorage.set('currentBreakPoint', 'lg')
      }
    })
  }

  aboutToDisappear(): void {
    listenerXS.off('change')
    listenerSM.off('change')
    listenerMD.off('change')
    listenerLG.off('change')
  }


  build() {
    Column(){
      Text(this.currentBreakPoint).fontSize(50).fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

系统工具-BreakpointSystem

先设置断点类并导出

import mediaQuery from '@ohos.mediaquery'

interface Breakpoint {
  name: string
  size: number
  mediaQueryListener?: mediaQuery.MediaQueryListener
}

export const BreakpointKey: string = 'currentBreakpoint'

export class BreakpointSystem {
  private currentBreakpoint: string = 'md'
  private breakpoints: Breakpoint[] = [
    { name: 'xs', size: 0 }, { name: 'sm', size: 320 },
    { name: 'md', size: 600 }, { name: 'lg', size: 840 }
  ]

  public register() {
    this.breakpoints.forEach((breakpoint: Breakpoint, index) => {
      let condition: string
      if (index === this.breakpoints.length - 1) {
        condition = '(' + breakpoint.size + 'vp<=width' + ')'
      } else {
        condition = '(' + breakpoint.size + 'vp<=width<' + this.breakpoints[index + 1].size + 'vp)'
      }
      console.log(condition)
      breakpoint.mediaQueryListener = mediaQuery.matchMediaSync(condition)
      breakpoint.mediaQueryListener.on('change', (mediaQueryResult) => {
        if (mediaQueryResult.matches) {
          this.updateCurrentBreakpoint(breakpoint.name)
        }
      })
    })
  }

  public unregister() {
    this.breakpoints.forEach((breakpoint: Breakpoint) => {
      if (breakpoint.mediaQueryListener) {
        breakpoint.mediaQueryListener.off('change')
      }
    })
  }

  private updateCurrentBreakpoint(breakpoint: string) {
    if (this.currentBreakpoint !== breakpoint) {
      this.currentBreakpoint = breakpoint
      AppStorage.set<string>(BreakpointKey, this.currentBreakpoint)
      console.log('on current breakpoint: ' + this.currentBreakpoint)
    }
  }
}

使用断点类

// 1. 导入断点查询类
import { BreakpointSystem, BreakpointKey} from '../common/BreakpointSystem'

@Entry
@Component
struct Demo10 {

  // 5. 获取断点值
  @StorageProp(BreakpointKey) currentBreakpoint: string = 'sm'

  // 2. 实例化断点查询类
  breakpointSystem = new BreakpointSystem()

  // 3. 注册事件监听
  aboutToAppear(): void {
    this.breakpointSystem.register()
  }

  // 4. 移除事件监听
  aboutToDisappear(): void {
    this.breakpointSystem.unregister()
  }

  build() {
    RelativeContainer() {
      Text(this.currentBreakpoint)
        .id('Demo10HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

系统工具-BreakPointType

下面这份代码拷贝到 BreakpointSystem.ets中

/*
 定义一个接口类型
 键: 断点值
 值: 泛型
*/
declare interface BreakPointTypeOption<T> {
  xs?: T
  sm?: T
  md?: T
  lg?: T
  xl?: T
  xxl?: T
}

/*
 对外导出一个类
 在实例化的时候接收一个泛型
*/
export class BreakPointType<T> {
  // 选项对象
  options: BreakPointTypeOption<T>

  constructor(option: BreakPointTypeOption<T>) {
    this.options = option
  }

  getValue(currentBreakPoint: string) {
    if (currentBreakPoint === 'xs') {
      return this.options.xs
    } else if (currentBreakPoint === 'sm') {
      return this.options.sm
    } else if (currentBreakPoint === 'md') {
      return this.options.md
    } else if (currentBreakPoint === 'lg') {
      return this.options.lg
    } else if (currentBreakPoint === 'xl') {
      return this.options.xl
    } else if (currentBreakPoint === 'xxl') {
      return this.options.xxl
    } else {
      return undefined
    }
  }
}

用法

// 1. 导入BreakPointType
import { BreakPointType } from 'xxx'

@entry
@Component
struct ComB {
  // 2. 通过 AppStorage 获取断点值
  @StorageProp('currentBreakpoint') currentBreakpoint: CurrentBreakpoint = 'xs'

  build() {
    Column() {
      Text(this.currentBreakpoint)
    }
    .width(200)
    .height(200)
    .backgroundColor(
      // 3. 实例化 设置不同断点的取值，并通过 getValue 根据当前断点值对应的值
      new BreakPointType({
        xs: Color.Red,
        sm: Color.Yellow,
        md: Color.Blue,
        lg: Color.Green
      }).getValue(this.currentBreakpoint)
    )
  }
}

栅格布局

栅格组件的本质是：将组件划分为有规律的多列，通过调整【不同断点】下的【栅格组件的列数】，及【子组件所占列数】实现不同布局。

核心用法

// 行
GridRow(属性){
  // 列
  GridCol(属性){
    
  }
}

示例

@Entry
@Component
struct Demo12 {
  @State currentBreakPoint: string = ''

  build() {
    Column() {
      // GridRow 默认支持 4 个断点
      //  xs:(0vp<=width<320vp) 智能穿戴，比如手表
      //  sm:(320vp<=width<600vp) 手机
      //  md:(600vp<=width<840vp) 折叠屏
      //  lg:(840vp<=width) 平板
      GridRow({
        breakpoints: {
          value: ['320vp', '600vp', '840vp']
        },
        gutter: 10, // 子项之间的间距
        // columns: 12, // 设置一行的总列数, 默认: 一行12列
        // 可以根据断点值, 设置每一行的列数
        columns: {
          xs: 2, // 超小屏, 比如: 手表
          sm: 4, // 小屏幕, 比如: 手机竖屏
          md: 8, // 中等屏幕, 比如: 折叠屏, 手机横屏
          lg: 12, // 大屏幕, 比如: pad
        }
      }) {
        ForEach(Array.from({ length: 2 }), (item: string, index: number) => {
          GridCol({
            // 设置一列占得份数
            // span: 2,
            // 支持不同断点分别设置不同的占用列数
            span: {
              xs: 1,
              sm: 1,
              md: 1,
              lg: 1
            },
            // offset 偏移列数 默认为 0
            // offset: 1, // 偏移一列
            // 支持不同断点分别设置偏移不同的列数
            offset: {
              sm: 1
            }
          }) {
            Text(index.toString())
          }
          .height(100)
          .border({ width: 1, color: Color.Black })
        })
      }
      .width('90%')
      .height('90%')
      .border({ width: 1, color: Color.Orange })
      // 断点发生变化时触发回调
      .onBreakpointChange((breakPoint) => {
        console.log('breakPoint', breakPoint)
        this.currentBreakPoint = breakPoint
      })

      Text(`断点值: ${this.currentBreakPoint}`)
        .fontSize(30)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#dcdfe8')
  }
}

功能级一多开发（目前了解即可）

前提：功能开发的适配主要体现在需要适配不同范类的应用，比如既要适配手机和平板，也需要适配智能穿戴设备，如果是同泛类产品，系统能力一致，无需考虑多设备上应用功能开发的差异。

系统能力：系统能力（即SystemCapability，缩写为SysCap）指操作系统中每一个相对独立的特性，如蓝牙，WIFI，NFC，摄像头等，都是系统能力之一。每个系统能力对应多个API，随着目标设备是否支持该系统能力共同存在或消失。

如何适配系统能力

通过import动态导入，配合try/catch

import controller from '@ohos.nfc.controller'
try {
    controller.enableNfc()
    console.log("controller enableNfc success")
} catch (busiError) {
    console.log("controller enableNfc busiError: " + busiError)
}

工程级一多

一多模式下，官方推荐在开发过程中采用"三层工程架构"，其实就是把项目拆分成不同类型的模块，再通过模块之间的引用组合，最终实现应用功能，拆分规范如下：

commons(公共能力层)：common设计为hsp包，新建module时选择Shared Library,用于存放公共基础能力合集，比如工具库，公共配置等

features(基础特性层)：feature设计为hsp包，新建module时选择 Shared Library用于存放应用中相对独立的各个功能的UI以及业务逻辑实现

products(产品定制层)：product为产品层，里面放置phone模块，也就是入口模块，用于针对不同设备形态进行功能和特性集成，作为应用入口