HarmonyOS 自动换行效果

使用flex弹性布局即可，可参考以下示例：

@Entry
@Component
export struct SearchBox {
  controller: SearchController = new SearchController()
  @State searchHistoryArray: string[] = ['矢量图','大黄蜂11号','老顽童','成人保险怎么选呢，我也不知道啊']
  private arrMax: number = 10
  @State inputValue: string = ""

  build() {
    NavDestination() {
      Column({ space: 10 }) {
        Search({ value: this.inputValue, placeholder: '请输入', controller: this.controller })
          .searchButton('搜索')
          .width('100%')
          .height(40)
          .backgroundColor('#F5F5F5')
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 14, weight: 400 })
          .textFont({ size: 14, weight: 400 })
          .onSubmit((value: string) => {
            this.insertOrUpdateItem(value === "" ? '' : value)
          })
          .margin({ top: 10, bottom: 10 })
          .borderRadius(0)

        Column() {
          Text('历史搜索').fontSize(18)
          Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
            ForEach(this.searchHistoryArray, (item: string) => {
              Row() {
                Text(item + '  ').margin({ top: 2, bottom: 2 }).textAlign(TextAlign.Center)
                  .fontSize(13)

              }.backgroundColor('#ff9696d9')
              .borderStyle(BorderStyle.Solid)
              .borderRadius(15)
              .margin(10)

              .height(30)
            })
          }

        }.width('100%').alignItems(HorizontalAlign.Start)

      }.width('100%').margin(10).constraintSize(
        { maxWidth: '100%' })
    }
  }

  insertOrUpdateItem(item: string) {
    const index = this.searchHistoryArray.indexOf(item)
    if (index !== -1) {
      this.searchHistoryArray.splice(index, 1)
      this.searchHistoryArray.push(item)
      return
    }
    if (this.searchHistoryArray.length < this.arrMax) {
      this.searchHistoryArray.push(item)
    } else {
      this.searchHistoryArray.shift()
      this.searchHistoryArray.push(item)
    }

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.