由于@Builder函数使用是有限制条件的,限制如下:
-
@Builder通过按引用传递的方式传入参数,才会触发动态渲染UI,并且参数只能是一个。
-
@Builder如果传入的参数是两个或两个以上,不会触发动态渲染UI。
-
@Builder传入的参数中同时包含按值传递和按引用传递两种方式,不会触发动态渲染UI。
-
@Builder的参数必须按照对象字面量的形式,把所需要的属性一一传入,才会触发动态渲染UI。
以下是修改后的demo示例:
// xxx.ets
class MyDataSource 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() {
}
}
interface TmpInterface {
trueCount: number;
failureCount: number;
quesCount: number;
quesIndex: number
}
@Entry
@Component
struct SwiperExample {
private swiperController: SwiperController = new SwiperController()
private data: MyDataSource = new MyDataSource([])
@State private trueCount: number = 0
@State private failureCount: number = 0
private pageController: SwiperController = new SwiperController()
@State private quesIndex: number = 1
@State private questionCount: number = 0
[@Builder](/user/Builder)
private buildBottomWidget(tmp: TmpInterface) {
Row() {
Text(tmp.trueCount + '')
Text(tmp.failureCount + '')
Blank().width('24vp')
Text(tmp.quesIndex + '/' + tmp.quesCount)
}
.height("72vp")
.width("100%")
.padding({ left: '16vp', right: '16vp' })
.justifyContent(FlexAlign.SpaceBetween)
}
aboutToAppear(): void {
let list: number[] = []
for (let i = 1; i <= 10; i++) {
list.push(i);
}
this.data = new MyDataSource(list)
}
build() {
Column({ space: 5 }) {
Text("" + this.quesIndex)
this.buildBottomWidget({trueCount: this.trueCount, failureCount: this.failureCount, quesIndex: this.quesIndex,quesCount:this.questionCount})
Swiper(this.swiperController) {
LazyForEach(this.data, (item: string) => {
Text(item.toString())
.width('90%')
.height(160)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
.fontSize(30)
}, (item: string) => item)
}
.cachedCount(2)
.index(1)
.autoPlay(true)
.interval(1000)
.indicator(Indicator.digit() // 设置数字导航点样式
.top(200)
.fontColor(Color.Gray)
.selectedFontColor(Color.Gray)
.digitFont({ size: 20, weight: FontWeight.Bold })
.selectedDigitFont({ size: 20, weight: FontWeight.Normal }))
.loop(true)
.duration(2000)
.itemSpace(0)
.displayArrow(true, false)
.onChange((index) => {
this.quesIndex = index
})
// .onAnimationEnd((index, info) => {
// //这里更新
// this.quesIndex = index
// })
Row({ space: 12 }) {
Button('showNext')
.onClick(() => {
this.swiperController.showNext()
})
Button('showPrevious')
.onClick(() => {
this.swiperController.showPrevious()
})
}.margin(5)
}
.width('100%')
.margin({ top: 5 })
}
}
更多自定义构建函数的用法请参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5#%E9%99%90%E5%88%B6%E6%9D%A1%E4%BB%B6