HarmonyOS Tabs嵌套Grid问题

tabs 的tabcontent 使用grid容器,Grid的元素个数不固定,导致各个tabcontent内容高度不对定,遇到的问题是,tabcontent 总是成了元素对多的高度,导致元素少的也很高,求支援

HarmonyOS
2024-12-20 17:05:28
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
FengTianYa

由于TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定,tabs不能自适应高度。 Grid组件,rowsTemplate、columnsTemplate都不设置时layoutDirection、maxcount、minCount、cellLength才生效,maxCount内的值为多少,对应方向上最大显示行数就是多少,可以理解为maxCount有一个高度控制开关,只要设置了maxCount之后,Grid就能实现自适应高度效果,具体使用方式请参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid-0000001815927620#ZH-CN_TOPIC_0000001815927620__%E7%A4%BA%E4%BE%8B6

@Entry
@Component
struct Index {
  @State numbers: string[] = []

  aboutToAppear() {
    for (let i = 1; i <= 35; i++) {
      this.numbers.push(i + '')
    }
  }

  build() {
    Scroll() {
      Column({ space: 5 }) {
        Blank()
        Text('rowsTemplate、columnsTemplate都不设置layoutDirection、maxcount、minCount、cellLength才生效')
          .fontSize(15)
          .fontColor(0xCCCCCC)
          .width('90%')
        Grid() {
          ForEach(this.numbers, (day: string) => {
            GridItem() {
              Text(day).fontSize(16).backgroundColor(0xF9CF93)
            }.width(40).height(80).borderWidth(2).borderColor(Color.Red)
          }, (day: string) => day)
        }
        .columnsGap(10)
        .rowsGap(10)
        .backgroundColor(0xFAEEE0)
        .maxCount(6)
        .minCount(2)
        .cellLength(0)
        .layoutDirection(GridDirection.Row)
        .backgroundColor(Color.Blue)
      }.width('90%').margin({ top: 5, left: 5, right: 5 }).align(Alignment.Center)
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
分享
微博
QQ
微信
回复
2024-12-20 19:58:51
相关问题
HarmonyOS List嵌套List和List嵌套Grid问题
929浏览 • 1回复 待解决
HarmonyOS Tabs组件嵌套Tabs组件问题
1777浏览 • 1回复 待解决
HarmonyOS Tabs嵌套使用问题
639浏览 • 1回复 待解决
Grid嵌套滚动问题有知道的吗?
3617浏览 • 1回复 待解决
HarmonyOS Tabs和Web嵌套左右滑动问题
917浏览 • 1回复 待解决
HarmonyOS tabsgrid实现滑动
640浏览 • 1回复 待解决
HarmonyOS Tabs组件嵌套滑动
1178浏览 • 1回复 待解决
HarmonyOS List组件不能嵌套Grid组件吗
696浏览 • 1回复 待解决
HarmonyOS ListItem嵌套Tabs显示不全
658浏览 • 1回复 待解决
Tabs组件嵌套滑动组件
2428浏览 • 1回复 待解决
HarmonyOS Grid相关问题
1271浏览 • 1回复 待解决
HarmonyOS Grid间距问题
609浏览 • 1回复 待解决
HarmonyOS Grid拖拽动画问题
932浏览 • 1回复 待解决
如何处理tabs嵌套web滑动场景
1220浏览 • 1回复 待解决