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 }) 
  } 
}

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

分享
微博
QQ
微信
回复
2024-08-09 18:07:56
相关问题
HarmonyOS 全局设置字体没效果
25浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
368浏览 • 1回复 待解决
HarmonyOS grid拖拽和增删动画效果
32浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
31浏览 • 1回复 待解决
HarmonyOS auto失效
63浏览 • 1回复 待解决
HarmonyOS 可移动GridItemGrid组件
312浏览 • 1回复 待解决
HarmonyOS Grid组件拖拽排序
19浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
361浏览 • 1回复 待解决
HarmonyOS Grid-GridItem组件高度咨询
36浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序问题
500浏览 • 1回复 待解决
HarmonyOS List组件不能嵌套Grid组件
81浏览 • 1回复 待解决
HarmonyOS Grid组件子项拖动问题
223浏览 • 1回复 待解决
HarmonyOS Grid组件能否高度自适应
42浏览 • 1回复 待解决
Grid组件性能问题有哪些?
428浏览 • 1回复 待解决