基于原生能力的组件封装

// 自定义class实现button的AttributeModifier接口 
export class ButtonModifier implements AttributeModifier<ButtonAttribute> { 
  // 通过ButtonAttribute标识进行属性设置的组件的类型为button组件 
  applyNormalAttribute(instance: ButtonAttribute): void { 
    instance.height($r('app.float.float_30')); 
    instance.width($r('app.float.float_90')); 
    instance.linearGradient({ 
      angle: LINEAR_ANGLE, 
      colors: [[$r('app.color.buttonColor'), 0.5], [$r('app.color.orange'), 1.0]] 
    }); 
  }

// 自定义class实现row组件的AttributeModifier接口 
export class BarModifier implements AttributeModifier<RowAttribute> { 
  applyNormalAttribute(instance: RowAttribute): void { 
    instance.height($r('app.float.float_60')); 
    instance.width($r('app.string.max_size')); 
    instance.padding($r('app.float.float_15')); 
    instance.backgroundColor($r('app.color.barColor')); 
    instance.justifyContent(FlexAlign.End); 
    instance.border({ 
      width: { top: $r('app.float.float_1') }, 
      color: { top: $r('sys.color.ohos_id_color_component_normal') }, 
    }); 
  } 
}

// 自定义封装底部组件 
@Componentexport 
struct BottomBar { 
  // 定义button组件的Modifier 
  @State buttonModifier: AttributeModifier<ButtonAttribute> = new ButtonModifier(); 
  // 定义row组件的Modifier 
  @State barModifier: AttributeModifier<RowAttribute> = new BarModifier(); 
  @State buttonName: Resource = $r('app.string.settlement'); 
  @State barType: BarType = BarType.SHOPPING_CART; 
 
  build() { 
    Row() { 
      if (this.barType === BarType.DETAILS) { 
        Button($r('app.string.add_cart')) 
          // 绑定对应的动态属性方法 
          .attributeModifier(this.buttonModifier) 
          .margin({ right: $r('app.float.float_10') }) 
      } 
      Button(this.buttonName) 
        // 绑定对应的动态属性方法 
        .attributeModifier(this.buttonModifier) 
    } 
    .attributeModifier(this.barModifier) 
  } 
}
// 底部购买区(在页面引用自定义封装组件) 
BottomBar({ 
  buttonModifier: new ButtonModifier(), 
  barModifier: new BarModifier(), 
  buttonName: $r('app.string.settlement'), 
  barType: BarType.DETAILS 
})

import observer from '@ohos.arkui.observer'; 
 
// 通过监听当前state状态来执行相应操作 
@State @Watch('states') ste: number = 0 
states() { 
  this.controller.start() 
} 
 
// 在aboutToAppear生命周期中获取当前NavDestination组件状态 
aboutToAppear() 
observer.on('navDestinationUpdate', (info) => { 
  this.ste = info.state 
}); 
}

// 在子组件中通过@Prop来接受父组件的值 
// 通过监听isPlayer值的变化来判断前后台的切换 
@Prop @Watch('changeVideo')isPlayer: boolean = false 
changeVideo() { 
  if (this.isPlayer) { 
    this.controller.start() 
    console.log('console'); 
  } else { 
    this.controller.pause() 
  } 
}
// 通过onPageShow生命周期来感知页面状态，通过变量传递来通知子组件执行相应的操作 
@StateisPlayer: boolean = false 
onPageShow(): 
void { 
  this.isPlayer = true 
} 
onPageHide(): 
void { 
  this.isPlayer = false 
}

// 通过感知组件在屏幕中的显示区域面积变化触发事件 
.onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => { 
  if (isVisible && currentRatio >= 1.0) { 
    this.controller.start() 
  } 
  if (!isVisible && currentRatio <= 0.0) { 
    this.controller.pause() 
  } 
})

// 构造LocalStorage实例(余额：balance) 
let localStorageA: LocalStorage = new LocalStorage(); 
localStorageA.setOrCreate('balance', 100); 
// 使LocalStorage可从@Component组件访问 
@Entry(localStorageA)

// 构造LocalStorage实例(转账金额：transferred) 
let localStorageB: LocalStorage = new LocalStorage(); 
localStorageB.setOrCreate('transferred', 0); 
@Component 
export struct Second { 
  // @LocalStorageLink变量装饰器与LocalStorage中的'balance'属性建立双向绑定 
  @LocalStorageLink('balance') balance: number = 100; 
  Button('提交').type(ButtonType.Normal) 
  .onClick(()=>{ 
  // 余额减去金额 
  this.balance -= this.transferred 
  this.pageInfos.pushPath({ name: 'Third' }) 
}) 
} 
@Component 
struct FormItem { 
  // @LocalStorageLink变量装饰器与LocalStorage中的'transferred'属性建立双向绑定 
  @LocalStorageLink('transferred') transferred: number = 0; 
  build() { 
    Column() { 
      TextInput({ text: this.value, placeholder: this.placeholder }) 
        .onChange((value) =>{ 
          // 转账金额赋值 
          this.transferred = Number(value) 
        }) 
    }.alignItems(HorizontalAlign.Start) 
  } 
}

@Component 
export struct Third { 
  // @LocalStorageLink变量装饰器与LocalStorage中的'transferred'属性建立双向绑定 
  @LocalStorageLink('balance') balance: number = 100; 
 
  ListItem() { 
    // 使用变量 
    FormItem({ label: '账户余额', placeholder: '余额' + this.balance }) 
  } 
}

import { CommonModifier } from '@ohos.arkui.modifier'; 
 
class MyModifier extends CommonModifier { 
  applyNormalAttribute(instance: CommonAttribute): void { 
    super.applyNormalAttribute?.(instance); 
  } 
 
  // 组件点击时触发的样式 
  public setGroup1(): void { 
    // 边框颜色 
    this.borderColor($r('app.color.click_color')) 
    // 边框宽度 
    this.borderWidth(1) 
    // 背景颜色 
    this.backgroundColor($r('app.color.click_bg_color')) 
  } 
 
  // 组件加载时的样式 
  public setGroup2(): void { 
    this.backgroundColor($r('app.color.start_color')) 
  } 
}

@Entry 
@Component 
struct Index { 
  // 自定义modifier，并设置width、height属性值 
  @State myModifier: CommonModifier = new MyModifier().width(100).height(100).margin(10) 
 
  build() { 
    MyText({ modifier: this.myModifier })// click事件内调用setGroup1 
      .onClick(() => { 
        // modifier使用as作为类型断言 
        (this.myModifier as MyModifier).setGroup1() 
      }) 
  } 
}

@Component 
struct MyText { 
  @Link modifier: CommonModifier 
  build() { 
    Text('灰色') 
      .attributeModifier(this.modifier as MyModifier)// 组件加载时样式 
      .onAppear(() => { 
        (this.modifier as MyModifier).setGroup2() 
      }) 
  } 
}