HarmonyOS鸿蒙Next组件/模板集成创新活动-奇趣故事匣

HarmonyOS鸿蒙Next组件/模板集成创新活动-奇趣故事匣

HarmonyOS 组件 / 模板集成创新活动正在火热进行中！这是一场开发者之间 “码” 出效率的精彩较量，在这个活动中，开发者们可以尽情探索 HarmonyOS 组件 / 模板的无限可能，充分发挥创意，打造独具特色的鸿蒙应用，更有丰厚的精美大礼等待着各位开发者去赢取。如何集成组件/模板，让您的开发效率翻倍呢？接下来，将为大家详细介绍如何集成组件 / 模板，助力开发效率实现质的飞跃。

一、集成组件

1、前提条件

在进行组件集成之前，需要确保满足以下两个关键条件：

• 开发工具版本：DevEco Studio 5.0.0 及以上版本。
• 插件安装：鸿蒙生态市场插件已安装。该插件为开发者搭建了一个丰富的组件和模板资源库，极大地方便了开发者获取和使用各类实用的开发资源。

当满足上述条件后，开发者可以在开发工具的【工具 > 组件市场】中打开组件市场，具体界面如下图所示：

在组件市场中，存在着海量的组件模板供开发者直接添加使用。下面，我们将以其中一个非常实用的 toast 组件为例，详细介绍其集成和使用的方法。

2、集成toast组件

toast 组件是由一鸣智联工坊提供的免费弹窗组件，它具备极高的灵活性。该组件支持在任意位置弹出提示框，能够自定义圆角等样式，还支持上下左右 icon 设置，甚至支持以自定义组件的形式进行使用。与系统自带的 toast 相比，其最大的优势在于可以随心所欲地自定义样式，能够充分满足各种个性化的需求。

快速集成

在工程的oh-package.json5中设置三方包依赖，配置示例如下 ：

"dependencies": { "@abner/toast": "^1.0.0"}

在需要使用的位置导入toast包

import { toast } from '@abner/toast'

// 使用toast
toast("这是一个toast弹窗")

此时已完成toast的集成与简单使用

toast进阶

初始化：

初始化操作主要用于统一配置 toast 的样式，例如背景颜色、圆角、字体颜色和大小等。如果默认样式已经能够满足开发者的需求，也可以不进行初始化操作。官方建议在 AbilityStage 里进行初始化，这样可以确保整个应用的 toast 样式统一。示例代码如下：

toastInit({ toastAttribute: { backgroundColor: Color.Black, fontColor: Color.White } })

带icon弹窗：

toast 组件支持在弹窗中添加 icon，并且支持上下左右四个方向的 icon 设置。示例代码如下：

// leftIcon:左面icon，支持上下左右icon
toast("带icon弹窗", {
 leftIcon: $r("app.media.app_icon"),
 borderRadius: 10,
 padding: {
 right: 40,
 left: 40,
 top: 20,
 bottom: 20
}
})

在这个示例中，我们在弹窗的左侧添加了一个 icon，并设置了弹窗的圆角半径和内边距，使弹窗更加美观和个性化。

自定义视图弹窗：

如果开发者需要实现更复杂的弹窗效果，可以使用自定义视图弹窗。示例代码如下：

toast("自定义视图", {
 backgroundColor: Color.Transparent,
 padding: 0,
 view: wrapBuilder(ToastView)
})

ToastConfig属性 ：

其中 ToastAttribute属性如下：

更多属性请仔细查看组件说明文档，以便充分发挥 toast 组件的功能。

二、总结

总的来说，toast 组件为开发者带来了极大的便利，它极大地简化了代码，减少了开发工作量。与传统的 promptAction.showToast 相比，toast 组件可以自定义视图，操作更加简单。在大量使用弹窗提示的场景下，toast 组件更为快捷、便利。例如：

promptAction.showToast({message: '弹窗内容！'})
toast("弹窗内容！")

总的来说，组件市场中存在大量非常有用的组件，而且还在持续更新中，可以极大的提高我们的开发效率。我在奇趣故事匣元服务中集成该组件主要是看中了其自定义样式以及弹窗的代码简化，简单弹窗仅需一行代码即可，后续也会集成更多适合自己的组件模板，感受组件模板带来的效率提升。