第11章：组件库与第三方库的使用

11.1 组件库的导入与使用

11.1.1 组件库概述

ArkTS通过组件库（Component Library）提供可复用的UI组件和功能模块，开发者可以通过导入官方或第三方组件库快速构建应用界面。组件库通常包含：

  • 预置UI组件：按钮、卡片、列表等标准化组件
  • 功能模块：网络请求、动画引擎、图表绘制等
  • 主题资源：颜色、字体、间距等设计系统规范

11.1.2 导入组件库

方式一：通过npm安装

# 在项目根目录执行
npm install @ohos/arkui-components --save

方式二：配置依赖

在module.json5中添加依赖声明：

"dependencies": {
  "@ohos/arkui-components": "1.0.0"
}

11.1.3 使用组件库

基本使用流程

  1. 导入组件：
import { Button, Card } from '@ohos/arkui-components'
  1. 在布局中使用：
@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Card({ title: '示例卡片' }) {
        Button('点击按钮')
          .onClick(() => {
            console.log('按钮被点击')
          })
      }
    }
  }
}

11.1.4 组件属性配置

组件库通常提供丰富的配置选项：

Button('提交')
  .type(ButtonType.Capsule)  // 设置按钮样式
  .width('80%')             // 宽度设置
  .backgroundColor('#FF007D') // 背景色

11.1.5 主题适配

组件库支持动态主题切换：

// 在应用入口配置主题
AppStorage.setOrCreate('themeMode', 'dark')

// 组件自动响应主题变化
Card()
  .themeColor($r('app.color.background'))

11.1.6 最佳实践

  1. 按需导入：仅导入需要的组件以减少包体积
  2. 版本管理：使用固定版本号保证稳定性
  3. 自定义扩展：通过继承基础组件实现定制化需求

11.1.7 常见问题

Q：组件库版本冲突怎么办？
A：通过npm ls检查依赖树，使用resolutions字段强制指定版本

Q：如何查看组件库文档？
A：官方组件库文档通常集成在DevEco Studio的智能提示中，或访问ArkUI组件库官网

提示：运行npm update可定期更新组件库获取最新功能和修复

Last Updated::