9afce6f6创建于 2025年5月7日历史提交
/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { promptAction } from '@kit.ArkUI';

const COLUMN_SPACE = 10; // column间隙

/**
 * 自定义封装公共文本组件
 */
@Component
export struct CommonText {
  @State textFour: AttributeModifier<TextAttribute> = new TextModifier();

  build() {
    Row() {
      Text($r('app.string.dynamicattributes_text_one'))
        .attributeModifier(this.textFour)

      Text($r('app.string.dynamicattributes_text_two'))
        .attributeModifier(this.textFour)

      Text($r('app.string.dynamicattributes_text_three'))
        .attributeModifier(this.textFour)
    }
    .width($r('app.string.dynamicattributes_max_size'))
  }
}

/**
 * 自定义封装底部bar组件
 */
@Component
export struct BottomBar {
  @State buttonModifier: AttributeModifier<ButtonAttribute> = new ButtonModifier();
  @State barModifier: AttributeModifier<RowAttribute> = new BarModifier();
  @State buttonName: Resource = $r('app.string.dynamicattributes_settlement');
  @State barType: BarType = BarType.SHOPPING_CART;

  build() {
    Row() {
      Column() {
        if (this.barType === BarType.DETAILS) {
          Button($r('app.string.dynamicattributes_add_cart'))
            .attributeModifier(this.buttonModifier)
            .margin({ right: $r('app.float.dynamicattributes_float_10') })
            .onClick(() => {
              promptAction.showToast({ message: $r('app.string.dynamicattributes_only_show') });
            })
        }
      }

      Button(this.buttonName)
        .attributeModifier(this.buttonModifier)
        .onClick(() => {
          promptAction.showToast({ message: $r('app.string.dynamicattributes_only_show') });
        })
    }
    .attributeModifier(this.barModifier)
  }
}

/**
 * 自定义封装图文组件
 */
@Component
export struct ImageText {
  @State item: string | Resource = $r('app.string.dynamicattributes_text');
  @State textOneContent: string | Resource = $r('app.string.dynamicattributes_text');
  @State textTwoContent: string | Resource = $r('app.string.dynamicattributes_text');
  @State textThreeContent: string | Resource = $r('app.string.dynamicattributes_text');
  @State imageSrc: PixelMap | ResourceStr | DrawableDescriptor = $r('app.media.icon');
  // TODO:知识点:接受外部传入的AttributeModifier类实例,可以只定制部分组件,选择性传入参数。
  @State textOne: AttributeModifier<TextAttribute> = new TextModifier();
  @State textTwo: AttributeModifier<TextAttribute> = new TextModifier();
  @State textThree: AttributeModifier<TextAttribute> = new TextModifier();
  @State imageModifier: AttributeModifier<ImageAttribute> = new ImageModifier();
  @State checkboxModifier: AttributeModifier<CheckboxAttribute> = new CheckboxModifier();

  build() {
    Row() {
      Row() {
        Checkbox()
          .attributeModifier(this.checkboxModifier)

        // TODO:知识点:AttributeModifier不支持入参为CustomBuilder或Lambda表达式的属性,且不支持事件和手势。image和text只能单独通过入参传递使用
        Image(this.imageSrc)
          .attributeModifier(this.imageModifier)
      }

      .margin({ right: $r('app.float.dynamicattributes_float_10'), bottom: $r('app.float.dynamicattributes_float_15') })

      Column({ space: COLUMN_SPACE }) {
        // TODO:知识点:将入参的AttributeModifier类实例与系统组件绑定
        Text(this.item)
          .attributeModifier(this.textTwo)

        Text(this.textThreeContent)
          .attributeModifier(this.textThree)

        CommonText({ textFour: new TextModifier() })

        Text(this.textOneContent)
          .attributeModifier(this.textOne)
          .fontColor($r('app.color.dynamicattributes_orange'))
      }
    }
    .padding({ top: $r('app.float.dynamicattributes_float_5') })
    .width($r('app.string.dynamicattributes_max_size'))
    .height($r('app.string.dynamicattributes_max_size'))
  }
}

/*
  自定义class实现button的AttributeModifier接口,用于初始化
*/
export class ButtonModifier implements AttributeModifier<ButtonAttribute> {
  applyNormalAttribute(instance: ButtonAttribute): void {
    instance.width($r('app.float.dynamicattributes_float_30'));
    instance.height($r('app.float.dynamicattributes_float_15'));
  }
}

/*
  自定义class实现text的AttributeModifier接口,用于初始化
*/
class TextModifier implements AttributeModifier<TextAttribute> {
  applyNormalAttribute(instance: TextAttribute): void {
    instance.fontSize($r('app.float.dynamicattributes_float_12'));
    instance.fontColor($r('app.color.dynamicattributes_orange'));
    instance.textAlign(TextAlign.Center);
    instance.border({ width: $r('app.float.dynamicattributes_float_1'), color: $r('app.color.dynamicattributes_orange'), style: BorderStyle.Solid });
    instance.margin({ right: $r('app.float.dynamicattributes_float_10') });
  }
}

/*
  自定义class实现image的AttributeModifier接口,用于初始化
*/
class ImageModifier implements AttributeModifier<ImageAttribute> {
  applyNormalAttribute(instance: ImageAttribute): void {
    instance.width($r('app.float.dynamicattributes_float_100'));
    instance.height($r('app.float.dynamicattributes_float_100'));
  }
}

/*
  自定义class实现row的AttributeModifier接口,用于初始化
*/
class BarModifier implements AttributeModifier<RowAttribute> {
  applyNormalAttribute(instance: RowAttribute): void {
    instance.width($r('app.float.dynamicattributes_float_30'));
    instance.height($r('app.float.dynamicattributes_float_15'));
  }
}

/*
  自定义class实现checkbox的AttributeModifier接口,用于初始化
*/
class CheckboxModifier implements AttributeModifier<CheckboxAttribute> {
  applyNormalAttribute(instance: CheckboxAttribute): void {
    instance.width($r('app.float.dynamicattributes_float_15'));
    instance.height($r('app.float.dynamicattributes_float_15'));
  }
}

/*
  枚举底部bar类型
*/
export enum BarType {
  SHOPPING_CART, // 购物车
  DETAILS, // 详情页
}