Row() {
Text('支付账户')
.fontSize(18)
.fontColor(Color.Black)
.fontWeight(FontWeight.Bold)
.width('25%')
// Blank()
// .layoutWeight(1)
Scroll(this.scroller) {
Row() {
ForEach(this.getAccountList(), (item?:AccountModel) => {
if(item != null){
Text(item.accountName)
.height(24)
.fontColor(item.accountType === this.accountType ? 0x0EC6F1:Color.Black)
.backgroundColor(item.accountType === this.accountType ? 0x1A0EC6F1 : 0xEDF0F3)
.borderRadius(12)
.fontSize(12)
.textAlign(TextAlign.Center)
.borderWidth(1)
.borderColor(item.accountType === this.accountType ? 0x0EC6F1 : 0xEDF0F3)
.margin({ left: 10 })
.padding({left:11,right:11})
.onClick(() => {
this.accountType = item.accountType
})
}
})
}
.width('100%')
.justifyContent(FlexAlign.End)
}
.height(50)
.width('75%')
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
}
.width('100%')
以上代码设置后,Scroll部分会超出屏幕,无法滑出来
示例参考: