HarmonyOS with设置100%会超出屏幕,无法滑出

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部分会超出屏幕,无法滑出来

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

示例参考:

@Entry
@Component
struct page240419123114064 {
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      Row(){
        Text('支付账户')
          .fontSize(18)
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Bold)
          .width('25%')
        Scroll(this.scroller) {
          Row() {
            ForEach(this.arr, (item: number) => {
              Text(item.toString())
                .width('90%')
                .height(150)
                .backgroundColor(0xFFFFFF)
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
            }, (item: string) => item)
          }
          .justifyContent(FlexAlign.End)
          .constraintSize({
            minWidth: '100%'
          })
        }
        // .padding({ bottom: 5 })
        // .backgroundColor(Color.Brown)
        .width('75%')
        .scrollable(ScrollDirection.Horizontal)
        .scrollBar(BarState.Off) // 滚动条常驻显示
        .scrollBarColor(Color.Gray) // 滚动条颜色
        // .scrollBarWidth(10) // 滚动条宽度
        .friction(0.6)
        .edgeEffect(EdgeEffect.None)
      }.width('100%')
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 布局超出边界,无法约束住
19浏览 • 1回复 待解决
HarmonyOS 子控件设置宽度100%问题
28浏览 • 1回复 待解决
HarmonyOS 设置屏幕亮度问题
40浏览 • 1回复 待解决
HarmonyOS Text组件无法铺满屏幕
33浏览 • 1回复 待解决