OpenHarmony高级UI组件怎么用

在 OpenHarmony（ArkUI） 里，“高级 UI 组件”通常指 ArkUI 提供的能力较强、常用于复杂交互或业务场景的组件，比如：

• List / Grid / Swiper
• Refresh / Scroll
• Navigation / Tabs
• BindSheet / BindMenu / Dialog
• Canvas / XComponent
• Web
• Animation / Particle / Motion

下面用 ArkTS（Stage 模型） 给你一个清晰、实战向的使用说明。

一、基础前提（必须知道）

1️⃣ 使用语言

• 推荐：ArkTS
• 模型：Stage 模型
• 文件：EntryAbility.ts + pages/xxx.ets

2️⃣ 基本结构

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('高级 UI 示例')
    }
  }
}

二、常用高级 UI 组件用法

1️⃣ List（列表，最常用）

示例：可滚动列表

@Entry
@Component
struct ListDemo {
  private data: string[] = ['A', 'B', 'C', 'D']

  build() {
    List() {
      ForEach(this.data, (item: string) => {
        ListItem() {
          Text(item)
            .fontSize(20)
            .padding(10)
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

✅ 常用于：

• 消息列表
• 设置页
• 商品列表

2️⃣ Tabs（底部导航 / 顶部切换）

@Entry
@Component
struct TabsDemo {
  build() {
    Tabs() {
      TabContent() {
        Text('首页')
      }.tabBar('首页')

      TabContent() {
        Text('我的')
      }.tabBar('我的')
    }
  }
}

✅ 适合：

• 主框架页面
• 多模块切换

3️⃣ Navigation（页面导航容器）

@Entry
@Component
struct NavDemo {
  build() {
    Navigation() {
      Text('主页内容')
    }
    .title('主页')
  }
}

配合：

this.pageStack.pushPath({ name: 'Detail' })

✅ 用于：

• 多页面结构
• 取代旧 Router 写法（新项目推荐）

4️⃣ Swiper（轮播）

@Entry
@Component
struct SwiperDemo {
  build() {
    Swiper() {
      Text('1').fontSize(30)
      Text('2').fontSize(30)
      Text('3').fontSize(30)
    }
    .height(200)
    .loop(true)
  }
}

✅ 常用于：

• Banner
• 引导页

5️⃣ Refresh（下拉刷新）

@Entry
@Component
struct RefreshDemo {
  @State isRefreshing: boolean = false

  build() {
    Refresh({ refreshing: this.isRefreshing }) {
      List() {
        ListItem() {
          Text('内容')
        }
      }
    }
    .onRefreshing(() => {
      setTimeout(() => {
        this.isRefreshing = false
      }, 1000)
    })
  }
}

6️⃣ BindSheet（底部弹窗）

@Entry
@Component
struct SheetDemo {
  @State show: boolean = false

  build() {
    Column() {
      Button('打开')
        .onClick(() => this.show = true)
    }
    .bindSheet(this.show, () => {
      Column() {
        Text('底部弹窗')
      }.height(300)
    }, {
      onDisappear: () => this.show = false
    })
  }
}

✅ 替代旧 Dialog 的推荐方式

7️⃣ Canvas（自定义绘制）

@Entry
@Component
struct CanvasDemo {
  build() {
    Canvas(this.context)
      .width('100%')
      .height(300)
      .onReady(() => {
        this.context.fillStyle = '#ff0000'
        this.context.fillRect(0, 0, 100, 100)
      })
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D()
}

✅ 用于：

• 图表
• 游戏
• 特效

8️⃣ Web（嵌入网页）

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebDemo {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Web({ src: 'https://www.example.com', controller: this.controller })
      .width('100%')
      .height('100%')
  }
}

三、动画（高级但很重要）

@State scale: number = 1

Button('放大')
  .scale({ x: this.scale, y: this.scale })
  .onClick(() => {
    animateTo({ duration: 300 }, () => {
      this.scale = 1.5
    })
  })

四、新手学习路径（建议）

✅ 顺序：

1. Column / Row / Text / Button
2. List / Tabs
3. Navigation
4. BindSheet / Dialog
5. Canvas / Animation
6. Web / XComponent

五、如果你愿意，我可以：

• ✅ 给你 完整 Demo 工程结构
• ✅ 按你业务（电商 / 社交 / 工具）讲组件
• ✅ 对比 ArkUI vs Flutter / Vue
• ✅ 讲 性能优化 & 复杂列表

你现在是 刚入门 还是 已经在做项目了？