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

Question

如题：HarmonyOS Grid多次渲染会固定布局 如历史搜索记录展示，搜索文字长度不固定？

Answer 1

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

可以加上FlexWrap.Wrap这个属性来换行,参考demo

@Entry
@Component
struct ListExample {
  private arr: string[] = ['测试1111', '测试', '测试0', '测试112222', '测试112222yeyeyeyy', '测试1', '测试112222yeyeyeyyjdjkd']

  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 来让自动换行的操作