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
相关问题
RelativeContainer组件auto对齐规则
280浏览 • 1回复 待解决
HarmonyOS 可移动GridItemGrid组件
171浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
244浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序问题
323浏览 • 0回复 待解决
Grid组件性能问题有哪些?
358浏览 • 1回复 待解决
Grid组件scrollBar是否支持自定义
2140浏览 • 1回复 待解决
grid组件及数据懒加载
893浏览 • 1回复 待解决
Grid组件显示异常该怎么处理?
250浏览 • 1回复 待解决
HarmonyOS ArkUI有如下效果组件吗?
187浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3096浏览 • 1回复 待解决
使用Grid 组件实现选座场景
910浏览 • 1回复 待解决
HarmonyOS 组件设置属性无效果
244浏览 • 1回复 待解决
如何实现组件阴影效果
824浏览 • 1回复 待解决
HarmonyOS Grid相关问题
305浏览 • 1回复 待解决
HarmonyOS Grid横向滑动
303浏览 • 1回复 待解决