主頁面設置組件

import { MyButtonModifier } from '../datastore/MyButtonModifier';@Entry
@ComponentV2
struct MainPage {// 支持用狀態裝飾器修飾，行為和普通的對象一致@Local modifier: MyButtonModifier = new MyButtonModifier();build() {Column() {Button("Button").attributeModifier(this.modifier)}.width('100%')}
}

新建頁面構建屬性

//默認態（Normal）、按壓態（Pressed）、焦點態（Focused）、禁用態（Disabled）、選擇態（Selected）
export class MyButtonModifier implements AttributeModifier<ButtonAttribute> {applyNormalAttribute(instance: ButtonAttribute): void {// instance為Button的屬性對象，設置正常狀態下屬性值instance.backgroundColor('#17A98D').borderColor('#707070').borderWidth(2)}applyPressedAttribute(instance: ButtonAttribute): void {// instance為Button的屬性對象，設置按壓狀態下屬性值instance.backgroundColor('#2787D9').borderColor('#FFC000').borderWidth(5)}applyFocusedAttribute(instance: ButtonAttribute): void {// instance為Button的屬性對象，設置焦點狀態下屬性值instance.backgroundColor(Color.Brown).borderColor(Color.Orange).borderWidth(9)}applyDisabledAttribute(instance: ButtonAttribute): void {// instance為Button的屬性對象，設置禁用狀態下屬性值instance.backgroundColor(Color.Gray).borderColor(Color.Black).borderWidth(1)}applySelectedAttribute(instance: ButtonAttribute): void {// instance為Button的屬性對象，設置選中狀態下屬性值instance.backgroundColor(Color.Red).borderColor(Color.Blue).borderWidth(3)}
}