提供搜索框组件,用于提供用户搜索内容的输入区域。
子组件
无
构造函数
init(String, String, Option<CJResource>,Option<SearchController>)
public init(value!: String = "", placeholder!: String = "", icon!: Option<CJResource> = Option.None, controller!: Option<SearchController> = Option.None)
创建一个Search组件。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
value | String | 否 | "" | 搜索文本值。 |
placeholder | String | 否 | "" | 未输入时,搜索框内的提示文本 |
icon | Option<CJResource> | 否 | Option.None | 搜索图标路径,默认使用系统搜索图标,支持的图标格式: svg, jpg和png。 |
controller | Option<SearchController> | 否 | Option.None | 搜索框控制器。 |
函数
searchButton(String)
public func searchButton(text: String): This
设置searchButton的图标。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
text | String | 是 | - | 图标的URI。 |
placeholderColor(Color)
public func placeholderColor(color: Color): This
设置placeHolder的颜色。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | Color | 是 | - | 设置的目标颜色。 |
placeholderColor(UInt32)
public func placeholderColor(color: UInt32): This
设置placeHolder的颜色。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | UInt32 | 是 | - | 设置的目标颜色。 |
placeholderFont(Length, FontWeight, FontStyle, String)
public func placeholderFont( size!: Length = DEFAULT_SIZE.fp, weight!: FontWeight = FontWeight.W400, style!: FontStyle = FontStyle.Normal, family!: String = "" ): This
设置placeHolder的样式。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
size | Length | 否 | DEFAULT_SIZE.fp | placeholder的目标大小。 |
weight | FontWeight | 否 | FontWeight.W400 | placeholder字体的目标粗细。 |
style | FontStyle | 否 | FontStyle.Normal | placeholder字体的目标样式。 |
family | String | 否 | "" | placeholder字体的样式族。 |
textFont(Length, FontWeight, FontStyle, String)
public func textFont( size!: Length = DEFAULT_SIZE.fp, weight!: FontWeight = FontWeight.W400, style!: FontStyle = FontStyle.Normal, family!: String = "" ): This
设置Search组件输入字体的样式。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
size | Length | 否 | DEFAULT_SIZE.fp | 输入框的目标大小。 |
weight | FontWeight | 否 | FontWeight.W400 | 输入字体的目标粗细。 |
style | FontStyle | 否 | FontStyle.Normal | 输入字体的目标样式。 |
family | String | 否 | "" | 输入字体的样式族。 |
borderWidth(Length)
public func borderWidth(width: Length): This
设置search组件的边界宽度。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
width | Length | 是 | - | search组件边界的宽度。 |
borderColor(Color)
public func borderColor(color: Color): This
设置search组件的边界颜色。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | Color | 是 | - | search组件边界的颜色。 |
borderStyle(BorderStyle)
public func borderStyle(style: BorderStyle): This
设置search组件的边界样式。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
style | BorderStyle | 是 | - | search组件边界的样式。 |
borderRadius(Length)
public func borderRadius(radius: Length): This
设置search组件的边界圆角半径。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
radius | Length | 是 | - | search组件边界的圆角半径。 |
copyOption(Length)
public func copyOption(copyOption: CopyOptions): This
设置search组件的复制选项。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
copyOption | CopyOptions | 是 | - | search组件的复制选项。 |
height(Length)
public func height(value: Length): This
设置search组件的高度。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
value | Length | 是 | - | search组件的高度。 |
枚举说明
CopyOptions
枚举值 | 描述 |
---|---|
None | 不支持复制。 |
InApp | 支持应用内复制。 |
LocalDevice | 支持设备内复制。 |
自定义类型
SearchController
Search组件的控制器,通过它操作Search组件。
构造函数
init()
创建一个SearchController对象。
函数
public func caretPosition(carePosition: Int32): Unit
- 设置光标到给定位置。
参数名 | 参数类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
carePosition | Int32 | 是 | - | 从字符串开始到光标目标位置的长度。 |
事件
onSubmit((String) -> Unit)
public func onSubmit(callback: (String)->Unit): This
当点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发。
参数名 | 参数类型 | 描述 |
---|---|---|
callback | (String) -> Unit | 提交搜索内容回调。 |
onChange((String) -> Unit)
public func onChange(callback: (String)->Unit): This
当输入框内搜索内容发生变化时触发。
参数名 | 参数类型 | 描述 |
---|---|---|
callback | (String) -> Unit | 搜索内容变化回调。 |
onCopy((String) -> Unit)
public func onCopy(callback: (String)->Unit): This
当用户将框内内容复制到系统剪切板时触发。
参数名 | 参数类型 | 描述 |
---|---|---|
callback | (String) -> Unit | 组件触发系统剪切板复制操作的回调。 |
onCut((String) -> Unit)
public func onCut(callback: (String)->Unit): This
当用户将框内内容剪切到系统剪切板时触发。
参数名 | 参数类型 | 描述 |
---|---|---|
callback | (String) -> Unit | 组件触发系统剪切板剪切操作的回调。 |
onPaste((String) -> Unit)
public func onPaste(callback: (String)->Unit): This
当用户将系统剪切板内容粘贴到框内时触发。
参数名 | 参数类型 | 描述 |
---|---|---|
callback | (String) -> Unit | 组件触发系统剪切板粘贴操作的回调。 |
通用属性/通用事件
通用属性:除文本样式外,其余全部支持。
通用事件:全部支持。
示例
@Entry @Component class MyView{ @State var changeValue: String = "" @State var submitValue: String = "" let controller = SearchController() func build() { Flex(FlexParams(direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center)) { Text(submitValue) Text(changeValue) Search(value: "", placeholder: "Type to search", controller: controller) .searchButton("Search") .width(300) .height(35) .backgroundColor(0xDDDDDD) .placeholderColor(0x000000) .onSubmit({value => submitValue = value }) .onChange({value => changeValue = value }) .margin(top: 30) .id("searchComponent") } } }
[图片上传失败...(image-aa2fea-1734953972235)]
还没有申请仓颉内测资格的朋友可以看一下下面这篇文章
如对您有帮助,帮忙点个“在看 、关注” 让更多的人受益~!
技术交流群可加wx“LB-9191” 备注cangjie