页面基类或者页面钩子函数

针对页面做统一处理，比如统一统计页面曝光时间。目前能想到的做法是抽离BasePage，注入自定义组件。

@Component  
export struct BasePage {  
  
  @BuilderParam builderPage?: () => void;  
  
  build() {  
    this.builderPage?.()  
  }  
}

但是在使用时有限制，@Builder构建组件不能使用this。

@Entry  
@Component  
struct Index {  
  @State message: string = '首页';  
  
  @Builder renderBlank() {  
    Column(){  
      Tabs({ barPosition: BarPosition.End}) {  
        TabContent() {  
          HomeComponent()  
        }.tabBar(this.tabBuilder($r('app.media.startIcon'), '首页'))  
      }  
      .width('100%')  
    }.width('100%')  
  }  
  
  build() {  
    Stack(){  
      BasePage({  
        builderPage: this.renderBlank  
      })  
    }  
  }  
  
  @Builder tabBuilder(icon: string | Resource, iconText: string) {  
    Column() {  
      Image(icon)  
        .width(30)  
        .height(30)  
        .margin({ top: 5})  
  
      Text(iconText)  
        .fontSize(12)  
        .margin({ top: 5, bottom: 5})  
    }.width('100%')  
  }  
}

组件之间是无法继承的, 想咨询页面基类的实现推荐。

HarmonyOS

superinsect

2024-10-11 12:05:33

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

可以在外层重新定义个组件引入进来，demo参考：

@Component  
export struct BasePage {  
  @Builder  
  customBuilder() {  
  }  
  
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam  
  @BuilderParam builderPage: () => void = this.customBuilder;  
  build() {  
    Column(){  
      this.builderPage()  
    }  
  }  
}  
import { BasePage } from './BasePage'  
  
@Component  
struct renderText{  
  @Builder tabBuilder(icon: string | Resource = "", iconText: string = "") {  
    Column() {  
      Text(iconText)  
        .fontSize(12)  
        .margin({ top: 5, bottom: 5 })  
    }.width('100%')  
  }  
  build() {  
  
    Column(){  
      Text('')  
      Tabs() {  
        TabContent() {  
          Text('').fontSize(30)  
        }.tabBar(this.tabBuilder('','收藏'))  
        TabContent() {  
          Text('').fontSize(30)  
        }.tabBar(this.tabBuilder('','爱好'))  
      }  
    }  
  }  
}  
  
@Entry  
@Component  
struct Index {  
  @Builder renderBlank() {  
    Column() {  
      Text("renderBlank")  
      renderText()  
    }  
  }  
  build() {  
    Column() {  
      BasePage({ builderPage: this.renderBlank })  
    }  
  }  
}

2024-10-11 17:13:06

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

页面基类或者页面钩子函数

订阅鸿蒙技术特刊，精选内容抢先看