HarmonyOS Navigation 分栏模式下内容页面如何设置一个默认背景图片呢

Navigation 分栏模式下内容页面如何设置一个默认背景图片，希望能提供一个demo

HarmonyOS

Heiang

2025-01-09 14:43:59

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

参考下demo:

import deviceInfo from '@ohos.deviceInfo';
import { display } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State showRightIcon: boolean = false;
  @State isTablet:string = 'tablet'
  aboutToAppear(): void {
    // let displayClass: Array<display.Display> = [];
    // display.getAllDisplays((err: BusinessError, data: Array<display.Display>) => {
    //   displayClass = data;
    //   const errCode: number = err.code;
    //   if (errCode) {
    //     console.error(`Failed to obtain all the display objects. Code: ${err.code}, message: ${err.message}`);
    //     return;
    //   }
    //   console.info('Succeeded in obtaining all the display objects. Data: ' + JSON.stringify(data));
    // });
    this.checkIsFoldable();
  }

  checkIsFoldable() {
    this.isTablet = deviceInfo.deviceType
    if (this.isTablet === 'tablet') {
      this.showRightIcon = true
    } else {
      this.showRightIcon = false;
    }
  }
  build() {
    Column() {
      Navigation() {
        Row() {
          Column() {
            TextInput({ placeholder: 'search...' })
              .width('90%')
              .height(40)
              .backgroundColor('#FFFFFF')
              .margin({ top: 8 })

            List({ space: 12, initialIndex: 0 }) {
              ForEach(this.arr, (item: number) => {
                ListItem() {
                  Text('' + item)
                    .width('90%')
                    .height(72)
                    .backgroundColor('#FFFFFF')
                    .borderRadius(24)
                    .fontSize(16)
                    .fontWeight(500)
                    .textAlign(TextAlign.Center)
                }
              }, (item: number) => item.toString())
            }
            .scrollBar(BarState.Off)
            .height(324)
            .width('100%')
            .margin({ top: 12, left: '10%' })
          }.width(this.showRightIcon ? '50%' : '100%').height('100%')

          if (this.showRightIcon) {
            Column() {
              Image($r('app.media.app_icon')).width(50).height(50)
            }.width('50%').height('100%').justifyContent(FlexAlign.Center)
          }

        }.width('100%').height('100%')
      }
      .mode(NavigationMode.Stack)
      .title('首页')
      .hideTitleBar(true)
      .hideToolBar(true)
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}