部分组件5

部分组件5

RichText

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

RichText("<h1>富文本</h1>")

RichText组件适用于加载与显示一段HTML字符串，且不需要对显示效果进行较多自定义的应用场景。RichText组件仅支持有限的通用属性和事件。具体见属性与事件小节。

RichText组件不适用于对HTML字符串的显示效果进行较多自定义的应用场景

RichText组件比较消耗内存资源

属性

h1–h6:被用来定义HTML，

定义重要等级最高的标题，

定义重要等级最低的标题。

p-/p:定义段落。

br:插入一个简单的换行符。

font:规定文本的字体、字体尺寸、字体颜色。

hr:定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。

image:用来定义图片。

div:常用于组合块级元素，以便通过CSS来对这些元素进行格式化。

i:部分文本呈现为斜体文本。

u:加下划线

style:属性规定元素的行内样式

script:用于定义客户端脚本

@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>';

ScrollBar

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

scroller:可滚动组件的控制器用于与可滚动组件进行绑定。

direction:滚动条的方向，控制可滚动组件对应方向的滚动。

state:滚动条状态。

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，用于配合可滚动组件使用
  ScrollBar({scroller:this.sc}){
    Text().width(20).backgroundColor('red').height(100)
  }.width(20)
}

Search

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

value:设置当前显示的搜索文本内容。

placeholder:设置无输入时的提示文本。

icon:设置搜索图标路径，默认使用系统搜索图标。

controller:设置Search组件控制器

Search({
  value:'张三',//设置当前显示的搜索文本内容。
  placeholder:'请输入搜索内容',//设置无输入时的提示文本。
  // icon:$r('app.media.a1'),//设置搜索图标路径，默认使用系统搜索图标。
  controller:this.searchController//设置Search组件控制器。
})

属性

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

.searchButton('搜索',{fontSize:18,fontColor:'red'})//设置搜索框末尾搜索按钮。

placeholderColor:设置placeholder文本颜色。

.placeholderColor('red')//设置placeholder文本颜色。

placeholderFont：设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。当前支持’HarmonyOS Sans’字体和注册自定义字体。

.placeholderFont({size:18,style:1,weight:700})//设置placeholder文本样式

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

.textFont({size:18,weight:900,style:1})//设置搜索框内输入文本样式

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

.textAlign(TextAlign.Center)//设置文本在搜索框中的对齐方式

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

searchIcon：设置左侧搜索图标样式。

.searchIcon({size:20,src:$r('sys.symbol.shadow'),color:'red'})//图片可以，但图标不生效  设置左侧搜索图标样式。

cancelButton：设置右侧清除按钮样式。

.cancelButton({style:CancelButtonStyle.INPUT,
  icon:{size:20,color:'red',src:$r('sys.symbol.log')}})//设置右侧清除按钮样式。图片可以，但图标不生效

caretStyle：设置光标样式。

.caretStyle({color:'red',width:5})//设置光标样式。

selectionMenuHidden：设置是否不弹出系统文本选择菜单。

.selectionMenuHidden(true)//菜单

customKeyboard：设置自定义键盘。

@Builder jp(){
    Row().width('100%').height(300).backgroundColor('#abcdef')
  }//键盘
.customKeyboard(this.jp(),{supportAvoidance:true})//键盘  设置自定义键盘。

type：设置输入框类型。

.type(SearchType.NORMAL)//设置输入框类型。

enterKeyType：设置输入法回车键类型。

.enterKeyType(EnterKeyType.Search)//设置输入法回车键类型。

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

.lineHeight(-30)//文本行高

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

.decoration({type:TextDecorationType.Underline,color:'blue',style:TextDecorationStyle.SOLID})//设置文本装饰线类型样式及其颜色。

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

.selectedBackgroundColor('red')//设置文本选中底板颜色

事件

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

.onSubmit((val)=>{//搜索按下
  console.log(val)
  //todo 跳转搜索页面
})

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

.onChange(val=>console.log(val))//输入内容发生变化时，触发该回调。

onCopy:进行复制操作时，触发该回调。

.onCopy(val=>console.log('复制的内容'+val))//进行复制操作时，触发该回调。

onCut:进行剪切操作时，触发该回调。

.onCut(val=>console.log('剪切的内容'+val))

onPaste:进行粘贴操作时，触发该回调。

.onPaste(val=>console.log('粘贴的内容'+val))

