HarmonyOS Tabs组件tabbar无法start排列&Tabs下列表最后一个item无法展示完全

操作步骤:

1、Tabs组件设置.barMode(BarMode.Scrollable, { nonScrollableLayoutStyle: LayoutStyle.SPACE_BETWEEN_OR_CENTER })无法设置START,期望可以从头部开始排列。

2、Tbas下的list列表无法展示最后一个item,是否与Tabs嵌套Tabs有关。

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

List没有设置高度时,如果子组件总高度大于List父组件的高度时,List会取List父组件高度。如果List有其他兄弟节点,会吧List部分顶出父组件显示区域外,参考如下:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/faqs/faqs-arkui-component.md#%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6list%E5%9C%A8%E4%B8%8D%E8%AE%BE%E7%BD%AE%E9%AB%98%E5%BA%A6%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%E4%BC%9A%E5%87%BA%E7%8E%B0%E6%BB%91%E5%8A%A8%E4%B8%8D%E5%88%B0%E5%BA%95%E7%9A%84%E9%97%AE%E9%A2%98api-10

在示例中banner占据了50、cateInfo占据了40,因此布局内的其他组件不能使用height(100%)的方式,而是使用layoutWeight(1)的方式充满剩余部分,layoutWeight说明如下:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-size-V5#layoutweight

参考示例如下:

// CommonGoodsListContent.ets
@Component
export struct CommonGoodsListContent {
  listScroller: Scroller = new Scroller();
  goodsTabController: TabsController = new TabsController()
  @State thirdSelectIndex: number = 0
  @State mThirdCats: string[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 6; i++) {
      this.mThirdCats.push("三级类目" + i)
    }
  }

  build() {
    Column() {
      Text("这是一个Banner")
        .width('90%')
        .textAlign(TextAlign.Center)
        .height(50)
        .backgroundColor(Color.Blue)
        .margin({ top: 10, bottom: 10 })
      Column() {
        this.cateInfoBar()
        this.goodsListTab()
      }.layoutWeight(1) // 设置layoutWeight 1
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  cateInfoBar() {
    Row() {
      List({ space: 6, scroller: this.listScroller }) {
        ForEach(this.mThirdCats, (cat: string, index?: number) => {
          ListItem() {
            ChildCatInfoView({ catInfo: cat, catIndex: index, selectIndex: this.thirdSelectIndex })
          }.onClick(() => {
            this.thirdSelectIndex = index as number
            this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
            this.goodsTabController.changeIndex(index)
          })
        })
      }
      .listDirection(Axis.Horizontal)
      .contentStartOffset(12)
      .scrollBar(BarState.Off)
      .width('90%')
      .height(40)
      .alignSelf(ItemAlign.Start)
    }
  }

  @Builder
  goodsListTab() {
    Tabs({ index: this.thirdSelectIndex, barPosition: BarPosition.Start, controller: this.goodsTabController }) {
      ForEach(this.mThirdCats, (item: string, index: number) => {
        TabContent() {
          ThirdCategoryTabContent()
        }
      }, (item: string, index?: number) => '' + index + item)
    }
    .layoutWeight(1) // 设置layoutWeight 1
    .barHeight(0)
    .barWidth(0)
    .scrollable(false)
    .animationDuration(0)
    .onChange((index: number) => {
      this.thirdSelectIndex = index;
    })
  }
}

@Component
export struct ChildCatInfoView {
  @State catInfo: string = ""
  @State catIndex: number = 0
  @Link selectIndex: number

  build() {
    Row() {
      Text(this.catInfo)
        .fontSize(12)
        .fontColor(this.selectIndex === this.catIndex ? "#23A3FF" : "#666666")
        .padding({ left: 12, right: 12 })
    }
    .borderRadius(3)
    .height(22.5)
    .backgroundColor(this.selectIndex === this.catIndex ? "#E6F7FF" : "#F5F5F5")
  }
}

@Component
export struct ThirdCategoryTabContent {
  @State goods: string[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 20; i++) {
      this.goods.push("这是第" + i + "个商品")
    }
  }

  build() {
    List({ space: 20 }) {

      ForEach(this.goods, (item: string, index: number) => {
        ListItem() {
          Column() {
            Text(item).fontSize(30).height(100).width("90%").backgroundColor("#F5F5F5")
            Row().height(100).width("90%").backgroundColor(Color.Green)
          }.width("90%")
        }

      }, (item: string, index?: number) => '' + index + item)
    }
    .edgeEffect(EdgeEffect.None)
    .width('100%')
    .height('100%')
    .scrollBar(BarState.Off)
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS Tabs 组件无法隐藏 tabbar
18浏览 • 1回复 待解决
HarmonyOS Tabs组件无法全屏
12浏览 • 1回复 待解决
HarmonyOS Tabs组件tabBar宽度问题
714浏览 • 1回复 待解决
HarmonyOS 如何设定tabs组件tabbar样式
646浏览 • 1回复 待解决
HarmonyOS Tabs组件tabBar是否可以居左
38浏览 • 1回复 待解决
HarmonyOS一个自定义的tabs冲突
32浏览 • 1回复 待解决
如何在Tabs中的tabBar,添加其他组件
621浏览 • 1回复 待解决