HarmonyOS Grid布局,按行排列,列数不固定,GridItem大小固定,如何让所有GridItem在中间,目前向左对齐了

HarmonyOS
2024-12-20 17:25:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

如果是相对Grid容器居中显示, 可以使用margin属性设置偏移量。rowsTemplate、columnsTemplate仅设置其中的一个:元素按照设置的方向进行排布,超出Grid显示区域后,Grid可通过滚动的方式展示。如果设置了rowsTemplate,Grid滚动方向为水平方向,主轴方向为水平方向,交叉轴方向为垂直方向。最左边子组件是最先渲染的。

@Entry
@Component
struct Page617 {
  @State message: string = 'Hello World';
  @State numbers1: String[] = ['0', '1', '2', '3', '4']

  build() {
    RelativeContainer() {
      Grid() {
        ForEach(this.numbers1, (day: string) => {
          ForEach(this.numbers1, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('50')
                .height('50')
                .textAlign(TextAlign.Center)
            }.margin({left:20,right:20})
          }, (day: string) => day)
        }, (day: string) => day)
      }

      // .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .columnsGap(20)
      .rowsGap(20)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
    }
    .height('100%')
    .width('100%')

  }
}
  • 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.
分享
微博
QQ
微信
回复
2024-12-20 19:55:36
相关问题
HarmonyOS 可移动GridItemGrid组件
415浏览 • 1回复 待解决
HarmonyOS Grid-GridItem组件高度的咨询
118浏览 • 1回复 待解决
HarmonyOS Grid占用的问题
234浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
534浏览 • 1回复 待解决
如何固定应用窗口大小并居中展示
2439浏览 • 1回复 待解决
HarmonyOS GridItem之间有一条竖线
13浏览 • 1回复 待解决
HarmonyOS 签名固定问题
293浏览 • 1回复 待解决
如何获取系统屏幕固定
4011浏览 • 0回复 待解决
HarmonyOS 如何设置固定浅色模式
156浏览 • 1回复 待解决
HarmonyOS 固定宽高比怎么设置?
581浏览 • 2回复 待解决