基础组件:

接口

RichText(content:string)

参数:

@State data:string= '<h1 style="text-align: center;">h1标题</h1>' +
  '<h1 style="text-align: center;"><i>h1斜体</i></h1>' +
  '<h1 style="text-align: center;"><u>h1下划线</u></h1>' +
  '<h2 style="text-align: center;">h2标题</h2>' +
  '<h3 style="text-align: center;">h3标题</h3>' +
  '<p style="text-align: center;">p常规</p><hr/>' +
  '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0 auto;">' +
  '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +
  '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
  '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>';
  @Builder richTextTest(){
    RichText("<h1>富文本</h1>")
  }

ScrollBar

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

子组件

可以包含单个子组件。

属性

除支持通用属性外，还支持以下属性：

searchButton

searchButton(value: string, option?: SearchButtonOptions)

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

参数：

placeholderColor

placeholderColor(value: ResourceColor)

设置placeholder文本颜色。

参数：

placeholderFont

placeholderFont(value?: Font)

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

参数：

textFont

textFont(value?: Font)

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

参数：

textAlign

textAlign(value: TextAlign)

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

参数：

searchIcon

searchIcon(value: IconOptions)

设置左侧搜索图标样式。

参数：

cancelButton

cancelButton(value: { style?: CancelButtonStyle, icon?: IconOptions })

设置右侧清除按钮样式。

参数：

fontColor

fontColor(value: ResourceColor)

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

参数：

caretStyle

caretStyle(value: CaretStyle)

设置光标样式。

参数：

selectionMenuHidden

selectionMenuHidden(value: boolean)

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

参数：

customKeyboard

customKeyboard(value: CustomBuilder, options?: KeyboardOptions)

设置自定义键盘。

当设置自定义键盘时，输入框激活后不会打开系统输入法，而是加载指定的自定义组件。

自定义键盘的高度可以通过自定义组件根节点的height属性设置，宽度不可设置，使用系统默认值。

自定义键盘采用覆盖原始界面的方式呈现，不会对应用原始界面产生压缩或者上提。

自定义键盘无法获取焦点，但是会拦截手势事件。

默认在输入控件失去焦点时，关闭自定义键盘，开发者也可以通过stopEditing方法控制键盘关闭。

如果设备支持拍摄输入，设置自定义键盘后，该输入框会不支持拍摄输入。

参数：

type(value: SearchType)

设置输入框类型。

参数：

enterKeyType

enterKeyType(value: EnterKeyType)

设置输入法回车键类型。

参数：

lineHeight

lineHeight(value: number | string | Resource)

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

参数：

decoration

decoration(value: TextDecorationOptions)

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

参数：

letterSpacing12+

letterSpacing(value: number | string | Resource)

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

当取值为负值时，文字会发生压缩，负值过小时会将组件内容区大小压缩为0，导致无内容显示。

参数：

selectedBackgroundColor

selectedBackgroundColor(value: ResourceColor)

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

参数：

事件

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

onSubmit

onSubmit(callback: (value: string) => void)

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

参数：

onChange

onChange(callback: (value: string) => void)

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

参数：

onCopy

onCopy(callback: (value: string) => void)

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

参数：

onCut

onCut(callback: (value: string) => void)

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

参数：

onPaste

onPaste(callback: (value: string, event: PasteEvent) => void)

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

参数：

onTextSelectionChange

onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)

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

参数：

onContentScroll

onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)

文本内容滚动时，触发该回调。

参数：

onEditChange

onEditChange(callback: Callback< boolean >)

输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。

参数：

onWillInsert

onWillInsert(callback: Callback<InsertValue, boolean>)

在将要输入时，触发该回调。

参数：

onDidInsert

onDidInsert(callback: Callback<InsertValue>)

在输入完成时，触发该回调。

参数：

onWillDelete

onWillDelete(callback: Callback<DeleteValue, boolean>)

在将要删除时，触发该回调。

参数：

onDidDelete

onDidDelete(callback: Callback<DeleteValue>)

在删除完成时，触发该回调。

参数：

SearchController

Search组件的控制器继承自TextContentControllerBase。

caretPosition

caretPosition(value: number): void

