华为HarmonyOS实现跨多个子体系融合的场景化服务 -- 2 选择头像Button ...

场景介绍

本章节将向您介绍怎样使用选择头像Button功能，开发者可调用对应Button组件快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示。
前提条件

拜见开发前提。
效果图展示

单击头像按钮拉起半模态选择头像页面来设置头像。

开发步调

• 导入Scenario Fusion Kit模块以及干系公共模块。
  
  1. [/code][list=1]
  2. [*]import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit'
  3. [*]import { hilog } from '@kit.PerformanceAnalysisKit';
  4. [/list]
  6. [*]在容器中声明FunctionalButton，指定Button的openType，并设置对应的回调函数，代码如下：
  7. [code]

  复制代码
  
  
  • @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;
    
  • }
    
  • // 成功日志处置惩罚
    
  • hilog.info(0x0000, "testTag", "succeeded in choosing avatar");
    
  • this.url = data.avatarUri!;
    
  • })
    
  • })
    
  • }
    
  • .padding({ top: 200 })
    
  • .height('100%')
    
  • .width('100%')
    
  • }
    
  • }
    
  阐明
     
  
  
  
  • openType参数填写“functionalButtonComponentManager.OpenType.CHOOSE_AVATAR”指定Button为选择头像范例。
    
  • controller参数必须对应填写“new functionalButtonComponentManager.FunctionalButtonController().onChooseAvatar”。
    
  • 若成功调用，可通过回调函数中的“avatarUri”获取头像图片的地址。
    
  其他参数请参考：FunctionalButton（Button组件）。
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。