HarmonyOS grid组件的auto-fit没效果

设置grid组件的.columnsTemplate(“repeat(auto-fit,90)”)跟.columnsTemplate(“repeat(auto-fill,90)”)的效果是一样的,按照文档的说法,auto-fit设置的是最小列宽,实际的列宽自己计算,结果是直接固定了,没实现想要的效果。

HarmonyOS
2024-08-09 16:04:44
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
FengTianYa

可以参考以下代码:

@Entry 
@Component 
struct GridExample { 
  @State numbers1: String[] = ['0', '1', '2', '3', '4'] 
  build() { 
    Column({ space: 5 }) { 
      Grid() { 
        ForEach(this.numbers1, (day: string) => { 
          GridItem() { 
            Text(day) 
              .fontSize(16) 
              .backgroundColor(0xF9CF93) 
              .width('100%') 
              .height('100%') 
              .textAlign(TextAlign.Center) 
          } 
        }, (day: string) => day) 
      } 
      .columnsTemplate('repeat(auto-fit, 90)') 
      // .columnsTemplate('repeat(auto-fill, 90)') 
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 
      .columnsGap(10) 
      .rowsGap(10) 
      .width('90%') 
      .backgroundColor(0xFAEEE0) 
      .height(300) 
    }.width('100%').margin({ top: 5 }) 
  } 
}
  • 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.

目前auto-fit的功能设计就是这样,根据设置的columnsGap和track-size来计算需要放置的组件是否能够放满一行,可以放置完组件的话就不会撑满,这个功能可能会与之前使用的其他语言有所区别。

分享
微博
QQ
微信
回复
2024-08-09 18:07:56


相关问题
HarmonyOS 全局设置字体没效果
536浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
841浏览 • 1回复 待解决
HarmonyOS grid拖拽和增删动画效果
824浏览 • 1回复 待解决
HarmonyOS auto失效
530浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
946浏览 • 1回复 待解决
HarmonyOS 可移动GridItemGrid组件
1065浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
996浏览 • 1回复 待解决
HarmonyOS Grid组件拖拽排序
1183浏览 • 1回复 待解决
HarmonyOS Grid-GridItem组件高度咨询
597浏览 • 1回复 待解决
HarmonyOS List组件不能嵌套Grid组件
665浏览 • 1回复 待解决
HarmonyOS web使用fit-content黑屏
430浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序问题
1424浏览 • 1回复 待解决
HarmonyOS Grid组件子项拖动问题
1008浏览 • 1回复 待解决