圖片演示效果：

代碼演示：

// 注：當前代碼基于寬度為720的設計稿進行適配，使用lpx單位。
// 整段代碼描述的功能：
// 該代碼實現了一個簡單的搜索功能組件，其中包括：
// 1. 輸入框：用戶可以在此輸入要搜索的內容；
// 2. 搜索按鈕：點擊后，將當前輸入內容添加到搜索歷史記錄的首位，若有重復則移除重復項，并保持歷史記錄不超過10條；
// 3. 搜索歷史標題和清空記錄按鈕：展示搜索歷史記錄列表，并提供清空全部歷史記錄的功能；
// 4. 搜索歷史記錄列表：按照時間最近的順序顯示搜索歷史記錄，最多顯示10條。
@Entry
@Component
struct test {
  // 定義狀態變量，用于存儲輸入框的當前值
  @State inputValue: string = ''

  // 定義狀態變量，用于存儲搜索歷史記錄的數組
  @State historyValueArr: Array< string > = [
    '張三', '李四', '舉頭望明月', '低頭思故鄉', 'HarmonyOs', '不可能，絕對不可能'
  ]

  // 構建UI組件
  build() {
    // 主體內容使用Column布局，垂直堆疊組件
    Column() {
      // 輸入框和搜索按鈕組合，使用Row布局，水平排列
      Row() {
        // 創建一個TextInput輸入框
        TextInput({
          placeholder: '請輸入內容',
          text: this.inputValue
        })
          .width('524.31lpx') // 設置寬度
          .height('70lpx') // 設置高度
          .fontSize('27lpx') // 設置字體大小
          .backgroundColor("#ffffff") // 設置背景顏色
            // 輸入框內容改變時，同步更新狀態變量inputValue
          .onChange((value) = > {
            this.inputValue = value
          })

        // 創建一個搜索按鈕
        Button('搜索')
          // 按鈕點擊事件，處理搜索邏輯
          .onClick(() = > {
            // 遍歷歷史記錄數組，若找到與輸入框內容相同的記錄，從數組中移除
            for (let i = 0; i < this.historyValueArr.length; i++) {
              if (this.historyValueArr[i] === this.inputValue) {
                this.historyValueArr.splice(i, 1);
                break;
              }
            }

            // 將輸入框內容添加到歷史記錄數組的首位
            this.historyValueArr.unshift(this.inputValue);

            // 若歷史記錄超過10條，則移除最后一項
            if (this.historyValueArr.length > 10) {
              this.historyValueArr.splice(this.historyValueArr.length - 1);
            }
          })
      }
      // 設置Row組件的寬度、對齊方式和內外邊距
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left: '37lpx',
        top: '11lpx',
        bottom: '11lpx',
        right: '15lpx'
      })

      // 搜索歷史標題和清除記錄按鈕組合，同樣使用Row布局
      Row() {
        // 搜索歷史標題
        Text('搜索歷史').fontSize('31lpx').fontColor("#000000")

        // 清空記錄按鈕
        Text('清空記錄')
          .fontSize('27lpx').fontColor("#828385")
          // 清空記錄按鈕點擊事件，清空歷史記錄數組
          .onClick(() = > {
            this.historyValueArr.length = 0;
          })
      }
      // 設置Row組件的寬度、對齊方式和內外邊距
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({
        left: '37lpx',
        top: '11lpx',
        bottom: '11lpx',
        right: '37lpx'
      })

      // 使用Flex布局，按行（FlexDirection.Row）包裹搜索歷史記錄
      Flex({
        direction: FlexDirection.Row,
        wrap: FlexWrap.Wrap,
      }) {
        // 遍歷歷史記錄數組，創建Text組件展示每一條歷史記錄
        ForEach(this.historyValueArr, (item: string, value: number) = > {
          Text(item)
            .padding({
              left: '15lpx',
              right: '15lpx',
              top: '7lpx',
              bottom: '7lpx'
            })
              // 設置背景顏色、圓角和間距
            .backgroundColor("#EFEFEF")
            .borderRadius(10)
            .margin('11lpx')
        })
      }
      // 設置Flex容器的寬度和內外邊距
      .width('100%')
      .padding({
        left: '26lpx',
        top: '11lpx',
        bottom: '11lpx',
        right: '26lpx'
      })
    }
    // 設置Column容器的寬度、高度和背景顏色
    .width('100%')
    .height('100%')
    .backgroundColor("#F8F8F8")
  }
}

審核編輯 黃宇