鸿蒙开发画廊效果

本文主要是介绍鸿蒙开发画廊效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

鸿蒙开发画廊效果：

画廊这种效果确实不错，看起来高端大气。在Android那边已经有不少案例了，但是鸿蒙这边还是很少。今天来分享一个。

先看下效果图：

没法弄gif,就是左右可以看到前一张，下一张。
也可以看我b站完整的视频：https://www.bilibili.com/video/BV13eHre7EK9/

实现思路：

Swiper的onGestureSwipe里面算偏移量

部分参考代码：

@Component
export struct CardSwiper {// 卡片数据源data: BaseDataSource<UserDataBean> = new BaseDataSource()// 卡片偏移度列表@State private cardsOffset: number[] = [];// 屏幕宽度private displayWidth: number = 0;// Swiper 两侧的偏移量private swiperMargin: number = CommonConstants.SWIPER_MARGIN;// Swiper 当前索引值@State private currentSwiperIndex: number = 0;private readonly DEVICESIZE: number = 600; // 依据Navigation的mode属性说明，如使用Auto，窗口宽度>=600vp时，采用Split模式显示；窗口宽度<600vp时，采用Stack模式显示。onChange?:(index:number)=>voidcontroller: SwiperController = new SwiperController();aboutToAppear(): void {// 获取屏幕大小，用于后续计算卡片的偏移量const displayData: display.Display = display.getDefaultDisplaySync();this.displayWidth = px2vp(displayData.width);if ((display.isFoldable() && display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_EXPANDED) || this.displayWidth >= this.DEVICESIZE) {this.displayWidth = px2vp(displayData.width) / 2;}// 计算当前卡片及关联卡片的偏移量this.calculateOffset(0);}build() {Column() {Swiper(this.controller) {LazyForEach(this.data, (item: UserDataBean, index: number) => {CardComponent({userInfo: item,cardOffset: this.cardsOffset[index],cardIndex: index,showingCard: this.currentSwiperIndex,cardWith:this.displayWidth - 160,cardHeight:this.displayWidth - 100,})},(item: UserDataBean,index:number) => `${index}-${JSON.stringify(item)}`)}.index($$this.currentSwiperIndex).loop(false).prevMargin(this.swiperMargin).nextMargin(this.swiperMargin).duration(CommonConstants.DURATION).curve(Curve.Friction).onChange((index) => {this.calculateOffset(index);this.onChange?.(index)}).indicator(false).onGestureSwipe((index, event) => {const currentOffset = event.currentOffset;// 获取当前卡片（居中）的原始偏移量const maxOffset = this.getMaxOffset(index) / 2;// 实时维护卡片的偏移量列表，做到跟手效果if (currentOffset < 0) {// 向左偏移/** 此处计算原理为：按照比例设置卡片的偏移量。* 当前卡片居中，向左滑动后将在左边，此时卡片偏移量即为 maxOffset * 2（因为向右对齐）。* 所以手指能够滑动的最大距离（this.displayWidth）所带来的偏移量即为 maxOffset。* 易得公式：卡片实时偏移量 = （手指滑动长度 / 屏幕宽度） * 卡片最大可偏移量 + 当前偏移量。* 之后的计算原理相同，将不再赘述。*/this.cardsOffset[index] = (-currentOffset / this.displayWidth) * maxOffset + maxOffset;if (this.isIndexValid(index + 1)) {// 下一个卡片的偏移量const maxOffset = this.getMaxOffset(index + 1) / 2;this.cardsOffset[index + 1] = (-currentOffset / this.displayWidth) * maxOffset;}if (this.isIndexValid(index - 1)) {// 上一个卡片的偏移量const maxOffset = this.getMaxOffset(index - 1) / 2;this.cardsOffset[index - 1] = (currentOffset / this.displayWidth) * maxOffset + 2 * maxOffset;}} else if (currentOffset > 0) {// 向右滑动this.cardsOffset[index] = maxOffset - (currentOffset / this.displayWidth) * maxOffset;if (this.isIndexValid(index + 1)) {const maxOffset = this.getMaxOffset(index + 1) / 2;this.cardsOffset[index + 1] = (currentOffset / this.displayWidth) * maxOffset;}if (this.isIndexValid(index - 1)) {const maxOffset = this.getMaxOffset(index - 1) / 2;this.cardsOffset[index - 1] = 2 * maxOffset - (currentOffset / this.displayWidth) * maxOffset;}}}).onAnimationStart((index, targetIndex) => {this.calculateOffset(targetIndex);}).height('100%')}.width('100%').height('100%').justifyContent(FlexAlign.Center)}/*** 计算卡片偏移量，并维护偏移量列表。* @param targetIndex { number } swiper target card's index.*/calculateOffset(target: number) {let left = target - 1;let right = target + 1;// 计算上一张卡片的偏移值if (this.isIndexValid(left)) {this.cardsOffset[left] = this.getMaxOffset(left);}// 计算当前卡片的偏移值if (this.isIndexValid(target)) {this.cardsOffset[target] = this.getMaxOffset(target) / 2;}// 下一张片的偏移值if (this.isIndexValid(right)) {this.cardsOffset[right] = 0;}}/*** 检查卡片索引值的合法性。* @param index {number} input card's index.* @returns true or false.*/isIndexValid(index: number): boolean {return index >= 0 && index < this.data.totalCount();}/*** 计算指定卡片的最大偏移量。* @param index {number} target card's index.* @returns offset value.*/getMaxOffset(index: number): number {/** 这里的偏移量指相对容器左侧的值。* 计算公式为：屏幕宽度 - Swiper两侧突出的偏移量 - 卡片自身的宽度。* 此值即为卡片可偏移的最大值，也就是卡片右对齐的状态值。* 如果居中，则将最大偏移量 / 2。*///let areaWidth = this.data.getAllData()?.[index]?.areaWidthreturn this.displayWidth - (index===this.currentSwiperIndex?this.displayWidth - 110:this.displayWidth - 160) - 2 * this.swiperMargin;}
}

现有的demo项目结构图：

有需要源码或者有问题的可私信我

这篇关于鸿蒙开发画廊效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---