一.RichText

富文本组件，解析并显示HTML格式文本。

事件

onStart

onStart(callback: () => void)

加载网页时触发。

onComplete

onComplete(callback: () => void)

网页加载结束时触发。

二.ScrollBar

滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。

示例代码:

  sc:Scroller=new Scroller()
  @State lists:number[]=[1,2,3,4,5,6,7,8,9,0,12,13,14]
  @Builder scrollBarTest(){
    Stack({alignContent:Alignment.TopEnd}){
      Scroll(this.sc){
        Column(){
          ForEach(this.lists,(i:number)=>{
            Row(){
              Text(i.toString())
            }.width('90%').height(200).border({style:BorderStyle.Solid,width:1,color:'red'})
          })
        }

      }
      ScrollBar({scroller:this.sc}){
        Text().width(20).backgroundColor('red').height(100)
      }.width(20).backgroundColor('gray')
    }

  }

 

 三.Search

搜索框组件，适用于浏览器的搜索内容输入框等应用场景。

属性:

searchButton:设置搜索框末尾搜索按钮。

参数名	类型	必填	说明
value	string	是	搜索框末尾搜索按钮文本内容。
option	SearchButtonOptions	否	配置搜索框文本样式。 默认值： { fontSize: '16fp', color: '#ff3f97e9' }

placeholderColor:设置placeholder文本颜色。

参数名	类型	必填	说明
value	ResourceColor	是	placeholder文本颜色。 默认值：'#99182431'。

placeholderFont: 设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。

参数名	类型	必填	说明
value	Font	否	placeholder文本样式。

 textFont:设置搜索框内输入文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。

参数名	类型	必填	说明
value	Font	否	搜索框内输入文本样式。

 textAlign:设置文本在搜索框中的对齐方式。目前支持的对齐方式有：Start、Center、End。

参数名	类型	必填	说明
value	TextAlign	是	文本在搜索框中的对齐方式。 默认值：TextAlign.Start

 copyOption9+:设置输入的文本是否可复制。设置CopyOptions.None时，当前Search中的文字无法被复制或剪切，仅支持粘贴。

参数名	类型	必填	说明
value	CopyOptions	是	输入的文本是否可复制。 默认值：CopyOptions.LocalDevice，支持设备内复制。

 searchIcon10+:设置左侧搜索图标样式。

参数名	类型	必填	说明
value	IconOptions	是	左侧搜索图标样式。 默认值： { size: '16vp', color: '#99ffffff', src: ' ' }

cancelButton10+:设置右侧清除按钮样式。

参数名	类型	必填	说明
value	{ style:? CancelButtonStyle, icon:? IconOptions }	是	右侧清除按钮样式。 style：右侧图标显示状态。 icon：右侧图标。 默认值： { style：CancelButtonStyle.INPUT, icon: { size: '16vp', color: '#99ffffff', src: ' ' } } 当style为CancelButtonStyle.CONSTANT时，默认显示清除样式。

fontColor10+:设置输入文本的字体颜色。文本通用属性fontSize、fontStyle、fontWeight和fontFamily在textFont属性中设置。

参数名	类型	必填	说明
value	ResourceColor	是	输入文本的字体颜色。 默认值：'#FF182431'。

 caretStyle10+:设置光标样式。

参数名	类型	必填	说明
value	CaretStyle	是	光标样式。 默认值： { width: '1.5vp', color: '#007DFF' }

enableKeyboardOnFocus10+: 设置Search通过点击以外的方式获焦时，是否绑定输入法。

参数名	类型	必填	说明
value	boolean	是	Search获焦时，是否绑定输入法 默认值：true。

selectionMenuHidden10+: 设置长按输入框或者右键输入框时，是否弹出文本选择菜单。

参数名	类型	必填	说明
value	boolean	是	长按输入框或者右键输入框时，是否弹出文本选择菜单。 默认值：false

 customKeyboard10+:设置自定义键盘。

参数名	类型	必填	说明
value	CustomBuilder	是	自定义键盘。
options12+	KeyboardOptions	否	设置自定义键盘是否支持避让功能。

 type11+:设置输入框类型。

参数名	类型	必填	说明
value	SearchType	是	输入框类型。 默认值：SearchType.Normal

 maxLength11+:设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制，将无法继续输入字符。

参数名	类型	必填	说明
value	number	是	文本的最大输入字符数。

 enterKeyType12+:设置输入法回车键类型

参数名	类型	必填	说明
value	EnterKeyType	是	输入法回车键类型。 默认值：EnterKeyType.Search

 lineHeight12+:设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，number类型时单位为fp。

