توسعه Hongmeng: طرح الاستیک فلکس

@Entry
  @Component
  struct Index {
    @State searchList: string[] = ["程序员一鸣", "App开发干货铺", "程序员修养", "鸿蒙4.0", "HarmonyOS NEXT","开发","中","这是一个非常长的搜索内容，请须知！"]

    build() {
      Column() {

        Text("历史搜索")
          .fontSize(18)
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Bold)

        Flex({ wrap: FlexWrap.Wrap }) { 
          ForEach(this.searchList, (item: string) => {
            Text(item)
              .backgroundColor("#e8e8e8")
              .padding({
                left: 10,
                right: 10,
                top: 5,
                bottom: 5
              }).margin({ right: 10, bottom: 10 })
              .borderRadius(5)
          })
        }.margin({ top: 10 })
      }
      .height('100%')
        .width('100%')
        .padding({ left: 10, right: 10 })
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.Center)
    }
  }

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

 Flex({ direction: FlexDirection.RowReverse }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

      Flex({ direction: FlexDirection.Column }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

      Flex({ direction: FlexDirection.ColumnReverse }) {
        Text('元素1')
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .backgroundColor(Color.Orange)
      }

Flex({ direction: FlexDirection.Row,wrap:FlexWrap.Wrap}) {
        Text('元素1')
          .width(100)
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Orange)
        Text('元素4')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Gray)
      }

Flex({ direction: FlexDirection.Row }) {
        Text('元素1')
          .width(100)
          .padding(10)
          .backgroundColor(Color.Red)
        Text('元素2')
          .padding(10)
          .width(100)
          .backgroundColor(Color.Pink)
        Text('元素3')
          .padding(10)
          .width(100)
          .flexGrow(1)
          .backgroundColor(Color.Orange)
      }