设置输入光标的位置。

参数:

stopEditing

stopEditing(): void

退出编辑态。

setTextSelection

setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void;

组件在获焦状态下，调用该接口设置文本选择区域并高亮显示，且只有在selectionStart小于selectionEnd时，文字才会被选取、高亮显示。

参数：

Select

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

子组件

无

SelectOption对象说明

value

value(value: ResourceStr)

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

参数：

controlSize

controlSize(value: ControlSize)

设置Select组件的尺寸。

参数：

controlSize、width、height接口作用优先级：

1）如果开发者只设置了width和height，当文字大小设置的是比较大的值的时候，文字超出组件大小，且以省略号方式显示；

2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应文字，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight；

3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。

divider

divider(options: Optional<DividerOptions> | null)

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

参数：

font

font(value: Font)

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

参数：

fontColor

fontColor(value: ResourceColor)

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

参数：

selectedOptionBgColor

selectedOptionBgColor(value: ResourceColor)

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

参数：

selectedOptionFont

selectedOptionFont(value: Font)

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

参数：

selectedOptionFontColor

selectedOptionFontColor(value: ResourceColor)

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

参数：

optionBgColor

optionBgColor(value: ResourceColor)

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

参数：

optionFont

optionFont(value: Font)

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

参数：

optionFontColor

optionFontColor(value: ResourceColor)

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

参数：

space

space(value: Length)

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

参数：

arrowPosition

arrowPosition(value: ArrowPosition)

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

参数：

menuAlign

menuAlign(alignType: MenuAlignType, offset?: Offset)

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

参数：

optionWidth

optionWidth(value: Dimension | OptionWidthMode )

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

当设置为undefined、null、负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于等于0。

参数：

optionHeight

optionHeight(value: Dimension)

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

当设置为undefined、null、负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。

正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。

参数：

menuBackgroundColor

menuBackgroundColor(value: ResourceColor)

设置下拉菜单的背景色。

参数：

menuBackgroundBlurStyle

menuBackgroundBlurStyle(value: BlurStyle)

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

OptionWidthMode11+枚举说明

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

ArrowPosition10+枚举说明

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

MenuAlignType10+枚举说明

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

MenuItemConfiguration12+对象说明

onSelect

onSelect(callback: (index: number, value: string) => void)

下拉菜单选中某一项的回调。

参数：

示例代码：

class MySelect implements ContentModifier<MenuItemConfiguration>{
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(sel)
  }
}



@Builder function sel(config:MenuItemConfiguration){
   Row(){
     Text(config.index+''+config.value)
     if (config.symbolIcon){
       SymbolGlyph().attributeModifier(config.symbolIcon).fontSize(24).fontColor(['red'])
     }else {
       Image(config.icon).height(30)
     }
     if (config.selected){
       SymbolGlyph($r('sys.symbol.hand_thumbsup_fill')).fontColor(['#CDD8FF'])
     }
   }.width('80%').height(30)
  .backgroundColor(config.selected?Color.Orange:Color.Transparent)
  .onClick(()=>{
    config.triggerSelect(config.index,config.value.toString())
  })
}


@Builder jp(){
    Row().width('100%').height(300).backgroundColor('#89C2D1')
  }
  @Builder searchTest(){
    Search({
        value:'张三',placeholder:'搜输入搜索内容',controller:this.searchController
        // icon:'/img/t1.png'
    })
      .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.circle_below_small_triangle'),color:'red'})
      .cancelButton({style:CancelButtonStyle.INPUT,
        icon:{size:20,color:'red',src:$r('sys.symbol.cinema')}})
      .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.DOUBLE})// 下划线
      .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.DEFAULT})
         })
    }
  }