参数名	类型	必填	说明
value	number | string | Resource	是	文本的文本行高。

 decoration12+:设置文本装饰线类型样式及其颜色。

参数名	类型	必填	说明
value	TextDecorationOptions	是	文本装饰线对象。 默认值：{ type: TextDecorationType.None, color: Color.Black, style: TextDecorationStyle.SOLID }

 letterSpacing12+:设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。

参数名	类型	必填	说明
value	number | string | Resource	是	文本字符间距。

 fontFeature12+:设置文字特性效果，比如数字等宽的特性。

参数名	类型	必填	说明
value	string	是	文字特性效果。

selectedBackgroundColor12+: 设置文本选中底板颜色。如果未设置不透明度，默认为20%不透明度。

参数名	类型	必填	说明
value	ResourceColor	是	文本选中底板颜色。 默认为20%不透明度。

inputFilter12+: 通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。

参数名	类型	必填	说明
value	ResourceStr	是	正则表达式。
error	Callback< string >	否	正则匹配失败时，返回被过滤的内容。

 textIndent12+:设置首行文本缩进。

参数名	类型	必填	说明
value	Dimension	是	首行文本缩进。 默认值：0

 minFontSize12+:设置文本最小显示字号。

参数名	类型	必填	说明
value	number | string | Resource	是	文本最小显示字号。

maxFontSize12+:设置文本最大显示字号。

参数名	类型	必填	说明
value	number | string | Resource	是	文本最大显示字号。

IconOptions10+对象说明

参数名	参数类型	必填	参数描述
size	Length	否	图标尺寸，不支持百分比。
color	ResourceColor	否	图标颜色。
src	ResourceStr	否	图标/图片源。

SearchButtonOptions10+对象说明

参数名	参数类型	必填	参数描述
fontSize	Length	否	文本按钮字体大小，不支持百分比。
fontColor	ResourceColor	否	文本按钮字体颜色。

 

TextDecorationOptions12+对象说明

名称	参数类型	必填	描述
type	TextDecorationType	是	设置文本装饰线样式。
color	ResourceColor	否	设置文本装饰线颜色。
style	TextDecorationStyle	否	设置文本装饰线样式。

InsertValue12+对象说明

名称	参数类型	必填	描述
insertOffset	number	是	插入的值的位置信息。
insertValue	string	是	插入的值。

DeleteValue12+对象说明

名称	参数类型	必填	描述
deleteOffset	number	是	删除的值的位置信息。
direction	TextDeleteDirection	是	删除值的方向。
deleteValue	string	是	删除的值。

CancelButtonStyle10+枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

名称	描述
CONSTANT	清除按钮常显样式。
INVISIBLE	清除按钮常隐样式。
INPUT	清除按钮输入样式。

SearchType11+枚举说明

名称	值	描述
NORMAL	0	基本输入模式。 支持输入数字、字母、下划线、空格、特殊字符。 元服务API： 从API version 12开始，该接口支持在元服务中使用。
NUMBER	2	纯数字输入模式。 元服务API： 从API version 12开始，该接口支持在元服务中使用。
PHONE_NUMBER	3	电话号码输入模式。 支持输入数字、空格、+ 、-、*、#、(、)，长度不限。 元服务API： 从API version 12开始，该接口支持在元服务中使用。
EMAIL	5	邮箱地址输入模式。 支持数字，字母，下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、{、|、}、~，以及@字符（只能存在一个@字符）。 元服务API： 从API version 12开始，该接口支持在元服务中使用。
NUMBER_DECIMAL12+	12	带小数点的数字输入模式。 支持数字，小数点（只能存在一个小数点）。

SelectionOptions12+:setTextSelection的选中文字时的配置。

名称	类型	必填	说明
menuPolicy	MenuPolicy	否	菜单弹出的策略。

事件

onSubmit:点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。

参数名	类型	必填	说明
value	string	是	当前搜索框中输入的文本内容。

 onChange:输入内容发生变化时，触发该回调。

参数名	类型	必填	说明
value	string	是	当前搜索框中输入的文本内容。

 onCopy:长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。

参数名	类型	必填	说明
value	string	是	复制的文本内容。

 onCut:长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。

参数名	类型	必填	说明
value	string	是	剪切的文本内容。

 onPaste:长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。

参数名	类型	必填	说明
value	string	是	粘贴的文本内容。
event11+	PasteEvent	否	用户自定义的粘贴事件。

onTextSelectionChange10+:文本选择的位置发生变化时，触发该回调。

参数名	类型	必填	说明
selectionStart	number	是	文本选择区域起始位置，文本框中文字的起始位置为0。
selectionEnd	number	否	文本选择区域结束位置。

