HarmonyOS GridRow支持不规则的排布吗?比如第一行展示3个,第二行展示2个

GridRow支持不规则的排布吗?比如第一行展示3个,第二行展示2个,有个场景需要动态计算文案的宽度来去改变GridRow每行的展示个数。

HarmonyOS
2024-10-17 10:48:05
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

GridRow栅格子组件仅能通过span、offset计算子组件位置与大小。下面demo可以参考一下,但数据多的情况下不建议使用,建议使用Grid。

// xxx.ets  
@Entry  
@Component  
struct GridRowExample {  
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green]  
  @State bgColors2: Color[] = [Color.Red, Color.Orange, Color.Yellow]  
  @State bgColors3: Color[] = [Color.Red, Color.Orange]  
  private colorList: Color[][] = [this.bgColors,this.bgColors2,this.bgColors3]  
  @Builder rowAmount(list: Color[]) {  
    Column(){  
      GridRow({  
        columns: 5,  
        gutter: { x: 5, y: 10 },  
        breakpoints: { value: ["400vp", "600vp", "800vp"],  
          reference: BreakpointsReference.WindowSize },  
        direction: GridRowDirection.Row  
      }) {  
        ForEach(list, (color: Color) => {  
          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 }, offset: 0, order: 0 }) {  
            Row().width("100%").height("20vp")  
          }.borderColor(color).borderWidth(2)  
        })  
      }  
    }  
  }  
  build() {  
    Column() {  
      ForEach(this.colorList, (item: Color[]) => {  
        this.rowAmount(item)  
      }, (item: string) => item)  
    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)  
    .border({ color: '#880606', width: 2 })  
  }  
}
分享
微博
QQ
微信
回复
2024-10-17 15:19:49
相关问题
编写页面,实现不规则列表
790浏览 • 1回复 待解决
HarmonyOS 一行文案不同字体大小
58浏览 • 1回复 待解决
如何展示贴片广告
383浏览 • 1回复 待解决
如何展示原生广告
378浏览 • 1回复 待解决
如何展示插屏广告
522浏览 • 1回复 待解决
如何展示激励广告
368浏览 • 1回复 待解决
如何展示开屏广告
505浏览 • 1回复 待解决
如何展示banner广告
431浏览 • 1回复 待解决
如何展示半屏广告
533浏览 • 1回复 待解决