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对齐规则
102浏览 • 1回复 待解决
Grid组件性能问题有哪些?
130浏览 • 1回复 待解决
grid组件及数据懒加载
598浏览 • 1回复 待解决
Grid组件scrollBar是否支持自定义
1986浏览 • 1回复 待解决
Grid组件如何实现高度自适应
2700浏览 • 1回复 待解决
使用Grid 组件实现选座场景
571浏览 • 1回复 待解决
如何实现组件阴影效果
575浏览 • 1回复 待解决
HarmonyOS Grid容器视图更新问题
147浏览 • 1回复 待解决
组件如何设置模糊效果
1473浏览 • 1回复 待解决
滑动组件如何实现单边spring效果
656浏览 • 1回复 待解决
如何设置组件透明效果
1660浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
832浏览 • 1回复 待解决
List组件如何设置两端渐变效果
1733浏览 • 1回复 待解决
如何实现Tabs组件tarbar吸顶效果
535浏览 • 1回复 待解决