代码片段
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来调用子组件的事件或访问其属性
参考：父组件使用Ref 调用子组件实例方法 | 华为开发者联盟 (huawei.com)
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、子组件调用父组件的方法
6、Slot
7、defaultSlot
8、Image组件svg图片显示模糊问题
在Image组件添加属性objectFit(ImageFit.Contain),因为默认时ImageFit.Cover
Image($r('app.media.icon_right'))
.width('18vp')
.height('18vp')
.objectFit(ImageFit.Contain)
.margin({ left: '10vp' })
9、Image组件svg图片改变颜色
在Image组件添加属性fillColor，仅对svg图片有效。（是不是可以做动态颜色？）
Image($r('app.media.icon_right'))
.width('18vp')
.height('18vp')
.fillColor('#ccc')
.objectFit(ImageFit.Contain)
.margin({ left: '10vp' })
10、获取对象的某个属性
鸿蒙中限制了使用[key]直接从对象上获取属性的写法，可以使用如下方法：
static getValue<T>(key: string) {
return Reflect.get(MyLikesModel, key) as T;//MyLikesModel须是对象类型，如果是类，在Api12下也不会报错
}
//调用
getValue<boolean>('initialized')
11、emitter的getListenerCount方法，获取指定事件的订阅数
developer.huawei.com/consumer/cn…
let count = emitter.getListenerCount("eventId");
12、Image的objectFit
13、组件的onAppear事件「组件通用事件」
组件挂载后第一次显示触发此方法，是一个组件通用事件，相应的还有onDisAppear等。
挂载卸载事件-通用事件-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
可用场景：在使用LazyForEach时（或者ForEach），子组件会被同时加载好几个，会同时触发这些组件的aboutToAppear生命周期函数，如果我们只想在组件显示时做一些事情，此方法很有用
class ListItem{
//xxx
}
List(){
ForEach(this.arr,(item:ListItem,index:number)=>{
ListItem(){
//你的组件
}
.onAppear(()=>{
//可以做你的业务逻辑
})
},(item:ListItem)=>item.toString())
}
14、组件的onAreaChange/onSizeChange/onVisibleAreaChange事件「组件通用事件」
- onAreaChange
- onSizeChange
- onVisibleAreaChange
15、LayoutWeight(1)「组件通用属性」
使组件自适应沾满剩余空间
developer.huawei.com/consumer/cn…
16、postCardAction
用户卡片和提供方的交互
postCardAction-UI界面-ArkTS API-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
17、FormLink/FormMenu
- FormLink：静态卡片交互组件
- FormMenu：提供AddFormMenuItem方法，封装了一个“添加至桌面”菜单，用于实现应用内长按组件生成“添加至桌面”菜单，点击该菜单，触发卡片添加至桌面操作。
FormMenu-卡片-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者
import { AddFormMenuItem } from '@kit.ArkUI';
18、Button设置渐变
direction：表示渐变方向（设置angle后不生效）
angle：角度，0点钟顺时针为正，默认180
color：后面的数字是此位置的色值（百分比），而不是透明度。
Row() {
Button('修改')
.width(100)
.height(50)
.linearGradient({ direction: GradientDirection.Bottom, colors: [[0xFC4246, 0.0], [0xFC6342, 1.0]] })
}
.margin({ top: 20 })
Row() {
Button('test')
.width(200)
.height(50)
.backgroundColor('#00000000')
.linearGradient({
angle: 90,
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
}.margin({ top: 20 })