示例代码:

 sc:Scroller=new Scroller()
  @State lists:number[]=[1,2,3,4,5,6,7,8,9,0,12,13,14]
  @Builder scrollBarTest(){
    Stack({alignContent:Alignment.TopEnd}){
      Scroll(this.sc){
        Column(){
          ForEach(this.lists,(i:number)=>{
            Row(){
              Text(i.toString())
            }.width('90%').height(200).border({style:BorderStyle.Solid,width:1,color:'red'})
          })
        }

      }
      ScrollBar({scroller:this.sc}){
        Text().width(20).backgroundColor('red').height(100)
      }.width(20).backgroundColor('gray')
    }

  }
  searchController:SearchController=new SearchController()
  aboutToAppear(): void {
    this.searchController.caretPosition(1)
  }
  @Builder jp(){
    Row().width('100%').height(300).backgroundColor('#abcdef')
  }
  @Builder searchTest(){
    Search({
      value:'张三',placeholder:'请输入搜索内容',
      // icon:'/img/startIcon.png'
      controller:this.searchController
    })
      .searchButton('搜索',{fontSize:18,fontColor:'red'})
      .placeholderColor('red')
      .placeholderFont({size:18,style:1,weight:700})
      .textFont({size:18,weight:900,style:1})
      .textAlign(TextAlign.Center)
      .searchIcon({size:20,src:$r('sys.symbol.chevron_up_2'),color:'red'})
      .cancelButton({style:CancelButtonStyle.CONSTANT,
        icon:{size:20,color:'red',src:$r('sys.symbol.chevron_up_circle')}})
      .fontColor('red')
      .caretStyle({color:'red',width:5})
      // .selectionMenuHidden(true)
      // .customKeyboard(this.jp(),{supportAvoidance:true})
      .type(SearchType.NORMAL)
      .enterKeyType(EnterKeyType.Search)
      .lineHeight(30)
      .decoration({type:TextDecorationType.Underline,color:'blue',style:TextDecorationStyle.SOLID})
      .letterSpacing(10)
      .selectedBackgroundColor('red')
      .onSubmit((val)=>{//搜索按下
        console.log(val)
        //todo 跳转搜索结果
      })
      .onChange(val=>console.log(val))
      .onCopy(val=>console.log('复制的内容'+val))
      .onCut(val=>console.log('剪切的内容'+val))
      .onPaste(val=>console.log('粘贴的内容'+val))
      .onTextSelectionChange((s,e)=>console.log(`开始下标:${s},结束下标:${e}`))
      .onContentScroll((x,y)=>console.log(`x:${x},y:${y}`))
      .onEditChange(isEdit=>console.log(isEdit?'输入中':'输入完成'))
      .onWillInsert((iv)=>(iv.insertValue==='.'?false:true))
      .onDidInsert(val=>console.log('输入的内容'+val.insertValue))
      .onDidDelete(val=>console.log('删除的内容'+val.deleteValue))
      .onWillDelete((iv)=>(iv.deleteValue==='三'?false:true))
    Row(){
      Button('光标').onClick(()=>{
        this.searchController.caretPosition(1)
      })
      Button('退出编辑').onClick(()=>{
        this.searchController.stopEditing()
      })
      Button('高亮').onClick(()=>{
        this.searchController.setTextSelection(0,10,{menuPolicy:MenuPolicy.SHOW})
      })
    }




  }

四. Select

提供下拉选择菜单，可以让用户在多个选项之间选择

属性:

selected:设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。

参数名	类型	必填	说明
value	number | Resource11+	是	下拉菜单初始选项的索引。

value:设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。

参数名	类型	必填	说明
value	ResourceStr11+	是	下拉按钮本身的文本内容。

controlSize12+:设置Select组件的尺寸

参数名	类型	必填	说明
value	ControlSize11+	是	Select组件的尺寸。 默认值:ControlSize.NORMAL

menuItemContentModifier12+:定制Select下拉菜单项内容区的方法。

参数名	类型	必填	说明
modifier	ContentModifier<MenuItemConfiguration>	是	在Select组件上，定制下拉菜单项内容区的方法。 modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

divider12+:设置分割线样式，不设置该属性则按“默认值”展示分割线。

参数名	类型	必填	说明
options	Optional<DividerOptions> | null	是	1.设置DividerOptions，则按设置的样式显示分割线。 默认值： { strokeWidth: '1px' , color: '#33182431' } 2.设置为null时，不显示分割线。 3.strokeWidth设置过宽时，会覆盖文字。分割线会从每一个Item底部开始，同时向上向下画分割线。 4.startMargin和endMargin的默认值与不设置divider属性时的分割线样式保持一致。startMargin和endMargin的和与optionWidth的值相等时，不显示分割线。 startMargin和endMargin的和超过optionWidth的值时，按照默认样式显示分割线。

