【HarmonyOS Next】原生沉浸式界面

背景

在實際項目中，為了軟件使用整體色調看起來統一，一般頂部和底部的顏色需要鋪滿整個手機屏幕。因此，這篇帖子是介紹設置的方法，也是應用沉浸式效果。如下圖：底部的綠色延伸到上面的狀態欄和下面的導航欄

UI

在鴻蒙應用中，全屏UI元素分為狀態欄、應用界面和導航欄。

一般實現應用沉浸式效果由兩種方式：

窗口全屏布局方案：調整布局系統為全屏布局，界面元素延伸到狀態欄和導航條區域實現沉浸式效果。
組件延伸方案：組件布局在應用界面區域，通過接口方法延伸到狀態欄和導航欄。

窗口全屏布局方案

新建展示頁面，并使用@StorageProp定義頁面內容的頂部偏移和底部偏移屬性

@Entry
@Component
struct Index {
  @StorageProp('bottomRectHeight')
  bottomRectHeight: number = 0;
  @StorageProp('topRectHeight')
  topRectHeight: number = 0;

  build() {
    Row() {
      Column() {
        Row() {
          Text('DEMO-ROW1').fontSize(40)
        }.backgroundColor(Color.Orange).padding(20)

        Row() {
          Text('DEMO-ROW2').fontSize(40)
        }.backgroundColor(Color.Orange).padding(20)

        Row() {
          Text('DEMO-ROW3').fontSize(40)
        }.backgroundColor(Color.Orange).padding(20)

        Row() {
          Text('DEMO-ROW4').fontSize(40)
        }.backgroundColor(Color.Orange).padding(20)

        Row() {
          Text('DEMO-ROW5').fontSize(40)
        }.backgroundColor(Color.Orange).padding(20)

        Row() {
          Text('DEMO-ROW6').fontSize(40)
        }.backgroundColor(Color.Orange).padding(20)
      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#008000')
      // top數值與狀態欄區域高度保持一致；bottom數值與導航條區域高度保持一致
      .padding({ top: px2vp(this.topRectHeight), bottom: px2vp(this.bottomRectHeight) })
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

在EntryAbility的onWindowStageCreate方法中，調用window.Window.setWindowLayoutFullScreen方法設置窗口全屏。

let windowClass: window.Window = windowStage.getMainWindowSync();
let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
      console.info('Succeeded in setting the window layout to full-screen mode.');
    }).catch((err: BusinessError) => {
      console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
    });1.
2.
3.
4.
5.
6.
7.

為了避免構件被擋住，根據導航條和狀態欄的高度，修改bottomRectHeight和topRectHeight的數值。

//獲取導航欄高度
    let bottomRectHeight = windowClass
      .getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      .bottomRect
      .height;
    AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
    // 獲取狀態欄區域高度
    let topRectHeight = windowClass
      .getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      .topRect
      .height;
    AppStorage.setOrCreate('topRectHeight', topRectHeight);1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

再設置頁面監聽，動態修改bottomRectHeight和topRectHeight的數值。

windowClass.on('avoidAreaChange', (data) => {
      if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
        let topRectHeight = data.area.topRect.height;
        AppStorage.setOrCreate('topRectHeight', topRectHeight);
      } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        let bottomRectHeight = data.area.bottomRect.height;
        AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
      }
    });1.
2.
3.
4.
5.
6.
7.
8.
9.

EntryAbility完整代碼

僅需要修改onWindowStageCreate方法

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
    // 獲取應用主窗口
    let windowClass: window.Window = windowStage.getMainWindowSync();
    // 設置窗口全屏
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => {
      console.info('Succeeded in setting the window layout to full-screen mode.');
    }).catch((err: BusinessError) => {
      console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
    });
    //獲取導航欄高度
    let bottomRectHeight = windowClass
      .getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      .bottomRect
      .height;
    AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
    // 獲取狀態欄區域高度
    let topRectHeight = windowClass
      .getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      .topRect
      .height;
    AppStorage.setOrCreate('topRectHeight', topRectHeight);

    // 注冊監聽函數，動態獲取避讓區域數據
    windowClass.on('avoidAreaChange', (data) => {
      if (data.type === window.AvoidAreaType.TYPE_SYSTEM) {
        let topRectHeight = data.area.topRect.height;
        AppStorage.setOrCreate('topRectHeight', topRectHeight);
      } else if (data.type == window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
        let bottomRectHeight = data.area.bottomRect.height;
        AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight);
      }
    });

  }1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

組件延伸方案

使用expandSafeArea方法來實現。

types：配置擴展安全區域的類型。SafeAreaType枚舉類型，SYSTEM是系統默認非安全區域，包括狀態欄、導航欄；CUTOUT是設備的非安全區域，例如劉海屏或挖孔屏區域；KEYBOARD是軟鍵盤區域，組件不避讓鍵盤。
edges：擴展安全區域的方向。

代碼

通過顏色對比，可以看出組件延伸效果。

column：背景顏色設置為橘色，從圖片可以看出只能在安全區域內顯示。
list：背景顏色設置為黃色，從圖片可以看出已經延伸至導航條和狀態欄了。
Text：背景顏色設置成紅色，就可以看到整個組件的滑動過程.

@Entry
@Component
struct ExamplePage {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(Color.Red)
          }

        }, (item: number) => item.toString())
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({
        strokeWidth: 2,
        color: 0xFFFFFF,
        startMargin: 20,
        endMargin: 20
      }) // 每行之間的分界線
      .edgeEffect(EdgeEffect.Spring) // 邊緣效果設置為Spring
      .width('90%')
      .backgroundColor(Color.Yellow)
      // List組件的視窗范圍擴展至導航條。
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Orange)
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

總結

如果不是全部界面都需要實現沉浸式布局時，可以通過組件延伸方案去實現部分組件的沉浸式布局。

posted on 2024-12-24 11:07 鐘子翔閱讀(68) 評論(0) 收藏舉報來源

刷新頁面返回頂部