onTextSelectionChange:文本选择的位置发生变化或编辑状态下光标位置发生变化时，触发该回调。

.onTextSelectionChange((s,e)=>console.log(`开始下标:${s},结束下标:${e}`))

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

.onContentScroll((x,y)=>console.log(`x:${x},y:${y}`))

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

.onEditChange(isEdit=>console.log(isEdit?'输入中':'输入完成'))

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

.onWillInsert((iv)=>(iv.insertValue==='.'?false:true))

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

.onDidInsert(val=>console.log('输入的内容'+val.insertValue))

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

.onWillDelete((iv)=>(iv.deleteValue==='三'?false:true))

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

.onDidDelete(val=>console.log('删除的内容'+val.deleteValue))

caretPosition：设置输入光标的位置。

Button('光标').onClick(()=>{
  this.searchController.caretPosition(1)//光标移动
})

stopEditing：退出编辑态。

Button('退出编辑').onClick(()=>{
  this.searchController.stopEditing()//退出编辑
})

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

Button('高亮').onClick(()=>{
  this.searchController.setTextSelection(0,10,{menuPolicy:MenuPolicy.SHOW})
})

Select

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

value:下拉选项内容。

icon:下拉选项图片。

symbolIcon:下拉选项Symbol图片

Select([
  {value:'北京',icon:$r('app.media.a2')},
  {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_macro'))},
  {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.log'))},
  {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.message'))},
  {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_flash_auto_14'))},
  {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_iso'))},
])

属性

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

.selected(2)//设置下拉菜单初始选项的索引，第一项的索引为0

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

.value('--地址--')

controlSize:设置Select组件的尺寸。

constraintSize:设置约束尺寸，组件布局时，进行尺寸范围限制。

.constraintSize({minWidth:120,maxWidth:200})

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

.divider({strokeWidth:3,color:'red',startMargin:10,endMargin:10})

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

.fontColor('red')

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

.font({size:18,style:FontStyle.Italic,weight:900})

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

.selectedOptionBgColor(Color.Orange)

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

.selectedOptionFont({size:30})

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

.selectedOptionFontColor(Color.White)

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

.optionBgColor(Color.Blue)

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

.optionFont({size:20})

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

.optionFontColor(Color.Black)

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

.space(8)

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

.arrowPosition(ArrowPosition.START)

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

.menuAlign(MenuAlignType.CENTER,{dx:10,dy:10})

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

.optionWidth(200)

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

.optionHeight(300)

menuBackgroundColor：设置下拉菜单的背景色。

.menuBackgroundColor(Color.Red)

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

.menuBackgroundBlurStyle(BlurStyle.Thin)

事件

onSelect

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

.onSelect((index,val)=>{//下拉菜单选中某一项的回调。
    console.log(`索引:${index},值:${val}`)
})

定制Select下拉菜单项内容区的方法

class MySelect implements ContentModifier<MenuItemConfiguration>{
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
  return wrapBuilder(sel)
  }
}
@Builder function sel(config:MenuItemConfiguration){
  Row(){
    Text(config.index+''+config.value)
    // Image(config.icon).height(30)
    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([Color.Red])
    }
  }.width('80%').height(30)
  .backgroundColor(config.selected?Color.Orange:Color.Transparent)
  .onClick(()=>{
    config.triggerSelect(config.index,config.value.toString())
  })
}
Select([
  {value:'北京',icon:$r('app.media.a2')},
  {value:'上海',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_macro'))},
  {value:'天津',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.log'))},
  {value:'石家庄',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.message'))},
  {value:'海南',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_flash_auto_14'))},
  {value:'台湾',symbolIcon:new SymbolGlyphModifier($r('sys.symbol.camera_iso'))},
])
  .value('--地址--')
  .menuItemContentModifier(new MySelect())

Slider

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

value:当前进度值

min:设置最小值。

max设置最大值。

step：设置Slider滑动步长。

style：设置Slider的滑块与滑轨显示样式。

direction：设置滑动条滑动方向为水平或竖直方向。

reverse：设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动

Slider({
  value:30,min:0,max:100,step:10,style:SliderStyle.InSet,
  reverse:false
})

属性

blockColor:设置滑块的颜色。

.blockColor(Color.Red)//设置滑块的颜色。

trackColor：设置滑轨的背景颜色。

.trackColor(Color.Gray)//设置滑轨的背景颜色。

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

.selectedColor(Color.Green)//设置滑轨的已滑动部分颜色。

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

.showSteps(true)//设置当前是否显示步长刻度值

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

.showTips(true)//设置滑动时是否显示气泡提示。

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

.trackThickness(50)//设置滑轨的粗细

blockBorderColor：设置滑块描边颜色。

.blockBorderColor(Color.Black)

blockBorderWidth：设置滑块描边粗细。

.blockBorderWidth(1)//设置滑块描边粗细。

stepColor设置刻度颜色。

.stepColor(Color.Black)//设置刻度颜色。

trackBorderRadius：设置底板圆角半径。

.trackBorderRadius(10)//设置底板圆角半径。

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

.selectedBorderRadius(10)

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

.stepSize(8)//设置刻度大小

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

.sliderInteractionMode(SliderInteraction.SLIDE_AND_CLICK)

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

.minResponsiveDistance(60)

slideRange：设置有效滑动区间。

.slideRange({from:10,to:50})

事件

onChange:Slider拖动或点击时触发事件回调。

.onChange((v,m)=>{
  console.log(`当前值${v}`)
  if(m==0){
    console.log(`按下`)
  }else if(m==1){
    console.log(`移动`)
  }else if(m==2){
    console.log(`弹起`)
  }else if(m==3){
    console.log(`点击`)
  }
})

通过样式Builder定制内容区。点击增加按钮，进度条会按照原Slider设置的步长增加，反之点减少按钮进度条会减少，并触发原组件的onChange事件。

class MySlider implements ContentModifier<SliderConfiguration>{
  applyContent(): WrappedBuilder<[SliderConfiguration]> {
  return wrapBuilder(sl)
  }
  showSlider:boolean=true
  sliderChangeMode:number=0
  constructor(showSlider: boolean,sliderChangeMode:number) {
    this.showSlider = showSlider
    this.sliderChangeMode = sliderChangeMode
  }
}

@Builder function sl(config:SliderConfiguration){
  Column(){
    Progress({value:config.value,type:ProgressType.Ring})
    Button('增加').onClick(()=>{
      config.value+=10
      config.triggerChange(config.value,0)
    })
    Button('减少').onClick(()=>{
      config.value-=10
      config.triggerChange(config.value,0)
    })
  }
}
Slider({
  value:30,min:0,max:100,step:10})
  .contentModifier(new MySlider(true,0))

Span

作为Text、ContainerSpan组件的子组件，用于显示行内文本的组件。

属性

decoration:设置文本装饰线样式及其颜色。

Span('文本子组件')
  .decoration({style:TextDecorationStyle.SOLID,type:TextDecorationType.Overline,color:'red'})//设置文本装饰线样式及其颜色。

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

Span('文本子组件2')
  .letterSpacing(10)//设置文本字符间距。

textCase:设置文本大小写。

Span('AbcDXF')
  .textCase(TextCase.UpperCase)//设置文本大小写。

fontColor:设置字体颜色。

.fontColor('red')

lineHeight:设置文本行高。

.lineHeight(40)//设置文本行高。

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

.font({size:20,style:FontStyle.Italic})

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

.textShadow({radius:10,offsetX:10,offsetY:10,type:ShadowType.BLUR,color:'blue'})//设置文字阴影效果

textBackgroundStyle:设置文本背景样式。子组件在不设置该属性时，将继承此属性值。

.textBackgroundStyle({//设置背景样式
  color:Color.Orange,
  radius:0
})

Stepper

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

value:设置步骤导航器当前显示StepperItem的索引值。

事件

onFinish步骤导航器最后一个StepperItem的nextLabel被点击时，并且ItemState属性为Normal时，触发该回调。

.onFinish(()=>{
  console.log('完成注册')
})

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

.onSkip(()=>{
  console.log('页面跳过')
  this.selectIndex=2
})

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

.onNext((index,pendingIndex)=>{
  console.log(`当前是第${index+1}页,下一页${pendingIndex+1}页`)
})

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

.onPrevious((index,pendingIndex)=>{
  console.log(`当前是第${index+1}页,上一页${pendingIndex+1}页`)
})

StepperItem:用作Stepper组件的页面子组件。

Stepper({index:this.selectIndex}){
  //用作Stepper组件的页面子组件。
  StepperItem(){
    Column().height('90%').width('100%').backgroundColor(Color.Gray)
  }
  StepperItem(){
    Column().height('100%').width('100%').backgroundColor(Color.Blue)
  }
  StepperItem(){
    Column().height('100%').width('100%').backgroundColor(Color.Red)
  }
}

属性

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

.prevLabel('上一页')//设置左侧文本按钮内容

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

.nextLabel('下一页')//设置右侧文本按钮内容

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

.status(ItemState.Skip)

SymbolGlyph

显示图标小符号的组件。

SymbolGlyph($r('sys.symbol.camera_macro'))

属性

fontColor:设置SymbolGlyph组件颜色。

.fontColor(['red','blue'])

fontSize:设置SymbolGlyph组件大小。

.fontSize(30)

fontWeight:设置SymbolGlyph组件粗细

.fontWeight(FontWeight.Bolder)

renderingStrategy:设置SymbolGlyph组件渲染策略。

.renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)//设置SymbolGlyph组件渲染策略。

effectStrategy:设置SymbolGlyph组件动效策略。

.effectStrategy(SymbolEffectStrategy.SCALE)

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

.symbolEffect(new ScaleSymbolEffect(),this.eff)//设置SymbolGlyph组件动效策略及播放状态。

动态效果,点击

SymbolGlyph($r('sys.symbol.hand_tap')).fontSize(40)
  .symbolEffect(new ScaleSymbolEffect(),this.eff)//设置SymbolGlyph组件动效策略及播放状态。
  Button('播放动效').onClick(()=>{
    this.eff=true
   setTimeout(()=>{this.eff=false},1000)
  })

TextArea

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

placeholder:设置无输入时的提示文本。输入内容后，提示文本不显示

text:设置输入框当前的文本内容。

controller:设置TextArea控制器。

 tc:TextAreaController=new TextAreaController()
TextArea({placeholder:'请输入个人简介',text:'我叫张三...',controller:this.tc})

属性

placeholderColor:设置placeholder文本颜色。

.placeholderColor('red')//设置placeholder文本颜色。

placeholderFont:设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。当前支持’HarmonyOS Sans’字体和注册自定义字体。

.placeholderFont({size:18,weight:FontWeight.Bolder,style:FontStyle.Italic})//设置placeholder文本样式

textAlign:设置文本在输入框中的水平对齐方式。

.textAlign(TextAlign.Center)

caretColor:设置输入框光标颜色。

.caretColor(Color.Pink)

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

.copyOption(CopyOptions.LocalDevice)

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

.maxLength(100)

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

.showCounter(true,{thresholdPercentage:90,highlightBorder:true})

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

.style(TextContentStyle.INLINE)//设置文本框多态样式

enableKeyboardOnFocus:设置TextArea通过点击以外的方式获焦时，是否主动拉起软键盘。

.enableKeyboardOnFocus(true)

selectionMenuHidden:设置是否不弹出系统文本选择菜单。

.selectionMenuHidden(false)

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

.barState(BarState.Auto)

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

.maxLines(4)

type:设置输入框类型。

.type(TextAreaType.NORMAL)

enableAutoFill:设置是否启用自动填充。

.enableAutoFill(true)//启用填充

contentType:设置自动填充类型

.contentType(ContentType.USER_NAME)

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

.wordBreak(WordBreak.BREAK_ALL)

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

.lineBreakStrategy(LineBreakStrategy.GREEDY)//设置折行规则

TextClock

TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。

timeZoneOffset:设置时区偏移量。

controller:绑定一个控制器，用来控制文本时钟的状态。

 clock:TextClockController=new TextClockController()
TextClock({timeZoneOffset:-7,controller:this.clock})

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

 .format(new Date().toString())//设置显示时间格式
.format('yyyy年M月d日 EEEE aa hh:mm:ss')

stop:停止文本时钟。

 clock:TextClockController=new TextClockController()
.onClick(()=>{
  this.clock.stop()
})

contentModifier:定制TextClock内容区的方法。

class MyTextClock implements ContentModifier<TextClockConfiguration>{
  applyContent(): WrappedBuilder<[TextClockConfiguration]> {
  return wrapBuilder(a)
  }
}
@Builder function a(config:TextClockConfiguration){
  Row(){
    Text(config.timeZoneOffset.toString())
  }.border({style:BorderStyle.Solid,width:1,color:'red'})
}
.contentModifier(new MyTextClock())