鸿蒙版本的3D滚轮选择器组件技术解析

一天前2025-06-06 15:43

基于ArkUI的3D滚轮选择器组件技术解析

组件概述

WheelPicker是一个3D风格的滚轮选择器组件，实现了类似iOS UIPickerView的交互效果，但增加了3D旋转和缩放视觉效果。该组件使用ArkUI框架开发，适用于HarmonyOS应用。

核心特性

3D视觉效果：选项在滚动时会呈现3D旋转和缩放效果
可配置参数：支持自定义项高度、可见项数量等
平滑动画：滚动和选择时的平滑过渡动画
响应式设计：自动适应不同屏幕尺寸

技术实现

组件参数

less 复制代码

@Prop options: string[] = []  // 选择项文本数组
@Prop itemHeight: number = 50  // 每个选项的高度
@Prop visibleItemCount: number = 5  // 可见选项数量
@Prop private itemSpace: number = 10  // 选项间距
private numbers: number[] = Array.from(...)  // 用于生成占位项的数组
@State private selectedIndex: number = 0  // 当前选中项的索引

核心布局结构

scss 复制代码

Stack({ alignContent: Alignment.Center }) {
  List({space: this.itemSpace}) {
    // 上下占位项
    ForEach(this.numbers, ()=>{...})
    
    // 实际选项
    ForEach(this.options, (item: string, index: number) => {
      ListItem() {
        Text(item)
          .scale({ x: this.getScale(index) })  // 缩放效果
          .animation({ curve: Curve.Linear, duration: 100 })  // 动画
          .rotate({...})  // 3D旋转效果
          // 其他样式设置...
      }
    })
  }
  .scrollSnapAlign(ScrollSnapAlign.START)
  .onScrollIndex((start, end, center)=>{...})  // 滚动事件处理
}

3D效果算法

缩放效果计算：

typescript 复制代码

getScale(index: number): number {
  const diff = Math.abs(index - this.selectedIndex);
  if(diff === 0) return 1;  // 选中项不缩放
  return 1 - Math.pow(diff, 2) * 0.01;  // 距离越远缩放越小
}

旋转效果计算：

typescript 复制代码

getRotate(index: number): number {
  const diff = index - this.selectedIndex;
  if (diff === 0) return 1;  // 选中项不旋转
  
  const absDiff = Math.abs(diff);
  const angle = Math.pow(absDiff, 2);  // 基于距离平方计算角度
  
  // 限制最大旋转角度
  const maxAngle = 45;
  
  // 根据方向返回正负角度
  return diff > 0 ? -Math.min(angle, maxAngle) : Math.min(angle, maxAngle);
}

使用示例

less 复制代码

@Entry
@Component
struct Example {
  private options: string[] = ['选项1', '选项2', '选项3', '选项4', '选项5'];
  
  build() {
    Column() {
      WheelPicker({ options: this.options })
        .width('80%')
        .margin({ top: 50 })
    }
    .width('100%')
    .height('100%')
  }
}e