鸿蒙开发：代码片段记录

1、页面返回监听

@Entry修饰的页面的生命周期onBackPress

onBackPress(){
    //do something
}

2、返回两次退出应用

@Entry修饰的页面的生命周期onBackPress，配合context.terminateSelf()

let isBack:boolean = true;
//返回监听
  onBackPress() {
    if (isBack) {
      promptAction.showToast({
        message: '再按一次退出',
        duration: 2000,
      });
      isBack = false;
​
      setTimeout(() => {
        isBack = true
      }, 3000)
      return true;
    } else {
      const context = getContext(this) as common.UIAbilityContext
      context.terminateSelf(); // 终止程序
      return false;
    }
  }

3、Tabs中TabContent切换监听

因为TabContent包的是组件，而且只会在第一次打开时触发组件的aboutToAppear，页面销毁时同时触发所有Tab的aboutToDisappear。

• 可以使用TabContent的onWillShow和onWillHide来做监听

TabContent() {
  WorksIndex({ childrenRef: this.childrenRef })
}
.tabBar(this.TabBuilder(TabId.ACHIEVEMENT))
.onWillHide(() => {
  this.onWorksIndexHide();
})

• 可以在Tabs的onChange事件里做事件触发（可以使用emitter）

Tabs(){

}
.onChange((index) => {
     this.currentPage = index
     emitter.emit('onTabsChange', { data: { index } })
  })

4、父组件使用 Ref 调用子组件的方法或属性

在上例，监听到Tabs切换，有时候需要在TabContent的子组件中做一些事情，我们可以使用Ref来调用子组件的事件或访问其属性

class ComponentRef <T> {
  value?: T

  export(ref: T) {
    this.value = ref
  }

  static useRef<T>() {
    return new ComponentRef<T>()
  }
}

interface RefType{ change: Function }

//父组件
@Entry
@Component
struct Parent {
  childrenRef = ComponentRef.useRef<RefType>();//创建Ref

  build() {
    Column({ space: 20 }) {
      Children({ childrenRef: this.childrenRef })//传递给子组件
      Button("change children").onClick(() => {
        this.childrenRef.value?.change()
      })
    }
    .height("100%")
    .width("100%")
    .justifyContent(FlexAlign.Center)
  }
}


//子组件
@Component
struct Children {
  @State text: string = "ok"
  childrenRef?: ComponentRef<RefType>  //Ref

  ref():RefType {
    return {
      change: () => this.text = "change"
    }
  }
  
  aboutToAppear() {
    //别忘了export
    this.childrenRef?.export(this.ref())
  }

  build() {
    Column() {
      Text(this.text)
    }
  }
}

5、Image组件svg图片显示模糊问题

在Image组件添加属性objectFit(ImageFit.Contain),因为默认时ImageFit.Cover

Image($r('app.media.icon_right'))
            .width('18vp')
            .height('18vp')
            .objectFit(ImageFit.Contain)
            .margin({ left: '10vp' })

6、Image组件svg图片改变颜色

在Image组件添加属性fillColor，仅对svg图片有效。

Image($r('app.media.icon_right'))
            .width('18vp')
            .height('18vp')
            .fillColor('#ccc')
            .objectFit(ImageFit.Contain)
            .margin({ left: '10vp' })

7、LayoutWeight(1)组件通用属性

使组件自适应沾满剩余空间