鴻蒙HarmonyOS實戰-ArkUI元件（mediaquery）

蜀道山QAQ發表於2024-03-27

鴻蒙UI元件

🚀一、mediaquery

🔎1.概述

媒體查詢（mediaquery）它允許根據裝置的不同特性（如螢幕大小、螢幕方向、解析度、顏色深度等）來動態地調整網頁的樣式和佈局。

透過媒體查詢，可以為不同的裝置定義不同的樣式規則，以適應不同的螢幕大小和解析度。這樣就可以實現響應式設計，使頁面在不同裝置上表現一致、完美。例如，可以透過媒體查詢設定某些元素在手機螢幕上隱藏，而在電腦螢幕上顯示等。

媒體查詢作為響應式設計的核心，在移動裝置上應用十分廣泛。媒體查詢可根據不同裝置型別或同裝置不同狀態修改應用的樣式。

媒體查詢常用於下面應用場景：

🔎2.引入與使用流程

1、匯入相關模組

import mediaquery from '@ohos.mediaquery';

2、透過matchMediaSync介面設定媒體查詢條件，儲存返回的條件監聽控制代碼listener。例如監聽橫屏事件：

let listener = mediaquery.matchMediaSync('(orientation: landscape)');

給條件監聽控制代碼listener繫結回撥函式onPortrait，當listener檢測裝置狀態變化時執行回撥函式。在回撥函式內，根據不同裝置狀態更改頁面佈局或者實現業務邏輯。

onPortrait(mediaQueryResult) {
  if (mediaQueryResult.matches) {
    // do something here
  } else {
    // do something here
  }
}

listener.on('change', onPortrait);

🔎3.媒體查詢條件

🦋3.1 語法規則

[media-type] [media-logic-operations] [(media-feature)]

例如：screen and (device-type: tv) or (resolution < 2) ：表示包含多個媒體特徵的多條件複雜語句查詢，當裝置型別為tv或裝置解析度小於2時條件成立。

🦋3.2 媒體型別

screen是一種媒體型別，用於匹配螢幕裝置，包括計算機螢幕、移動裝置螢幕和平板電腦等。在使用screen媒體型別時，可以為不同解析度的螢幕應用不同的樣式，從而最佳化UI的響應式設計。

🦋3.3 媒體邏輯操作

媒體邏輯運算子：and、or、not、only用於構成複雜媒體查詢，也可以透過comma（, ）將其組合起來。

媒體範圍運算子包括<=，>=，<，>用於比較媒體條件

🦋3.4 媒體特徵

媒體查詢中的媒體特徵是用來描述裝置的特定屬性，以便在不同的視口和螢幕大小下應用不同的樣式。

🔎4.案例

🦋4.1 Stage模型

import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import common from '@ohos.app.ability.common';

let portraitFunc = null;

@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093';
  @State text: string = 'Portrait';
  // 當裝置橫屏時條件成立
  listener = mediaquery.matchMediaSync('(orientation: landscape)');

  // 當滿足媒體查詢條件時，觸發回撥
  onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) { // 若裝置為橫屏狀態，更改相應的頁面佈局
      this.color = '#FFD700';
      this.text = 'Landscape';
    } else {
      this.color = '#DB7093';
      this.text = 'Portrait';
    }
  }

  aboutToAppear() {
    // 繫結當前應用例項
    portraitFunc = this.onPortrait.bind(this);
    // 繫結回撥函式
    this.listener.on('change', portraitFunc);
  }

  // 改變裝置橫豎屏狀態函式
  private changeOrientation(isLandscape: boolean) {
    // 獲取UIAbility例項的上下文資訊
    let context = getContext(this) as common.UIAbilityContext;
    // 呼叫該介面手動改變裝置橫豎屏狀態
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
    });
  }
  build() {
    Column({ space: 50 }) {
      Text(this.text).fontSize(50).fontColor(this.color)
      Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          this.changeOrientation(true);
        })
      Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          this.changeOrientation(false);
        })
    }
    .width('100%').height('100%')
  }
}

🦋4.2 FA模型

import mediaquery from '@ohos.mediaquery';
import featureAbility from '@ohos.ability.featureAbility';

let portraitFunc = null;

@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093';
  @State text: string = 'Portrait';
  listener = mediaquery.matchMediaSync('(orientation: landscape)'); // 當裝置橫屏時條件成立

  onPortrait(mediaQueryResult) { // 當滿足媒體查詢條件時，觸發回撥
    if (mediaQueryResult.matches) { // 若裝置為橫屏狀態，更改相應的頁面佈局
      this.color = '#FFD700';
      this.text = 'Landscape';
    } else {
      this.color = '#DB7093';
      this.text = 'Portrait';
    }
  }

  aboutToAppear() {
    portraitFunc = this.onPortrait.bind(this); // 繫結當前應用例項
    this.listener.on('change', portraitFunc); //繫結回撥函式
  }

  build() {
    Column({ space: 50 }) {
      Text(this.text).fontSize(50).fontColor(this.color)
      Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          let context = featureAbility.getContext();
          context.setDisplayOrientation(0); //呼叫該介面手動改變裝置橫豎屏狀態
        })
      Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange)
        .onClick(() => {
          let context = featureAbility.getContext();
          context.setDisplayOrientation(1); //呼叫該介面手動改變裝置橫豎屏狀態
        })
    }
    .width('100%').height('100%')
  }
}