HarmonyOS RelativeContainer在List中怎么根据子组件自适应宽高

HarmonyOS
2025-01-09 15:57:50
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

API11 RelativeContainer支持宽高自适应子组件,将其设置为auto即可,限制是当width设置auto时如果水平方向上子组件以容器作为锚点,则auto不生效,垂直方向上同理,具体使用方法请参考文档链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5

参考示例如下:

@Entry
@Component
struct GridPage {
  @State numbers: String[] = ['0', '1', '2', '3', '4']
  scroller: Scroller = new Scroller()

  build() {
    Column({ space: 5 }) {
      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid(this.scroller) {
        ForEach(this.numbers, (day: string) => {
          ForEach(this.numbers, (day: string) => {
            GridItem() {
              customGridItem({ day: day })
            }
          }, (day: string) => day)
        }, (day: string) => day)
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .height(500)

      Button('next page')// 点击后滑到下一页
        .onClick(() => {
          this.scroller.scrollPage({ next: true })
        })
    }.width('100%').margin({ top: 5 })
  }
}

@Component
struct customGridItem {
  @State day: string = ''

  build() {
    RelativeContainer() {
      Row() {
        Image('')
          .backgroundColor(Color.Red)
      }
      .width('100%')
      // 修改大小自适应其高度
      .height(200)
      .backgroundColor("#FF3333")
      .alignRules({})
      .id("row1")
    }
    .backgroundColor(Color.Blue)
    .width("auto").height("auto")
    .border({ width: 2, color: "#6699FF" })
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:53:13
相关问题
HarmonyOS RelativeContainer自适应问题
1148浏览 • 1回复 待解决
HarmonyOS image加载图片自适应
389浏览 • 1回复 待解决
HarmonyOS List高度根据内容自适应
479浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
780浏览 • 1回复 待解决
HarmonyOS RelativeContainer设置问题
222浏览 • 1回复 待解决
HarmonyOS Image List自适应大小失败
564浏览 • 1回复 待解决
List水平布局如何根据内容自适应高度
1033浏览 • 1回复 待解决
HarmonyOS RelativeContainer自适应高度相关
386浏览 • 1回复 待解决