HarmonyOS 鸿蒙Next 自定义属性如何通过 attributeModifier 复用样式

// Index.ets
import { PageOneTmp } from './PageOne'
import { pageTwoTmp } from './PageTwo'
import { pageThreeTmp } from './PageThree'
import { NvDialog } from './navigationDialog'
import { NavigationModifier, UIObserver } from '@kit.ArkUI'
class MyModifier extends NavigationModifier {
applyNormalAttribute(instance: NavigationModifier): void {
// instance为Button的属性对象，设置正常状态下属性值
instance.backgroundColor(Color.Red)
.borderColor(Color.Black)
.borderWidth(2)
}
applyPressedAttribute(instance: NavigationModifier): void {
// instance为Button的属性对象，设置按压状态下属性值
instance.backgroundColor(Color.Green)
.borderColor(Color.Orange)
.borderWidth(5)
}
}
@Entry
@Component
struct NavigationExample {
@Provide(‘pageInfo’) pageInfo: NavPathStack = new NavPathStack()
@State modifier: MyModifier = new MyModifier();
aboutToAppear(): void {
// this.initObserver()
}
initObserver(){
let observer:UIObserver = this.getUIContext().getUIObserver();
observer.on(‘navDestinationUpdate’, { navigationId: “navigationId” }, (info: NavDestinationInfo)=>{
if(info.state === 3){
console.info(“状态3关闭监听”)
this.closeMyObserver()
}
});
// observer.on(‘navDestinationUpdate’, { navigationId: “navigationId” }, this.NavigationStateChange);
}
NavigationStateChange(info: NavDestinationInfo){
if(info.state === 3){
console.info(“状态3关闭监听”)
this.closeMyObserver()
}
}
closeMyObserver(){
let observer:UIObserver = this.getUIContext().getUIObserver();
observer.off(‘navDestinationUpdate’, { navigationId: “navigationId” });
}
// 创建路由
@Builder
PageMap(name: string) {
if (name === ‘pageOne’) {
PageOneTmp()
} else if (name === ‘pageTwo’) {
pageTwoTmp()
}  else if (name === ‘pageThree’) {
pageThreeTmp()
}
else if (name === ‘dialog’) {
NvDialog()
}
}
build() {
Navigation(this.pageInfo) {
Column() {
Button(‘StartTest’, { stateEffect: true, type: ButtonType.Capsule })
.width(‘80%’)
.height(40)
.margin(20)
.onClick(() => {
this.pageInfo.pushPath({ name: ‘pageOne’, param: null, onPop: (popInfo: PopInfo)=>{
console.info(“调用出栈”)
} }); // 将name指定的NavDestination页面信息入栈。
})
    Button(<span class="hljs-string">'弹窗'</span>, { stateEffect: <span class="hljs-literal">true</span>, type: ButtonType.Capsule })
      .onClick(()=&gt;{
        <span class="hljs-keyword">this</span>.pageInfo.pushPath({ name: <span class="hljs-string">'dialog'</span>, param: <span class="hljs-literal">null</span>, onPop: (popInfo: PopInfo)=&gt;{
          console.info(<span class="hljs-string">"调用出栈"</span>)
        } }); <span class="hljs-comment">// 将name指定的NavDestination页面信息入栈。</span>
      })
  }
}
.attributeModifier(<span class="hljs-keyword">this</span>.modifier)
.title(<span class="hljs-string">'NavIndex'</span>).navDestination(<span class="hljs-keyword">this</span>.PageMap)
.id(<span class="hljs-string">'navigationId'</span>)
}
}