font:设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示

参数名	类型	必填	说明
value	Font	是	下拉按钮本身的文本样式。 API Version 11及以前默认值： { size: '16fp', weight: FontWeight.Medium } 从API Version 12以后， 如果设置controlSize的值为：controlSize.SMALL，size默认值是'14fp'，否则还是'16fp'。

fontColor:设置下拉按钮本身的文本颜色。

参数名	类型	必填	说明
value	ResourceColor	是	下拉按钮本身的文本颜色。 默认值：'#E5182431'

selectedOptionBgColor:设置下拉菜单选中项的背景色。

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单选中项的背景色。 默认值：'#33007DFF'

selectedOptionFont:设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

参数名	类型	必填	说明
value	Font	是	下拉菜单选中项的文本样式。 默认值： { size: '16fp', weight: FontWeight.Regular }

selectedOptionFontColor::设置下拉菜单选中项的文本颜色。

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单选中项的文本颜色。 默认值：'#ff007dff'

optionBgColor:设置下拉菜单项的背景色。

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单项的背景色。 默认值：'#ffffffff'

optionFont:设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

参数名	类型	必填	说明
value	Font	是	下拉菜单项的文本样式。 默认值： { size: '16fp', weight: FontWeight.Regular }

optionFontColor:设置下拉菜单项的文本颜色。

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单项的文本颜色。 默认值：'#ff182431'

space10+:设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。

参数名	类型	必填	说明
value	Length	是	下拉菜单项的文本与箭头之间的间距。 默认值：8

arrowPosition10+;设置下拉菜单项的文本与箭头之间的对齐方式。

参数名	类型	必填	说明
value	ArrowPosition	是	下拉菜单项的文本与箭头之间的对齐方式。 默认值：ArrowPosition.END

menuAlign10+:设置下拉按钮与下拉菜单间的对齐方式。

参数名	类型	必填	说明
alignType	MenuAlignType	是	对齐方式类型。 默认值：MenuAlignType.START
offset	Offset	否	按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。 默认值：{dx: 0, dy: 0}

optionWidth11+:设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。

参数名	类型	必填	说明
value	Dimension | OptionWidthMode	是	下拉菜单项的宽度。

optionHeight11+:设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。

参数名	类型	必填	说明
value	Dimension	是	下拉菜单显示的最大高度。

menuBackgroundColor11+:设置下拉菜单的背景色。

参数名	类型	必填	说明
value	ResourceColor	是	下拉菜单的背景色。 默认值：Color.Transparent

menuBackgroundBlurStyle11+:设置下拉菜单的背景模糊材质。

参数名	类型	必填	说明
value	BlurStyle	是	下拉菜单的背景模糊材质。 默认值：BlurStyle.COMPONENT_ULTRA_THICK

示例代码:

@Builder selectTest(){
  Select([
    {value:'北京',icon:$r('app.media.startIcon')},
    {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.chevron_down_circle'))},
    {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.chef_hat'))},
    {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.checkmark_square_on_square_fill'))},
    {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.cheers'))},
    {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_and_arrow_down'))},
  ])
    .height(20).width(80)
    .selected(1)
    .value('--地址--')
    .constraintSize({minWidth:120,maxWidth:200})
    .divider({strokeWidth:3,color:'red',startMargin:10,endMargin:10})
    .fontColor('red')
    .font({size:18,style:FontStyle.Italic,weight:900})
    .selectedOptionBgColor(Color.Orange)
    .selectedOptionFont({size:30})
    .selectedOptionFontColor(Color.White)
    .optionBgColor(Color.Blue)
    .optionFont({size:20})
    .optionFontColor(Color.Black)
    .space(10)
    .arrowPosition(ArrowPosition.START)
    .menuAlign(MenuAlignType.END,{dx:10,dy:10})
    .optionWidth(200)
    .optionHeight(300)
    .menuBackgroundColor(Color.Green)
    .menuBackgroundBlurStyle(BlurStyle.Thin)
    .onSelect((index,val)=>{
      console.log(`索引:${index},值:${val}`)
    })
    Select([
      {value:'北京',icon:$r('app.media.startIcon')},
      {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.chevron_down_circle'))},
      {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.chef_hat'))},
      {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.checkmark_square_on_square_fill'))},
      {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.cheers'))},
      {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_and_arrow_down'))},
    ])
      .value('--地址--')
      .menuItemContentModifier(new MySelect())

  }