閱讀(926) 書簽贊(0) 我要糾錯

搜索框組件

2024-01-22 17:25 更新

搜索框組件，適用于瀏覽器的搜索內(nèi)容輸入框等應(yīng)用場景。

說明

該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。

子組件

無

接口

Search(options?: { value?: string, placeholder?: string, icon?: string, controller?: SearchController })

參數(shù):

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
value	string	否	設(shè)置當(dāng)前顯示的搜索文本內(nèi)容。
placeholder	string	否	設(shè)置無輸入時的提示文本。
icon	string	否	設(shè)置搜索圖標(biāo)路徑，默認(rèn)使用系統(tǒng)搜索圖標(biāo)。說明： icon的數(shù)據(jù)源，支持本地圖片和網(wǎng)絡(luò)圖片。 - 支持的圖片格式包括png、jpg、bmp、svg、gif和pixelmap。 - 支持Base64字符串。格式data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], 其中[base64 data]為Base64字符串?dāng)?shù)據(jù)。
controller	SearchController	否	設(shè)置Search組件控制器。

屬性

除支持通用屬性外，還支持以下屬性：

名稱	參數(shù)類型	描述
searchButton	string	搜索框末尾搜索按鈕文本內(nèi)容，默認(rèn)無搜索按鈕。
placeholderColor	ResourceColor	設(shè)置placeholder文本顏色。
placeholderFont	Font	設(shè)置搜索框內(nèi)輸入文本樣式，包括字體大小，字體粗細，字體族，字體風(fēng)格。目前僅支持默認(rèn)字體族。
textFont	Font	設(shè)置搜索框內(nèi)輸入文本樣式，包括字體大小，字體粗細，字體族，字體風(fēng)格。目前僅支持默認(rèn)字體族。
textAlign	TextAlign	設(shè)置文本在搜索框中的對齊方式。默認(rèn)值：TextAlign.Start
copyOption9+	CopyOptions	設(shè)置輸入的文本是否可復(fù)制。

事件

除支持通用事件外，還支持以下事件：

名稱	功能描述
onSubmit(callback: (value: string) => void)	點擊搜索圖標(biāo)、搜索按鈕或者按下軟鍵盤搜索按鈕時觸發(fā)該回調(diào)。 -value: 當(dāng)前搜索框中輸入的文本內(nèi)容。
onChange(callback: (value: string) => void)	輸入內(nèi)容發(fā)生變化時，觸發(fā)該回調(diào)。 -value: 當(dāng)前搜索框中輸入的文本內(nèi)容。
onCopy(callback: (value: string) => void)	長按搜索框彈出剪切板之后，點擊剪切板的復(fù)制按鈕觸發(fā)該回調(diào)。 -value: 復(fù)制的文本內(nèi)容。
onCut(callback: (value: string) => void)	長按搜索框彈出剪切板之后，點擊剪切板的剪切按鈕觸發(fā)該回調(diào)。 -value: 剪切的文本內(nèi)容。
onPaste(callback: (value: string) => void)	長按搜索框彈出剪切板之后，點擊剪切板的粘貼按鈕觸發(fā)該回調(diào)。 -value: 粘貼的文本內(nèi)容。

SearchController

Search組件的控制器，目前通過它可控制Search組件的光標(biāo)位置。

導(dǎo)入對象


controller: SearchController = new SearchController()

caretPosition

caretPosition(value: number): void

設(shè)置輸入光標(biāo)的位置。

參數(shù):

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
value	number	是	從字符串開始到光標(biāo)所在位置的長度。

示例


// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
        .searchButton('SEARCH')
        .width(400)
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin(20)
      Button('Set caretPosition 1')
        .onClick(() => {
          // 設(shè)置光標(biāo)位置到輸入的第一個字符后
          this.controller.caretPosition(1)
        })
    }.width('100%')
  }
}