本文主要是介绍鸿蒙开发画廊效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
鸿蒙开发画廊效果:
画廊这种效果确实不错,看起来高端大气。在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项目结构图:
有需要源码或者有问题的可私信我
这篇关于鸿蒙开发画廊效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!