华为HarmonyOS实现跨多个子体系融合的场景化服务 -- 2 选择头像Button
场景介绍本章节将向您介绍怎样使用选择头像Button功能，开发者可调用对应Button组件快速拉起头像选择页面，供用户完成华为账号头像或其他头像的选择与展示。
前提条件
拜见开发前提。
效果图展示
单击头像按钮拉起半模态选择头像页面来设置头像。
https://i-blog.csdnimg.cn/img_convert/ed7527b642aa4f8645c65fe7dfe4edb7.png
开发步调
[*]导入Scenario Fusion Kit模块以及干系公共模块。
[*]import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit'
[*]import { hilog } from '@kit.PerformanceAnalysisKit';
[*]在容器中声明FunctionalButton，指定Button的openType，并设置对应的回调函数，代码如下：
[*]@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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]