在HarmonyOS NEXT中 Grid多次渲染会固定布局如历史搜索记录展示，搜索文字长度不固定的方法？

Question

在HarmonyOS NEXT中 Grid多次渲染会固定布局如历史搜索记录展示，搜索文字长度不固定的方法？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

你可以参考使用拉伸能力实现效果，拉伸能力是指容器组件尺寸发生变化时，增加或减小的空间全部分配给容器组件内指定区域，通常通过Flex布局中的flexGrow和flexShrink属性实现，具体使用可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...
可以加上FlexWrap.Wrap这个属性来换行,参考demo：

@Entry 
@Component 
struct ListExample { 
  private arr: string[] = ['测试1111', '测试', '测试0', '测试112222', '测试112222yeyeyeyy', '测试1', '测试11222djkd'] 
 
  build() { 
    Column() { 
      Row() { 
        Flex({ wrap: FlexWrap.Wrap }) { 
          ForEach(this.arr, (item: string) => { 
            Text(item) 
              .height(50) 
              .fontSize(16) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
              .width('30%') 
              .flexGrow(1) 
              .flexShrink(0) 
          }, 
            (item: string) => item) 
        } 
      } 
 
      .height('100%') 
      .width('100%') 
      .backgroundColor(Color.Pink) 
      .justifyContent(FlexAlign.SpaceEvenly) 
 
    } 
    .width('100%').height('100%') 
    .backgroundColor(0xDCDCDC).padding({ top: 5 }) 
  } 
}

如果是想实现类似搜索历史的功能的话，可以不用考虑flexGrow和flexShrink属性呢可以不设置元素的宽度依靠内边距来撑开内容，和设置外边距来控制边距，并且结合FlexWrap.Wrap 来让自动换行的操作。