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

news/2024/12/18 13:33:35/

场景介绍

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

前提条件

参见开发前提。

效果图展示

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

开发步骤

  1. 导入Scenario Fusion Kit模块以及相关公共模块。

     
    1. import { FunctionalButton, functionalButtonComponentManager } from '@kit.ScenarioFusionKit'
    2. import { hilog } from '@kit.PerformanceAnalysisKit';

  2. 在容器中声明FunctionalButton,指定Button的openType,并设置对应的回调函数,代码如下:

     
    1. @Entry
    2. @Component
    3. struct Index {
    4. // 对应路径 /resources/base/media/下新增 account.png,否则会报错找不到
    5. @State url: ResourceStr = $r('app.media.account');
    6. build() {
    7. Column() {
    8. // 声明FunctionalButton
    9. FunctionalButton({
    10. params: {
    11. // OpenType.CHOOSE_AVATAR表示Button为选择头像类型
    12. openType: functionalButtonComponentManager.OpenType.CHOOSE_AVATAR,
    13. label: '',
    14. // 调整Button样式
    15. styleOption: {
    16. styleConfig: new functionalButtonComponentManager.ButtonConfig()
    17. .type(ButtonType.Normal)
    18. .backgroundImage(this.url)
    19. .backgroundImageSize(ImageSize.Cover)
    20. .width(80)
    21. .height(80)
    22. .backgroundColor('#E5E5E5')
    23. },
    24. },
    25. // OpenType为“CHOOSE_AVATAR”时,回调必须选择“onChooseAvatar”
    26. controller: new functionalButtonComponentManager.FunctionalButtonController().onChooseAvatar((err, data) => {
    27. if (err) {
    28. // 错误日志处理
    29. hilog.error(0x0000, "testTag", "error: %{public}d %{public}s", err.code, err.message);
    30. return;
    31. }
    32. // 成功日志处理
    33. hilog.info(0x0000, "testTag", "succeeded in choosing avatar");
    34. this.url = data.avatarUri!;
    35. })
    36. })
    37. }
    38. .padding({ top: 200 })
    39. .height('100%')
    40. .width('100%')
    41. }
    42. }

    说明

    • openType参数填写“functionalButtonComponentManager.OpenType.CHOOSE_AVATAR”指定Button为选择头像类型。
    • controller参数必须对应填写“new functionalButtonComponentManager.FunctionalButtonController().onChooseAvatar”。
    • 若成功调用,可通过回调函数中的“avatarUri”获取头像图片的地址。

    其他参数请参考:FunctionalButton(Button组件)。


http://www.ppmy.cn/news/1556132.html

相关文章

Linux 更改目录命令 cd 详细介绍

Linux 和其他类 Unix 操作系统中的 cd(change directory)命令是最常用的命令之一,用于更改当前工作目录。 文章目录 01、更改到指定目录02、回到上一级目录03、回到用户的主目录04、相对路径05、绝对路径06、带空格的目录名07、带特殊字符的目…

洛谷P5076 【深基16.例7】普通二叉树(简化版)c嘎嘎

题目链接:P5076 【深基16.例7】普通二叉树(简化版) - 洛谷 | 计算机科学教育新生态 题目难度:普及/提高 解题思路:本题运用了STL中的multiset,它可以看成一个序列,插入一个数,删除一…

CVE-2024-32709 WordPress —— Recall 插件存在 SQL 注入漏洞

漏洞描述 WordPress 是一款免费开源的内容管理系统,适用于各类网站,包括个人博客、电子商务系统、企业网站。其插件 WP-Recall 的 account 存在 SQL 注入漏洞,攻击者可以通过该漏洞获取数据库敏感信息。 WP-Recall 版本 <= 16.26.5 漏洞复现 搭建环境、安装插件、完成…

跟着问题学19——BERT详解(2)

预训练策略 BERT模型的预训练基于两个任务&#xff1a; 屏蔽语言建模 下一句预测 在深入屏蔽语言建模之间&#xff0c;我们先来理解一下语言建模任务的原理。 语言建模 在语言建模任务中&#xff0c;我们训练模型给定一系列单词来预测下一个单词。可以把语言建模分为两类&…

排序算法总结(python实现)

前言 排序算法是一类常见的算法&#xff0c;在学习算法的过程中&#xff0c;都会学习这些排序算法的实现。尽管现在大多数程序语言以及扩展包中对排序算法进行了封装&#xff0c;只要调用接口函数即可实现算法。学习和总结排序算法对于理解算法思维还是很有帮助的。因此本文在…

模拟登录网页

模拟登录与数据采集 今天我们讨论了如何通过 Python 模拟登录并抓取登录后的数据&#xff0c;主要涵盖了以下内容&#xff1a; 模拟登录步骤&#xff1a; 分析登录页面&#xff1a;使用浏览器开发者工具&#xff08;F12&#xff09;分析登录表单&#xff0c;提取表单字段、提…

【echarts】数据过多时可以左右滑动查看(可鼠标可滚动条)

1. 鼠标左右拖动 在和 series 同级的地方配置 dataZoom&#xff1a; dataZoom: [{type: inside, // inside 鼠标左右拖图表&#xff0c;滚轮缩放&#xff1b; slider 使用滑动条start: 0, // 左边的滑块位置&#xff0c;表示从 0 开始显示end: 60, // 右边的滑块位置&#xf…

企业车辆管理系统(源码+数据库+报告)

一、项目介绍 352.基于SpringBoot的企业车辆管理系统&#xff0c;系统包含两种角色&#xff1a;管理员、用户,系统分为前台和后台两大模块 二、项目技术 编程语言&#xff1a;Java 数据库&#xff1a;MySQL 项目管理工具&#xff1a;Maven 前端技术&#xff1a;Vue 后端技术&a…