sym1:SymbolGlyphModifier=new SymbolGlyphModifier($r('sys.symbol.circle_on_circle_filled'))
  @Builder selectTest(){
     Select([
       {value:'北京',icon:$r('app.media.t7')},
       {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_lefthalf_inset_filled'))},
       {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_grid_2x2'))},
       {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_below_plus_shield'))},
       {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.checkmark_circle'))},
       {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.chevron_down_2_viewfinder'))},
     ])
       .height(20).width(280)
       .selected(1)
       .value('--地址--')
       .constraintSize({minWidth:120,maxWidth:200})
       .divider({strokeWidth:1,color:'#99D9EA',startMargin:10,endMargin:10})
       .fontColor('#FFC5D9')
       .font({size:18,style:FontStyle.Italic,weight:900})
       .selectedOptionBgColor('#E0E6FF')
       .selectedOptionFont({size:20})
       .selectedOptionFontColor(Color.White)
       .optionBgColor('#D7F8FF')
       .optionFontColor(Color.Black)
       .space(10)
       .arrowPosition(ArrowPosition.START)
       .menuAlign(MenuAlignType.END,{dx:10,dy:10})
       .optionWidth(200)
       .optionHeight(300)
       .menuBackgroundColor('#E8FFF8')
       .menuBackgroundBlurStyle(BlurStyle.Thin)
       .onSelect((index,val)=>{
         console.log(`索引:${index},值:${val}`)
       })
    Select([
      {value:'北京',icon:$r('app.media.t7')},
      {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_lefthalf_inset_filled'))},
      {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_grid_2x2'))},
      {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.circle_below_plus_shield'))},
      {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.checkmark_circle'))},
      {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.chevron_down_2_viewfinder'))},
    ])
      .value('--地址--')
      .menuItemContentModifier(new MySelect())

  }

Slider

滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。

子组件

无

SliderOptions对象说明

SliderStyle枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

blockColor

blockColor(value: ResourceColor)

设置滑块的颜色。

当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。

参数：

trackColor

trackColor(value: ResourceColor | LinearGradient)

设置滑轨的背景颜色。

参数：

selectedColor

selectedColor(value: ResourceColor)

设置滑轨的已滑动部分颜色。

参数：

showSteps

showSteps(value: boolean)

设置当前是否显示步长刻度值。

参数：

showTips

showTips(value: boolean, content?: ResourceStr)

设置滑动时是否显示气泡提示。

当direction的值为Axis.Horizontal时，tip显示在滑块上方，如果上方空间不够，则在下方显示。值为Axis.Vertical时，tip显示在滑块左边，如果左边空间不够，则在右边显示。不设置周边边距或者周边边距比较小时，tip会被截断。

tip的绘制区域为Slider自身节点的overlay。

参数：

trackThickness

trackThickness(value: Length)

设置滑轨的粗细。设置为小于等于0的值时，取默认值。

为保证滑块和滑轨的SliderStyle样式，blockSize跟随trackThickness同比例增减。

当style为SliderStyle.OutSet时，trackThickness ：blockSize = 1 ：4，当style为SliderStyle.InSet时，trackThickness ：blockSize = 5 ：3。

在变更trackThickness过程中，若trackThickness的大小或者blockSize的大小超过slider组件的width或者height(SliderStyle.OutSet时可能trackThickness没超过，但是blockSize超过了)，取默认值。

参数：

blockBorderColor

blockBorderColor(value: ResourceColor)

设置滑块描边颜色。

当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderColor可设置默认圆形滑块描边颜色。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderColor不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockBorderColor可设置自定义形状中线的颜色。

参数：

blockBorderWidth

blockBorderWidth(value: Length)

设置滑块描边粗细。

当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderWidth可设置默认圆形滑块描边粗细。

当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderWidth不生效。

当滑块形状设置为SliderBlockType.SHAPE时，blockBorderWidth可设置自定义形状中线的粗细。

参数：

stepColor

stepColor(value: ResourceColor)

设置刻度颜色。

参数：

trackBorderRadius

trackBorderRadius(value: Length)

设置底板圆角半径。

参数：

selectedBorderRadius

selectedBorderRadius(value: Dimension)

设置已滑动部分（高亮）圆角半径。

参数：

blockSize

blockSize(value: SizeOptions)

设置滑块大小。

参数：

blockStyle

blockStyle(value: SliderBlockStyle)

设置滑块形状参数。

参数：

stepSize

stepSize(value: Length)

设置刻度大小（直径）。当值为0时，刻度点不显示，当值小于0时，取默认值。

参数：

sliderInteractionMode

sliderInteractionMode(value: SliderInteraction)

设置用户与滑动条组件交互方式。

参数：

minResponsiveDistance

minResponsiveDistance(value: number)

设置滑动响应的最小距离。

参数：

contentModifier

contentModifier(modifier: ContentModifier<SliderConfiguration>)

定制Slider内容区的方法。

参数：

slideRange

slideRange(value: SlideRange)

设置有效滑动区间。

参数：

事件

支持通用事件外，还支持以下事件：

letterSpacing

letterSpacing(value: number | string)

设置文本字符间距。取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布。

参数：

textCase

textCase(value: TextCase)

设置文本大小写。

参数：

lineHeight

lineHeight(value: Length)

设置文本行高。

参数：

font

font(value: Font)

设置文本样式。包括字体大小、字体粗细、字体族和字体风格。

参数：

textShadow

textShadow(value: ShadowOptions | Array<ShadowOptions>)

设置文字阴影效果。该接口支持以数组形式入参，实现多重文字阴影。不支持fill字段, 不支持智能取色模式。

参数：

baselineOffset

baselineOffset(value: LengthMetrics)

设置Span基线的偏移量。此属性与父组件的baselineOffset是共存的。

参数：

示例代码：

@Builder spanTest(){
    Text(){
      Span('文本子组件1')
        .decoration({style:TextDecorationStyle.SOLID,type:TextDecorationType.Overline,color:'red'})
      Span('文本子组件2')
        .letterSpacing(10)
      Span('AbcDef').textCase(TextCase.UpperCase)
        .textBackgroundStyle({
          color:Color.Orange,radius:0,
        })
        .baselineOffset(LengthMetrics.vp(10))
      Span('文本组件4').lineHeight(40)
        .font({size:20,style:FontStyle.Italic})
        .fontColor('#AACCE6')
        .textShadow({radius:10,offsetX:10,offsetY:10,color:'#E6CED5'})
    }
  }

Stepper

步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。

子组件

仅能包含子组件StepperItem。

prevLabel

prevLabel(value: string)

设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页外默认值都为“返回”。

参数：

nextLabel

nextLabel(value: string)

设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。

status

status(value?: ItemState)

设置步骤导航器nextLabel的显示状态。

参数：

ItemState枚举说明

onSkip

onSkip(callback: () => void)

当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。

onNext

onNext(callback: (index: number, pendingIndex: number) => void)

点击StepperItem的nextLabel切换下一步骤时，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。

参数：

onPrevious

onPrevious(callback: (index: number, pendingIndex: number) => void)

点击StepperItem的prevLabel切换上一步骤时触发该回调。

参数：

onChange

onChange(callback: (prevIndex: number, index: number) => void)

点击当前StepperItem的prevLabel进行步骤切换时触发该回调；或点击当前StepperItem的nextLabel，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。

参数：

示例代码：

@State selectIndex:number=0
  @Builder stepperTest(){
    Stepper({index:this.selectIndex}){
      StepperItem(){
        Column().height('90%').width('100%').backgroundColor(Color.Orange)
      }
      .nextLabel('下一页')

      StepperItem(){
        Column().height('90%').width('100%').backgroundColor(Color.Pink)
      }
      .prevLabel('上一页')
      // .nextLabel('下一页')
      .status(ItemState.Skip)
      StepperItem(){
        Column().height('90%').width('100%').backgroundColor('#E6E5D1')
      }
      .prevLabel('上一页')
      .nextLabel('完成')
    }
    .onClick(()=>{
      console.log('完成注册')
    })
    .onSkip(()=>{
      console.log('页面跳过')
      this.selectIndex=2
    })
    .onNext((index,pendingIndex)=>{
      console.log(`当前是第${index+1}页,下一页${pendingIndex+1}页`)
    })
    .onPrevious((index,pendingIndex)=>{
      console.log(`当前是第${index+1}页,上一页${pendingIndex+1}页`)
    })
  }

SymbolGlyph

显示图标小符号的组件。

子组件

不支持子组件。

fontSize

fontSize(value: number | string | Resource)

设置SymbolGlyph组件大小。

参数：

fontWeight

fontWeight(value: number | FontWeight | string)

设置SymbolGlyph组件粗细。number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。

sys.symbol.ohos_lungs图标不支持设置fontWeight。

参数：

renderingStrategy

renderingStrategy(value: SymbolRenderingStrategy)

设置SymbolGlyph组件渲染策略。$r('sys.symbol.ohos_*')中引用的资源仅ohos_folder_badge_plus支持分层与多色模式。

参数：

effectStrategy

effectStrategy(value: SymbolEffectStrategy)

设置SymbolGlyph组件动效策略。$r('sys.symbol.ohos_*')中引用的资源仅ohos_wifi支持层级动效模式。

参数：

symbolEffect

symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean)

设置SymbolGlyph组件动效策略及播放状态。

参数：

symbolEffect

symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number)

设置SymbolGlyph组件动效策略及播放触发器。

参数：

SymbolEffect

constructor

constructor()

SymbolEffect的构造函数，无动效。

ScaleSymbolEffect

constructor12+

constructor(scope?: EffectScope, direction?: EffectDirection)

ScaleSymbolEffect的构造函数，缩放动效。

参数：

属性

HierarchicalSymbolEffect12+

constructor12+

constructor(fillStyle?: EffectFillStyle)

HierarchicalSymbolEffect的构造函数，层级动效。

参数：

属性

示例代码：

@State eff:boolean=false
  @Builder symbolGlyphTest(){
     SymbolGlyph($r('sys.symbol.ohos_trash_circle'))
       .fontSize(30)
       .fontWeight(FontWeight.Bolder)
       .fontColor(['red'])
    SymbolGlyph($r('sys.symbol.chevron_right_circle')).fontSize(30)
      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
      .fontColor(['red','blue'])
    SymbolGlyph($r('sys.symbol.hand_thumbsdown_fill')).fontSize(30)

      .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
      .fontColor(['red'])
    SymbolGlyph($r('sys.symbol.wifi')).fontSize(40)
      // .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
      // .symbolEffect(SymbolEffectStrategy.SCALE,4)
      // .symbolEffect(new ScaleSymbolEffect(EffectScope.LAYER),this.eff)
      .symbolEffect(new HierarchicalSymbolEffect(),this.eff)
    Button('播放动效').onClick(()=>{
      this.eff=true
      setTimeout(()=>{this.eff=false},500)

    })
  }

TextArea

多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。

高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。

子组件

无

TextAreaOptions对象说明

caretColor

caretColor(value: ResourceColor)

设置输入框光标颜色。

参数：

copyOption9+

copyOption(value: CopyOptions)

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

copyOption对于拖拽，只限制是否选中，不涉及拖拽范围。

参数：

maxLength10+

maxLength(value: number)

设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制，将无法继续输入字符，同时边框变为红色。

参数：

showCounter10+

showCounter(value: boolean, options?: InputCounterOptions)

设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。

参数value为true时，才能设置options，文本框开启计数下标功能，需要配合maxlength（设置最大字符限制）一起使用。字符计数器显示的效果是当前输入字符数/最大可输入字符数。

当输入字符数大于最大字符数乘百分比值时，显示字符计数器。如果用户设置计数器时不设置InputCounterOptions，那么当前输入字符数达到最大字符数时，边框和计数器下标将变为红色。用户同时设置参数value为true和InputCounterOptions，当thresholdPercentage数值在有效区间内，且输入字符数超过最大字符数时，边框和计数器下标将变为红色，框体抖动。highlightBorder设置为false，则不显示红色边框，计数器默认显示红色边框。内联模式下字符计数器不显示。

参数：

style10+

style(value: TextContentStyle)

设置文本框多态样式，内联输入风格只支持TextAreaType.Normal类型。

参数：

enableKeyboardOnFocus10+

enableKeyboardOnFocus(value: boolean)

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

参数：

selectionMenuHidden10+

selectionMenuHidden(value: boolean)

设置长按、双击输入框或者右键输入框时，是否不弹出文本选择菜单。

参数：

barState10+

barState(value: BarState)

设置输入框编辑态时滚动条的显示模式。

参数：

maxLines10+

maxLines(value: number)

配置textOverflow一起使用时，maxlines为可显示行数，超出截断；未配置textOverflow时，内联模式获焦状态下内容超出maxlines时，文本可滚动显示，内联模式非获焦状态下不生效maxlines，非内联模式按行截断。

参数：

type11+

type(value: TextAreaType)

设置输入框类型。

参数：

enableAutoFill12+

enableAutoFill(value: boolean)

设置是否启用自动填充。

参数：

contentType12+

contentType(contentType: ContentType)

设置自动填充类型。

参数：

wordBreak12+

wordBreak(value: WordBreak)

设置文本断行规则。该属性对placeholder文本无效。

参数：

textOverflow12+

textOverflow(value: TextOverflow)

设置文本超长时的显示方式。

内联模式，主动配置textoverflow才会生效按maxline截断效果，不配置时，默认不截断。

文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，wordBreak属性可设置为WordBreak.BREAK_ALL。

当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时，需配合maxLines使用，单独设置不生效。设置TextOverflow.None与TextOverflow。Clip效果一样。

参数：

lineBreakStrategy12+

lineBreakStrategy(strategy: LineBreakStrategy)

设置折行规则。该属性在wordBreak不等于breakAll的时候生效，不支持连词符。

参数：

事件

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

format

format(value: string)

设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”。

y：年（yyyy表示完整年份，yy表示年份后两位）

M：月（若想使用01月则使用MM）

d：日（若想使用01日则使用dd）

E：星期（若想使用星期六则使用EEEE，若想使用周六则使用E、EE、EEE）H：小时（24小时制） h：小时（12小时制）

m：分钟

s：秒

SS：厘秒(format中S个数<3，全部按厘秒处理)

SSS：毫秒(format中S个数>=3，全部按毫秒处理)

a：上午/下午（当设置小时制式为H时，该参数不生效）

日期间隔符："年月日"、“/”、"-"、"."（可以自定义间隔符样式，间隔符不可以为字母，汉字则作为间隔符处理）

允许自行拼接组合显示格式，即：年、月、日、星期、时、分、秒、毫秒可拆分为子元素，可自行排布组合。时间更新频率最高为一秒一次，不建议单独设置厘秒和毫秒格式。

当设置无效字母时（非上述字母被认为是无效字母），该字母会被忽略。如果format全是无效字母时，显示格式跟随系统语言和系统小时制。例如系统语言为中文时，12小时制显示格式为yyyy/MM/dd aa hh:mm:ss.SSS，24小时制显示格式为yyyy/MM/dd HH:mm:ss.SSS。

若format为空或者undefined，则使用默认值。

参数：

以下是format输入的格式样式及对应的显示效果：

示例代码：

tc:TextAreaController=new TextAreaController()
  clock:TextClockController=new TextClockController()
  @Builder textAreaTest(){
  TextArea({placeholder:'请输入个人简介',text:'我叫张三...',controller:this.tc})
    .height(300).width('90%')
    .placeholderColor('#E7DDD9')
    .placeholderFont({size:18,weight:FontWeight.Bolder,style:FontStyle.Italic})
    .textAlign(TextAlign.Center)
    .caretColor(Color.Pink)
    .caretStyle({color:'#E5FFFB',width:3})
    .copyOption(CopyOptions.LocalDevice)
    .maxLength(150)
    .border({style:BorderStyle.Solid,width:1,color:Color.Gray})
    .showCounter(true,{thresholdPercentage:40,highlightBorder:true})
    // .style(TextContentStyle.INLINE)
    .enableKeyboardOnFocus(true)
    .selectionMenuHidden(false)
    .barState(BarState.Auto)
    // .maxLength(4)
    // .textOverflow(TextOverflow.Ellipsis)
    .type(TextAreaType.NORMAL)
    .enableAutoFill(true)//启用填充
    .contentType(ContentType.USER_NAME)
    .wordBreak(WordBreak.BREAK_ALL)
    .lineBreakStrategy(LineBreakStrategy.GREEDY)



    TextClock({timeZoneOffset:-8,controller:this.clock})
      .format('yyyy年M月d日 EEEE  aa hh:mm:ss')
      .onClick(()=>{
        this.clock.stop()
      })
      .contentModifier(new MyTextClock())
  }