选择头像Button的实现

// ChooseAvatar.ets
import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct Index {  
  // 对应路径 /resources/base/media/下新增 account.png，否则会报错找不到
  @State url: ResourceStr = $r('app.media.account');

  build() {
    Column() {
      // 声明FunctionalButton
      FunctionalButton({
        params: {
          // OpenType.CHOOSE_AVATAR表示Button为选择头像类型
          openType: functionalButtonComponentManager.OpenType.CHOOSE_AVATAR,
          label: '',
          // 调整Button样式
          styleOption: {
            styleConfig: new functionalButtonComponentManager.ButtonConfig()
              .type(ButtonType.Normal)
              .backgroundImage(this.url)
              .backgroundImageSize(ImageSize.Cover)
              .width(80)
              .height(80)
              .backgroundColor('#E5E5E5')
          }
        },
        // OpenType为“CHOOSE_AVATAR”时，回调必须选择“onChooseAvatar”
        controller: new functionalButtonComponentManager.FunctionalButtonController().onChooseAvatar((err, data) => {
          if (err) {
            // 错误日志处理
            hilog.error(0x0000, "testTag", "error： %{public}d %{public}s", err.code, err.message);
            return;
          }
          // 成功日志处理
          this.url = data.avatarUri!;
        })
      })
    }
    .padding({ top: 200 })
    .height('100%')
    .width('100%')
  }
}