HarmonyOS鸿蒙Next中应用如何实现滑动卡片，居中显示放大两侧小的效果？请提供源码和步骤解释

HarmonyOS鸿蒙Next中应用如何实现滑动卡片，居中显示放大两侧小的效果？请提供源码和步骤解释 cke_151.png

1.横向滚动列表，手势左右滑动，居中选中会放大。

2.左边滑动到首部，在居中位置。同理，尾部也在居中位置。

3.放大选中和滑动滚动效果丝滑。

鸿蒙应用如何实现滑动卡片，居中显示放大两侧小的效果？请提供源码和步骤解释


更多关于HarmonyOS鸿蒙Next中应用如何实现滑动卡片，居中显示放大两侧小的效果？请提供源码和步骤解释的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中实现滑动卡片居中放大效果，可使用ArkUI的Swiper组件结合自定义动画。

关键步骤：

  1. 使用Swiper组件设置loop为true实现循环滑动
  2. 通过onChange事件监听滑动位置
  3. 使用属性动画动态调整卡片的scale和opacity属性
  4. 居中卡片设置较大缩放值（如1.2），两侧卡片设置较小值（如0.8）

核心代码片段：

Swiper() {
  ForEach(this.cards, (item) => {
    Column() {
      // 卡片内容
    }
    .scale(this.getScale(item.index))
    .opacity(this.getOpacity(item.index))
  })
}
.onChange((index) => {
  this.updateCardStates(index)
})

通过计算当前索引与中心位置的差值，动态调整每个卡片的缩放比例和透明度。

更多关于HarmonyOS鸿蒙Next中应用如何实现滑动卡片，居中显示放大两侧小的效果？请提供源码和步骤解释的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现滑动卡片居中放大效果，可以通过Scroll和ForEach组件配合@AnimatableExt装饰器实现。以下是核心实现步骤和示例代码：

1. 数据结构定义

// 卡片数据模型
@Observed
class CardItem {
  id: number;
  content: string;
  scale: number = 1.0; // 缩放比例

  constructor(id: number, content: string) {
    this.id = id;
    this.content = content;
  }
}

// 卡片列表管理类
class CardListManager {
  private centerIndex: number = 0; // 当前居中索引
  private itemWidth: number = 200; // 卡片宽度
  private scrollOffset: number = 0; // 滚动偏移量

  // 计算卡片缩放比例
  calculateScale(index: number): number {
    const distance = Math.abs(index - this.centerIndex);
    return Math.max(0.8, 1.0 - distance * 0.2); // 距离越远，缩放越小
  }

  // 滚动位置变化回调
  onScrollChange(offset: number) {
    this.scrollOffset = offset;
    this.updateCenterIndex();
  }

  // 更新居中索引
  private updateCenterIndex() {
    const newCenterIndex = Math.round(this.scrollOffset / this.itemWidth);
    if (newCenterIndex !== this.centerIndex) {
      this.centerIndex = newCenterIndex;
      this.updateAllScales();
    }
  }

  // 更新所有卡片缩放
  private updateAllScales() {
    // 触发UI更新
  }
}

2. UI布局实现

@Component
struct CardSlider {
  private cardManager: CardListManager = new CardListManager();
  @State cardList: CardItem[] = this.initCardList();

  // 初始化卡片数据
  private initCardList(): CardItem[] {
    return Array.from({length: 10}, (_, i) => 
      new CardItem(i, `Card ${i + 1}`));
  }

  build() {
    Scroll(.horizontal) {
      Row() {
        ForEach(this.cardList, (item: CardItem) => {
          CardItemView({ 
            item: item,
            manager: this.cardManager 
          })
        }, (item: CardItem) => item.id.toString())
      }
      .width('100%')
      .height(300)
      .onScrollFrameBegin((offset: ScrollEvent) => {
        // 滚动时更新位置
        this.cardManager.onScrollChange(offset.x);
        return { offsetRemain: offset };
      })
    }
    .scrollable(ScrollDirection.Horizontal)
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None)
  }
}

3. 卡片组件实现

@Component
struct CardItemView {
  @ObjectLink item: CardItem;
  private manager: CardListManager;

  build() {
    Column() {
      Text(this.item.content)
        .fontSize(20)
        .fontColor(Color.White)
    }
    .width(200)
    .height(250)
    .backgroundColor(Color.Blue)
    .borderRadius(16)
    .shadow({ radius: 8, color: Color.Gray, offsetX: 2, offsetY: 4 })
    .scale({ x: this.item.scale, y: this.item.scale })
    .animation({ duration: 200, curve: Curve.EaseOut }) // 添加动画效果
  }
}

4. 关键配置说明

  1. 滚动监听：通过onScrollFrameBegin监听滚动位置变化
  2. 缩放计算：根据卡片与中心位置的相对距离计算缩放比例
  3. 动画效果：使用.animation()修饰器实现平滑过渡
  4. 布局优化：使用固定宽度卡片确保计算准确性

5. 边缘处理优化

// 在CardListManager中添加边界处理
handleBoundaryCases(totalItems: number): void {
  if (this.centerIndex < 0) this.centerIndex = 0;
  if (this.centerIndex >= totalItems) this.centerIndex = totalItems - 1;
  
  // 首尾项居中时保持正常大小
  if (this.centerIndex === 0 || this.centerIndex === totalItems - 1) {
    // 特殊处理逻辑
  }
}

实现要点：

  1. 使用Scroll组件实现横向滚动
  2. 通过滚动位置计算当前居中项索引
  3. 基于距离计算每张卡片的缩放比例
  4. 使用@AnimatableExt或.animation()实现平滑动画
  5. 首尾项特殊处理确保居中显示

这种方法利用HarmonyOS的声明式UI和动画系统，实现了流畅的卡片滑动放大效果。实际开发中可根据需求调整卡片尺寸、缩放比例和动画参数。

回到顶部