HarmonyOS Swiper 子组件设置不同宽度？

Question

想实现的效果是 一组滑动的卡片，并且卡片的宽度 动态设置

问题详细描述如下：

TestBean

/**
 * @Author sky
 * @Date 2024/8/20
 */
export class TestBean{
  name:string
  age:number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

Test

/**
 * @Author sky
 * @Date 2024/6/27
 */
import { TestBean } from '../network/bean/TestBean'

@Entry
@Component
struct Test {
  @State testBeanArray: Array<TestBean> = []
  @State index: number = 0

  aboutToAppear(): void {
    this.testBeanArray.push(new TestBean("AAAA", 20))
    this.testBeanArray.push(new TestBean("BBBB", 21))
    this.testBeanArray.push(new TestBean("CCCC", 22))
    this.testBeanArray.push(new TestBean("DDDD", 23))
    this.testBeanArray.push(new TestBean("EEEE", 24))
    this.testBeanArray.push(new TestBean("FFFF", 25))
    this.testBeanArray.push(new TestBean("GGGG", 26))
    this.testBeanArray.push(new TestBean("HHHH", 27))
  }

  isCCC() {
    let testBean = this.testBeanArray[this.index]
    return testBean.name == "CCCC"
  }

  build() {
    Stack() {
      Swiper() {

        Repeat<TestBean>(this.testBeanArray)
          .each((data: RepeatItem<TestBean>) => {
            Text(data.item.name)
              .width("100%")
              .height("100%")
              .textAlign(TextAlign.Center)
              .backgroundColor($r('app.color.color_00acff'))
              .margin({ left: '10', right: '10' })
              .borderRadius(30)

          })
          .key((screenShotDataBean: TestBean, index: number) => {
            return JSON.stringify(screenShotDataBean)
          })
      }
      .height("498")
      .width('100%')
      .prevMargin(this.isCCC() ? '80' : '40')
      .nextMargin(this.isCCC() ? '80' : '40')
      .cachedCount(2)
      .margin({ top: '28' })
      .loop(true)
      .onChange((index) => {
        this.index = index
      })

    }.width("100%")
    .height("100%")
  }
}

Answer 1

目前动态改变swiper宽度是会看的宽度变化过程，这个目前规格是这样。目前是在onChange中动态改变，会在滑动结束后宽度再进行变化，可以考虑用swiper组件的一些回调来实现在滑动过程中变化，比如onAnimationStart，onGestureSwipe，customContentTransition 等回调，简单示例demo如下，仅做参考，可以根据自己想要实现的效果进行更改【参考文档】

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5\#ongestureswipe10

class MyDataSource77 implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct IR240822235607016 {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource77 = new MyDataSource77([])
  @State currentIndex: number = 0
  @State offsetNum: number = 40

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 0; i <= 3; i++) {
      list.push(i);
    }
    this.data = new MyDataSource77(list)
  }
  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string, index: number) => {
          Text(item.toString())
            .width(200)
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
            .border({ width: 1, color: Color.Pink })
        }, (item: string) => item)
      }
      .cachedCount(5)
      .autoPlay(false)
      .interval(1000)
      .loop(true)
      .indicatorInteractive(true)
      .duration(1000)
      .itemSpace(10)
      .prevMargin(this.offsetNum)
      .nextMargin(this.offsetNum)
      .curve(Curve.Linear)
      .onChange((index: number) => {
        console.info('index111',index.toString())
        this.currentIndex = index
      })
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
        console.info('currentIndex',this.currentIndex)
        if (this.currentIndex == 1) {
          this.offsetNum = 80
        } else {
          this.offsetNum = 40
        }
      })
    }.width('100%')
    .margin({ top: 5 })
  }
}