【每日学点鸿蒙知识】页面反向传值、图片撑满问题、清除Web缓存、Refresh支持swiper、POP颜色没效果

1、HarmonyOS 页面反向传值怎么传？

从A页面跳转到B页面，当从B页面返回时，想给A页面传递参数，如何传递

新建三个页面分别是Index2、APage、BPage，实现了A传给B，B传给A，互传的功能。代码如下：

import { router } from '@kit.ArkUI';

@Entry
@Component
struct APage {
  @State message: string = '我是A';
  fromPage : Record<string,string> = router.getParams() as Record<string,string>
  @StorageLink('flag') flag : string = ''
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text("跳转到B")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            if (this.fromPage==null) {
              router.pushUrl({
                url:"pages/BPage",
                params:{data:"BPage"}
              })
            } else{
              if (this.fromPage!=null) {
                console.log("我在A页面,存入了" + this.fromPage['data'].toString())
                AppStorage.set('flag', this.fromPage['data'].toString())
                console.log("我在A页面,输出flag：" + this.flag)
              }
              router.pushUrl({
                url:"pages/BPage",
                params:{data:"BPage"}
              })
            }
          })
        Text("跳转到Index2")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            router.pushUrl({
              url:"pages/Index2"
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}


import { router } from '@kit.ArkUI';

@Entry
@Component
struct BPage {
  @State message: string = '我是B';
  @StorageLink('flag') flag : string = ''
  fromPage : Record<string,string> = router.getParams() as Record<string,string>
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text("跳转到A")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            if (this.fromPage!=null) {
              console.log("我在B页面,存入了"+this.fromPage['data'].toString())
              AppStorage.set('flag',this.fromPage['data'].toString())
              console.log("我在B页面,输出flag："+this.flag)
            }
            router.pushUrl({
              url:"pages/APage",
              params:{data:"APage"}
            })
          })
        Text("跳转到Index2")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            router.pushUrl({
              url:"pages/Index2"
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index2 {
  @State message: string = '当前页面';

  @StorageLink('flag') @Watch('onChange') flag : string = ''

  onChange(){
    console.log(this.flag)
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            if (this.flag=='') {
              console.log('flag初始化失败')
            } else {
              router.pushUrl({
                url:"pages/"+this.flag
              })
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2、HarmonyOS 本地图片没有设置宽高，图片会撑满整个屏幕？

image的规格为：不设置宽高会默认撑满父组件。ObjectFIt仅限制图片显示效果，并不影响组件宽高。

可以通过PixelMap获取图片的原始宽高，利用该宽高预先设置image的大小。

3、HarmonyOS 怎么在非web页面清除web缓存？

可以通过设置全局来处理解决不依赖具体web页面,参照如下demo:

import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct Index5 {
  @State message: string = 'Hello World';
  webcontroller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Row() {
      Column() {
        //某一个web组件赋值给全局
        Web({ src: 'https://www.huawei.com', controller: this.webcontroller })
          .onControllerAttached(() => {
            GlobalContext.getContext().setObject('webcontroller', this.webcontroller)
          })
          .height(200)
          .width('100%')
        //清除缓存
        Button('removeCache')
          .onClick(() => {
            try {
              let webcontroller = GlobalContext.getContext().getObject('webcontroller') as web_webview.WebviewController
              webcontroller.removeCache(true);
            } catch (error) {
              let e: business_error.BusinessError = error as business_error.BusinessError;
              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

export class GlobalContext {
  private constructor() {
  }

  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

4、HarmonyOS Refresh支持swiper吗？

使用swiper做了一个上下滑动页面，需要有下拉刷新功能，貌似refrsh不支持swiper

参考demo：

@Entry
@Component
struct SwiperItemLeak {
  private swiperController: SwiperController = new SwiperController()
  private curSwiperIndex = 0;
  private list: number[] = []
  @State isStopSwiperSlide: boolean = false;
  @State positionY: number = 0;
  private isRefresh: boolean = false;

  aboutToAppear(): void {
    for (let i = 1; i <= 10; i++) {
      this.list.push(i);
    }
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Text(this.positionY.toString())
        .width('100%')
        .height('10%')
        .textAlign(TextAlign.Center)
        .fontSize(30)
      Swiper(this.swiperController) {
        ForEach(this.list, (item: number) => {
          Text(item.toString())
            .width('100%')
            .height('100%')
            .backgroundColor(0xAFEEEE * ((item + 1) / 0x0f))
            .textAlign(TextAlign.Center)
            .fontSize(30)
        })
      }
      .vertical(true)
      .width("100%")
      .height("100%")
      .cachedCount(3)
      .index(0)
      .autoPlay(false)
      .indicator(false)
      .effectMode(EdgeEffect.None)
      .loop(false)
      .duration(100)
      .disableSwipe(this.isStopSwiperSlide)
      .displayCount(1)
      .itemSpace(0)
      .curve(Curve.Linear)
      .backgroundColor(Color.Red)
      .position({ y: this.positionY })
      .onChange((index: number) => {
        console.info(index.toString())
        this.curSwiperIndex = index;
      })
      .parallelGesture(
        PanGesture()
          .onActionStart((event: GestureEvent) => {
          })
          .onActionUpdate((event: GestureEvent) => {
            if (event && this.curSwiperIndex == 0) {
              if (event.offsetY > 0) {
                this.positionY = event.offsetY;
                this.isStopSwiperSlide = true;
                this.isRefresh = true;
              }
              else {
                this.positionY = 0;
                this.isStopSwiperSlide = false;
                this.isRefresh = false;
              }
            }
          })
          .onActionEnd(() => {
            if (this.isRefresh) {
              setTimeout(() => {
                this.isStopSwiperSlide = false;
                this.positionY = 0;
                this.isRefresh = false;
              }, 1000);
            }
          })
      )
    }.width('100%').height("100%").backgroundColor(Color.Pink)
  }
}

5、HarmonyOS POP颜色设置了没有效果？

.bindPopup(this.isShowPopu, {
  builder: this.customPop(),
  radius: 2,
  placement: Placement.Bottom,
  arrowOffset: 60,
  popupColor: $r('app.color.color_232934'),
  autoCancel: true,
  onStateChange: (e) => {
    if (!e.isVisible) {
      this.isShowPopu = false
    }
  },
})

/**充电订单 充电帮助的pop*/
@Builder customPop() {
  Column() {
    Text('充电订单').fontSize(16).fontColor(Color.White).padding(16).border({width: {bottom: '1px'}, color: Color.White})
      .onClick(()=>{
        JumpUtil.execJump({url: JumpUtil.getH5Url(H5HostType.APPHOST, Order.CHARGEORDER_LIST)})
        this.isShowPopu = false
      })
    Text('充电帮助').fontSize(16).fontColor(Color.White).padding(16)
      .onClick(()=>{
        JumpUtil.execJump({url: VehicleService.CHARGE_HELP.path.replace('%s', 'take')})
        this.isShowPopu = false
      })
  }.backgroundColor(Color.Transparent)
}

想去除模糊背景填充效果，需将backgroundBlurStyle设置为BlurStyle.NONE。模拟器和真机均可正常显示。

.bindPopup(this.customPopup, {
  builder: this.customPop(), // 气泡的内容
  popupColor: Color.Red, // 气泡的背景色
  backgroundBlurStyle: BlurStyle.NONE,
  radius: 2,
  placement: Placement.Bottom,
  arrowOffset: 60,
  onStateChange: (e) => {
    if (!e.isVisible) {
      this.isShowPopu = false
    }
  }
})