diff --git a/examples/TextInputComponentTest/entry/src/main/ets/pages/01-style/18-antiColor.ets b/examples/TextInputComponentTest/entry/src/main/ets/pages/01-style/18-antiColor.ets
new file mode 100644
index 0000000000000000000000000000000000000000..a7762ed38b23a7ca96154557d88f1919587f5f0b
--- /dev/null
+++ b/examples/TextInputComponentTest/entry/src/main/ets/pages/01-style/18-antiColor.ets
@@ -0,0 +1,1037 @@
+import { TextModifier, TextInputModifier, TextAreaModifier, SearchModifier, ContainerSpanModifier, MarqueeModifier, HyperlinkModifier,
+  SymbolGlyphModifier, SymbolSpanModifier} from "@ohos.arkui.modifier"
+import { promptAction } from '@kit.ArkUI';
+import common from '@ohos.app.ability.common';
+import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
+
+
+class MyModifier1 extends TextModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: TextAttribute): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void {
+    this.copyOption(CopyOptions.InApp)
+    this.width($r("app.integer.width"))
+    this.height($r("app.integer.height"))
+    this.font({
+      size : $r("app.string.fontSize"),
+      family :$r("app.string.TextFontFamily")
+    })
+    this.fontSize($r("app.string.fontSize"))
+    this.minFontScale($r("app.float.minFontScale"))
+    this.maxFontScale($r("app.float.maxFontScale"))
+    this.fontColor($r("app.color.textColor"),)
+    this.textShadow({
+      radius: $r("app.integer.shadowOffset"),
+      color : $r("app.color.shadowColor"),
+      offsetX: $r("app.integer.shadowOffset"),
+      offsetY: $r("app.integer.shadowOffset"),
+    })
+    this.textIndent($r("app.integer.fontSize"))
+    this.lineHeight($r("app.integer.fontSize"))
+    this.fontFamily($r("app.string.TextFontFamily"))
+    this.minFontSize($r("app.string.fontSize"))
+    this.maxFontSize($r("app.string.fontSize"))
+    this.letterSpacing($r("app.integer.shadowOffset"))
+    this.baselineOffset($r("app.integer.shadowOffset"))
+    this.caretColor($r("app.color.shadowColor"))
+    this.selectedBackgroundColor($r("app.color.textColor"),)
+    this.decoration({
+        type:TextDecorationType.Underline,
+        color:$r("app.color.textColor"),
+    })
+    this.foregroundColor($r("app.color.textColor"),)
+    this.dataDetectorConfig({
+     types : [],
+     color : $r("app.color.textColor"),
+      decoration : {
+        type:TextDecorationType.Underline,
+        color:$r("app.color.textColor"),
+      }
+    })
+    this.enableDataDetector(true)
+  }
+
+  public setGroup2()  : void{
+    this.copyOption(CopyOptions.InApp)
+    this.width(undefined)
+    this.height(undefined)
+    this.font({
+      size : undefined,
+      family :undefined
+    })
+    this.fontSize(undefined)
+    this.minFontScale(undefined)
+    this.maxFontScale(undefined)
+    this.fontColor(undefined)
+    this.textShadow({
+      radius: undefined,
+      color : undefined,
+      offsetX: undefined,
+      offsetY: undefined,
+    })
+    this.textIndent(undefined)
+    this.lineHeight(undefined)
+    this.fontFamily(undefined)
+    this.minFontSize(undefined)
+    this.maxFontSize(undefined)
+    this.letterSpacing(undefined)
+    this.baselineOffset(undefined)
+    this.caretColor(undefined)
+    this.selectedBackgroundColor(undefined)
+    this.decoration({
+      type:TextDecorationType.Underline,
+      color:undefined,
+    })
+    this.foregroundColor(undefined)
+    this.dataDetectorConfig({
+      types : [],
+      color : undefined,
+      decoration : {
+        type:TextDecorationType.Underline,
+        color:undefined,
+      }
+    })
+    this.enableDataDetector(true)
+  }
+}
+
+class MyModifier2 extends ContainerSpanModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: ContainerSpanModifier): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.textBackgroundStyle({
+      color:$r("app.color.textColor"),
+      radius: {
+        topLeft : $r("app.float.radius"),
+        topRight : $r("app.float.radius"),
+        bottomLeft : $r("app.float.radius"),
+        bottomRight : $r("app.float.radius"),
+      }
+    })
+  }
+}
+
+class MyModifier5 extends TextInputModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: TextInputAttribute): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.placeholderColor($r("app.color.textColor"))
+    this.placeholderFont({
+      size: ($r("app.string.fontSize")),
+      family : $r("app.string.TextFontFamily")
+    })
+    this.backgroundColor($r("app.color.textColor"))
+    this.caretColor($r("app.color.textColor"))
+    this.selectedBackgroundColor($r("app.color.textColor"))
+    this.caretStyle({
+      width:($r("app.string.caretWidth")),
+      color:$r("app.color.textColor")
+     })
+    this.width($r("app.integer.width"))
+    this.height($r("app.integer.height"))
+    this.padding({
+      top: $r("app.string.fontSize"),
+      right: $r("app.string.fontSize"),
+      bottom: $r("app.string.fontSize"),
+      left: $r("app.string.fontSize"),
+    })
+    this.margin({
+      top: $r("app.string.fontSize"),
+      right: $r("app.string.fontSize"),
+      bottom: $r("app.string.fontSize"),
+      left: $r("app.string.fontSize"),
+    })
+
+    this.fontSize($r("app.string.fontSize"))
+    this.fontColor($r("app.color.textColor"))
+    this.fontWeight( $r("app.string.fontWeight"))
+    this.fontFamily($r("app.string.TextFontFamily"))
+    this.minFontScale($r("app.float.minFontScale"))
+    this.maxFontScale($r("app.float.maxFontScale"))
+    this.showError($r("app.string.rex"))
+    this.type(InputType.Password)
+    this.showPasswordIcon(true)
+    this.passwordIcon({
+      onIconSrc: $r("app.media.startIcon"),
+      offIconSrc: $r("app.media.startIcon"),
+    })
+    this.showUnderline(true)
+    this.underlineColor({
+      normal: $r("app.color.textColor"),
+      typing: $r("app.color.textColor"),
+      error: $r("app.color.textColor"),
+      disable: $r("app.color.textColor"),
+    })
+    this.underlineColor($r("app.color.textColor"))
+    this.cancelButton({
+     style:CancelButtonStyle.CONSTANT,
+     icon: {
+        size: $r("app.string.fontSize"),
+        color: $r("app.color.textColor"),
+        src: $r("app.media.icon_cut123"),
+     },
+    })
+    this.decoration({
+      type:TextDecorationType.Underline,
+      color:$r("app.color.textColor")
+    })
+    this.minFontSize($r("app.string.fontSize"))
+    this.maxFontSize($r("app.string.fontSize"))
+    this.letterSpacing($r("app.string.caretWidth"))
+    this.lineHeight($r("app.integer.fontSize"))
+    this.textIndent($r("app.integer.fontSize"))
+  }
+
+
+  public setGroup2()  : void{
+    this.placeholderColor(undefined)
+    this.placeholderFont({
+      size: undefined,
+      family : undefined,
+    })
+    this.backgroundColor(undefined)
+    this.caretColor(undefined)
+    this.selectedBackgroundColor(undefined)
+    this.caretStyle({
+      width:undefined,
+      color:undefined
+    })
+    this.width(undefined)
+    this.height(undefined)
+    this.padding({
+      top: undefined,
+      right: undefined,
+      bottom: undefined,
+      left: undefined,
+    })
+    this.margin({
+      top: undefined,
+      right: undefined,
+      bottom: undefined,
+      left: undefined,
+    })
+    this.fontSize(undefined)
+    this.fontColor(undefined)
+    this.fontWeight( undefined)
+    this.fontFamily(undefined)
+    this.minFontScale(undefined)
+    this.maxFontScale(undefined)
+    this.inputFilter(undefined)
+    this.foregroundColor(undefined)
+    this.showError(undefined)
+    this.type(InputType.Password)
+    this.showPasswordIcon(true)
+    this.passwordIcon({
+      onIconSrc: undefined,
+      offIconSrc: undefined,
+    })
+    this.showUnderline(true)
+    this.underlineColor({
+      normal: undefined,
+      typing: undefined,
+      error: undefined,
+      disable: undefined,
+    })
+    this.underlineColor(undefined)
+    this.cancelButton({
+      style:CancelButtonStyle.CONSTANT,
+      icon: {
+        size: undefined,
+        color: undefined,
+        src: undefined,
+      },
+    })
+    this.decoration({
+      type:TextDecorationType.Underline,
+      color:undefined
+    })
+    this.minFontSize(undefined)
+    this.maxFontSize(undefined)
+    this.letterSpacing(undefined)
+    this.lineHeight(undefined)
+    this.textIndent(undefined)
+  }
+}
+
+class MyModifier6 extends SearchModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: SearchModifier): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.layoutWeight(1.0)
+     this.backgroundColor(Color.Pink)
+     this.textAlign(TextAlign.Start)
+      this.selectedBackgroundColor($r("app.color.textColor"))
+     this.cancelButton({
+         icon:{
+           size: $r('app.string.fontSize'),
+           color: $r('app.color.textColor'),
+           src: $r('app.media.startIcon'),
+         }
+        })
+       this.searchButton(
+         $r('app.string.rex'),
+         {
+           fontSize : $r('app.string.fontSize'),
+           fontColor : $r('app.color.textColor')
+         }
+       )
+
+    this.searchIcon({
+      size: $r('app.string.fontSize'),
+      color: $r('app.color.textColor'),
+      src: $r('app.media.startIcon'),
+    })
+    .inputFilter($r("app.string.rex"))
+    this.fontColor($r("app.color.textColor"))
+    this.letterSpacing($r("app.string.caretWidth"))
+    this.lineHeight($r("app.string.fontSize"))
+    this.minFontScale($r("app.float.minFontScale"))
+    this.maxFontScale($r("app.float.maxFontScale"))
+    .selectedBackgroundColor($r("app.color.textColor"))
+    .backgroundColor(Color.Pink)
+     this.caretStyle({
+       width:($r("app.string.caretWidth")),
+       color:($r("app.color.textColor"))
+    })
+      this.textFont({
+       size: $r("app.string.fontSize")
+     })
+     this.minFontSize($r("app.string.fontSize"))
+     this.maxFontSize($r("app.string.fontSize"))
+    this.decoration({
+      type: TextDecorationType.LineThrough,
+      color: $r('app.color.textColor'),
+      style: TextDecorationStyle.SOLID
+    })
+    this.textIndent($r("app.string.fontSize"))
+
+    this.placeholderColor($r("app.color.textColor"))
+    .placeholderFont({
+      size: $r("app.string.fontSize")
+    })
+  }
+}
+
+class MyModifier7 extends TextAreaModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: TextAreaModifier): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.placeholderColor($r("app.color.textColor"))
+    this.placeholderFont({
+      size: ($r("app.string.fontSize")),
+      family : $r("app.string.TextFontFamily")
+    })
+    this.backgroundColor($r("app.color.textColor"))
+    this.caretColor($r("app.color.textColor"))
+    this.selectedBackgroundColor($r("app.color.textColor"))
+    this.caretStyle({
+      width:($r("app.string.caretWidth")),
+      color:$r("app.color.textColor")
+     })
+    this.width($r("app.integer.width"))
+    this.height($r("app.integer.height"))
+    this.padding({
+      top: $r("app.string.fontSize"),
+      right: $r("app.string.fontSize"),
+      bottom: $r("app.string.fontSize"),
+      left: $r("app.string.fontSize"),
+    })
+    this.margin({
+      top: $r("app.string.fontSize"),
+      right: $r("app.string.fontSize"),
+      bottom: $r("app.string.fontSize"),
+      left: $r("app.string.fontSize"),
+    })
+
+    this.fontSize($r("app.string.fontSize"))
+    this.fontColor($r("app.color.textColor"))
+     this.fontWeight( $r("app.string.fontWeight"))
+     this.fontFamily($r("app.string.TextFontFamily"))
+    this.minFontScale($r("app.float.minFontScale"))
+    this.maxFontScale($r("app.float.maxFontScale"))
+    this.decoration({
+      type:TextDecorationType.Underline,
+      color:$r("app.color.textColor")
+    })
+    this.minFontSize($r("app.string.fontSize"))
+    this.maxFontSize($r("app.string.fontSize"))
+     this.letterSpacing($r("app.string.caretWidth"))
+    this.lineHeight($r("app.integer.fontSize"))
+    this.textIndent($r("app.integer.fontSize"))
+  }
+}
+
+class MyModifier8 extends MarqueeModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: MarqueeModifier): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
+    this.width('300vp')
+    this.height('80vp')
+    this.fontColor($r("app.color.textColor"))
+    this.fontSize($r("app.string.fontSize"))
+    this.fontFamily($r("app.string.TextFontFamily"))
+  }
+}
+
+class MyModifier9 extends HyperlinkModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: HyperlinkModifier): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.color($r("app.color.textColor"))
+  }
+}
+
+class MyModifier10 extends SymbolGlyphModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: SymbolGlyphModifier): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.fontSize($r("app.string.fontSize"))
+    this.fontColor([$r("app.color.textColor"), $r("app.color.textColor"), $r("app.color.textColor")])
+    this.minFontScale($r("app.float.minFontScale"))
+    this.maxFontScale($r("app.float.maxFontScale"))
+  }
+}
+
+class MyModifier11 extends SymbolSpanModifier {
+  isNum: number = 0
+
+  applyNormalAttribute(instance: SymbolSpanModifier): void {
+    super.applyNormalAttribute?.(instance);
+  }
+
+  public setGroup1()  : void{
+    this.fontSize($r("app.string.fontSize"))
+    this.fontColor([$r("app.color.textColor"), $r("app.color.textColor"), $r("app.color.textColor")])
+  }
+}
+
+@Entry
+@Component
+
+struct Index {
+  @State message: string = 'Hello World';
+  @State text1: string = '离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。远芳侵古道，晴翠接荒城。 又送王孙去，萋萋满别情。'
+  @State text2: string = "12345"
+  @State text3: string = '离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。远芳侵古道，晴翠接荒城。 又送王孙去，萋萋满别情。'
+  textInputcontroller1: TextInputController = new TextInputController()
+  textInputcontroller2: TextInputController = new TextInputController()
+  @State Areavalue1: string = ''
+  textAreacontroller1: TextAreaController = new TextAreaController()
+  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
+  @State caretColor1: Color = Color.Green
+  @State fontSize : number = 16
+  @State fontweight2 : FontWeight | number | string = FontWeight.Bolder
+  @State canChange : boolean = true
+  @State caretPosition : number = 0
+  @State textRectInfo: RectResult = { x: 0, y: 0, width: 0, height:0 }
+  @State maxlength : number = 1000
+  @State editText: string = ''
+  @State restextColor : ResourceColor | undefined = $r("app.color.textColor");
+  @State resWidth : Length | undefined = $r("app.integer.width")
+  @State resHeight : Length | undefined = $r("app.integer.height")
+  @State resFontSize : Length | undefined = $r("app.string.fontSize")
+  @State resPlaceholder : string | Resource | undefined = $r("app.string.placeholder")
+  @State resFontfamily : string | Resource | undefined = $r("app.string.TextFontFamily")
+  @State resMinFontScale : number | Resource | undefined = $r("app.float.minFontScale")
+  @State resMaxFontScale : number | Resource | undefined = $r("app.float.maxFontScale")
+  @State resLineheight : Length | undefined | undefined = $r("app.integer.fontSize")
+  @State resIndent :  Dimension | undefined = $r("app.integer.fontSize")
+  @State resShadowOffset : number | ResourceStr | undefined = $r("app.integer.shadowOffset")
+  @State resShadowOffset2 : number | Resource | undefined = $r("app.integer.shadowOffset")
+  @State resShadowColor : ResourceColor | undefined = $r("app.color.shadowColor")
+  @State resCaretWidth : Length | undefined = $r("app.string.caretWidth")
+  @State resRadius : Length | undefined = $r('app.float.radius')
+  @State resFontWeight : number | FontWeight | ResourceStr | undefined = $r("app.string.fontWeight")
+  @State resRex : ResourceStr | undefined = $r("app.string.rex")
+  @State resIcon : string | Resource | undefined = $r("app.media.startIcon")
+  @State resAddress : string | Resource | undefined = $r("app.string.address")
+  @State resShadowRadius : number | Resource | undefined = $r('app.float.radius')
+  @State colorModeValue : ThemeColorMode = ThemeColorMode.LIGHT
+
+  @State cancelbuttonstyle : CancelButtonOptions = {
+    style:CancelButtonStyle.CONSTANT,
+    icon: {
+      color: Color.Blue,
+    },
+  }
+
+  test() :  Resource {
+    console.log("hslog test rebuild");
+    return $r("sys.color.alert")
+  }
+  controller: SearchController = new SearchController()
+  richEditorcontroller: RichEditorController = new RichEditorController()
+
+  @State myModifier1: TextModifier = new MyModifier1()
+  @State myModifier2: ContainerSpanModifier = new MyModifier2()
+  @State myModifier5: TextInputModifier = new MyModifier5()
+  @State myModifier6: SearchModifier = new MyModifier6()
+  @State myModifier7: TextAreaModifier = new MyModifier7()
+  @State myModifier8: MarqueeModifier = new MyModifier8()
+  @State myModifier9: HyperlinkModifier = new MyModifier9()
+  @State myModifier10: SymbolGlyphModifier = new MyModifier10()
+  @State myModifier11: SymbolSpanModifier = new MyModifier11()
+
+  @State isDark: boolean = false;
+  @State context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
+
+  @State text: string = "文本"
+
+  onPageShow(): void {
+    (this.myModifier1 as MyModifier1).setGroup1();
+    (this.myModifier2 as MyModifier2).setGroup1();
+    (this.myModifier5 as MyModifier5).setGroup1();
+    (this.myModifier6 as MyModifier6).setGroup1();
+    (this.myModifier7 as MyModifier7).setGroup1();
+    (this.myModifier8 as MyModifier8).setGroup1();
+    (this.myModifier9 as MyModifier9).setGroup1();
+    (this.myModifier10 as MyModifier10).setGroup1();
+    (this.myModifier11 as MyModifier11).setGroup1();
+  }
+
+
+  build() {
+    Scroll() {
+      Column() {
+
+        Row() {
+          Text("runing123www.baidu.com")
+            .attributeModifier(this.myModifier1 as MyModifier1)
+        }
+
+        Row() {
+          Text(this.resPlaceholder)
+          Text("13545222635")
+            .onClick(()=>{
+              promptAction.showToast({
+                message: 'click function',
+                duration: 15000
+              });
+            })
+            .copyOption(CopyOptions.InApp)
+          .width(this.resWidth)
+          .height(this.resHeight)
+          .font({
+            size : this.resFontSize,
+            family :this.resFontfamily
+          })
+          .fontSize(this.resFontSize)
+          .minFontScale(this.resMinFontScale)
+          .maxFontScale(this.resMaxFontScale)
+          .fontColor(this.restextColor)
+          .textShadow({
+            radius: $r("app.integer.shadowOffset"),
+            color : $r("app.color.shadowColor"),
+            offsetX: $r("app.integer.shadowOffset"),
+            offsetY: $r("app.integer.shadowOffset"),
+          })
+          .textIndent(this.resLineheight)
+          .lineHeight(this.resLineheight)
+          .fontFamily(this.resFontfamily)
+          .minFontSize(this.resFontSize)
+          .maxFontSize(this.resFontSize)
+          .letterSpacing(this.resShadowOffset)
+          .baselineOffset(this.resShadowOffset)
+          .caretColor(this.resShadowColor)
+          .selectedBackgroundColor(this.restextColor)
+          .decoration({
+              type:TextDecorationType.Underline,
+              color:this.restextColor
+          })
+          .foregroundColor(this.restextColor)
+          .dataDetectorConfig({
+           types : [],
+           color : this.restextColor,
+            decoration : {
+              type:TextDecorationType.Underline,
+              color:this.restextColor
+            }
+          })
+          .enableDataDetector(true)
+        }
+
+        Search({value : "runing" , placeholder: "aaaaaa" })
+          .attributeModifier(this.myModifier6 as SearchModifier)
+        Search({value : "runing" , placeholder: "aaaaaa" })
+          .searchButton(
+              this.resRex,
+              {
+                fontSize : this.resFontSize,
+                fontColor : this.restextColor
+              }
+            )
+          .searchIcon({
+            size: this.resFontSize,
+            color: this.restextColor,
+            src: this.resIcon,
+          })
+          .cancelButton({
+            icon:{
+            size: this.resFontSize,
+            color: this.restextColor,
+            src: this.resIcon
+            }
+          })
+          .fontColor(this.restextColor)
+          .caretStyle({
+            width:this.resCaretWidth,
+            color:this.restextColor
+          })
+          .placeholderColor(this.restextColor)
+          .placeholderFont({
+            size: this.resFontSize,
+            family : this.resFontfamily
+          })
+          .textFont({
+            size: this.resFontSize,
+            family : this.resFontfamily
+          })
+          .border({
+              width:{
+                top: this.resFontSize,
+                right: this.resFontSize,
+                bottom: this.resFontSize,
+                left: this.resFontSize,
+              },
+              color:{
+                top:this.restextColor,
+                right:this.restextColor,
+                bottom:this.restextColor,
+                left:this.restextColor,
+              },
+              style: BorderStyle.Dashed,
+              dashGap : {
+                top: this.resFontSize,
+                right: this.resFontSize,
+                bottom: this.resFontSize,
+                left: this.resFontSize,
+              },
+              radius:{
+                topLeft: this.resRadius,
+                topRight: this.resRadius,
+                bottomLeft: this.resRadius,
+                bottomRight: this.resRadius,
+              }
+          })
+          .decoration({
+            type: TextDecorationType.LineThrough,
+            color: this.restextColor,
+            style: TextDecorationStyle.SOLID
+          })
+          .minFontSize(this.resFontSize)
+          .maxFontSize(this.resFontSize)
+          .letterSpacing(this.resLineheight)
+          .lineHeight(this.resLineheight)
+          .minFontScale(this.resMinFontScale)
+          .maxFontScale(this.resMaxFontScale)
+          .selectedBackgroundColor(this.restextColor)
+          .inputFilter(this.resRex)
+          .textIndent(this.resIndent)
+
+
+        //TextArea({text : this.resPlaceholder , placeholder: this.resPlaceholder })
+        TextInput({text : "runinging12345", placeholder: "aaa" })
+          .attributeModifier(this.myModifier5 as TextInputModifier)
+
+        TextArea({text : "runinging12345", placeholder: "runinging" })
+          .attributeModifier(this.myModifier7 as TextAreaModifier)
+        TextInput({text : "", placeholder: this.resPlaceholder })
+        .placeholderColor(this.restextColor)
+        .placeholderFont({
+          size: (this.resFontSize),
+          family : this.resFontfamily
+        })
+        .backgroundColor(this.restextColor)
+        .caretColor(this.restextColor)
+        .selectedBackgroundColor(this.restextColor)
+        .caretStyle({
+          width:(this.resCaretWidth),
+          color:(this.restextColor)
+         })
+        .width(this.resWidth)
+        .height(this.resHeight)
+        .padding({
+          top: this.resFontSize,
+          right: this.resFontSize,
+          bottom: this.resFontSize,
+          left: this.resFontSize,
+        })
+        .margin({
+          top: this.resFontSize,
+          right: this.resFontSize,
+          bottom: this.resFontSize,
+          left: this.resFontSize,
+        })
+        .border({
+        width:{
+          top: this.resFontSize,
+          right: this.resFontSize,
+          bottom: this.resFontSize,
+          left: this.resFontSize,
+        },
+        color:{
+          top:this.restextColor,
+          right:this.restextColor,
+          bottom:this.restextColor,
+          left:this.restextColor,
+        },
+        style: BorderStyle.Dashed,
+        dashWidth : {
+           top: this.resFontSize,
+           right: this.resFontSize,
+           bottom: this.resFontSize,
+           left: this.resFontSize,
+         },
+        dashGap : {
+          top: this.resFontSize,
+          right: this.resFontSize,
+          bottom: this.resFontSize,
+          left: this.resFontSize,
+        },
+        radius:{
+          topLeft: this.resRadius,
+          topRight: this.resRadius,
+          bottomLeft: this.resRadius,
+          bottomRight: this.resRadius,
+        }
+        })
+        .borderWidth({
+            top: this.resFontSize,
+            right: this.resFontSize,
+            bottom: this.resFontSize,
+            left: this.resFontSize,
+          })
+        .borderWidth(5)
+        .borderColor({
+            top:this.restextColor,
+            right:this.restextColor,
+            bottom:this.restextColor,
+            left:this.restextColor,
+        })
+        .borderRadius({
+          topLeft: this.resRadius,
+          topRight: this.resRadius,
+          bottomLeft: this.resRadius,
+          bottomRight: this.resRadius,
+        })
+        .fontSize(this.resFontSize)
+        .fontColor(this.restextColor)
+        .fontWeight(this.resFontWeight)
+        .fontFamily(this.resFontfamily)
+        .minFontScale(this.resMinFontScale)
+        .maxFontScale(this.resMaxFontScale)
+        .inputFilter(this.resRex)
+        .foregroundColor(this.restextColor)
+        .showError(this.resRex)
+        .type(InputType.Password)
+        .showPasswordIcon(true)
+        .passwordIcon({
+          onIconSrc: this.resIcon,
+          offIconSrc: this.resIcon,
+        })
+        .showUnderline(true)
+        .underlineColor({
+          normal: this.restextColor,
+          typing: this.restextColor,
+          error: this.restextColor,
+          disable: this.restextColor,
+        })
+        .underlineColor(this.restextColor)
+        .cancelButton({
+         style:CancelButtonStyle.CONSTANT,
+         icon: {
+            size: this.resFontSize,
+            color: this.restextColor,
+            src: this.resIcon,
+         },
+        })
+        .decoration({
+          type:TextDecorationType.Underline,
+          color:this.restextColor
+        })
+        .minFontSize(this.resFontSize)
+        .maxFontSize(this.resFontSize)
+        .letterSpacing(this.resCaretWidth)
+        .lineHeight(this.resLineheight)
+        .textIndent(this.resIndent)
+
+
+        Button("切换undifined").onClick((event: ClickEvent) => {
+          this.restextColor = undefined;
+          this.resWidth = undefined;
+          this.resHeight = undefined;
+          this.resPlaceholder = undefined;
+          this.resFontSize = undefined
+          this.resFontfamily = undefined
+          this.resMinFontScale = undefined
+          this.resMaxFontScale = undefined
+          this.resLineheight = undefined
+          this.resShadowOffset = undefined
+          this.resCaretWidth = undefined
+          this.resRadius = undefined
+          this.resRex = undefined
+          this.resIndent = undefined
+          this.resIcon = undefined
+          this.resAddress = undefined
+          this.resShadowRadius = undefined
+          this.resShadowOffset2 = undefined;
+          (this.myModifier1 as MyModifier1).setGroup2();
+          (this.myModifier5 as MyModifier5).setGroup2();
+        })
+          .margin(10)
+
+
+        Button("切回resource").onClick((event: ClickEvent) => {
+          this.restextColor = $r("app.color.textColor");
+          this.resWidth = $r("app.integer.width")
+          this.resHeight = $r("app.integer.height")
+          this.resPlaceholder = $r("app.string.placeholder")
+          this.resFontSize = $r("app.string.fontSize")
+          this.resFontfamily = $r("app.string.TextFontFamily")
+          this.resMinFontScale = $r("app.float.minFontScale")
+          this.resMaxFontScale = $r("app.float.maxFontScale")
+          this.resLineheight = $r("app.integer.fontSize")
+          this.resShadowOffset = $r("app.integer.shadowOffset")
+          this.resCaretWidth = $r("app.string.caretWidth")
+          this.resRadius = $r('app.float.radius')
+          this.resRex = $r("app.string.rex")
+          this.resIndent = $r("app.integer.fontSize")
+          this.resIcon = $r("app.media.startIcon")
+          this.resAddress = $r("app.string.address")
+          this.resShadowRadius = $r('app.float.radius')
+          this.resShadowOffset2 = $r("app.integer.shadowOffset");
+          (this.myModifier1 as MyModifier1).setGroup1();
+          (this.myModifier5 as MyModifier5).setGroup1();
+        })
+          .margin(10)
+
+
+        Button("切换深浅色")
+          .margin(10)
+          .onClick(() => {
+            if (this.isDark) {
+              this.isDark = false;
+              this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
+            } else {
+              this.isDark = true;
+              this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
+            }
+          })
+
+
+        Marquee({
+          start: false,
+          step: 10,
+          loop: Number.POSITIVE_INFINITY,
+          fromStart: true,
+          src: 'Running Marquee'
+        })
+          .attributeModifier(this.myModifier8 as MarqueeModifier)
+        Marquee({
+          start: false,
+          step: 10,
+          loop: Number.POSITIVE_INFINITY,
+          fromStart: true,
+          src: 'Running Marquee'
+        })
+        .marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
+        .width('300vp')
+        .height('80vp')
+        .fontColor(this.restextColor)
+        .fontSize(this.resFontSize)
+        .fontFamily(this.resFontfamily)
+
+        Hyperlink(this.resAddress, "this.resPlaceholder") {
+        }
+        .attributeModifier(this.myModifier9 as HyperlinkModifier)
+        //.color(this.restextColor)
+
+        Text()
+        {
+          ContainerSpan(){
+            ImageSpan(this.resIcon)
+              .width('40vp')
+              .height('40vp')
+              .verticalAlign(ImageSpanAlignment.CENTER)
+            Span('   Hello World !   ').fontSize('16fp').fontColor(Color.White)
+          }.attributeModifier(this.myModifier2 as ContainerSpanModifier)
+        }
+
+        Text() {
+          SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
+            .attributeModifier(this.myModifier11 as SymbolSpanModifier)
+          SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
+          .fontSize(this.resFontSize)
+          .fontColor([this.restextColor, this.restextColor, this.restextColor])
+        }
+
+        Text() {
+          Span("runinging")
+            .font({
+              size : (this.resFontSize),
+              family :this.resFontfamily
+            })
+            .fontColor(this.restextColor)
+            .fontSize(this.resFontSize)
+            .fontWeight(this.resFontWeight)
+            .fontFamily(this.resFontfamily)
+            .letterSpacing(this.resCaretWidth)
+            .textShadow({
+              radius: this.resShadowRadius,
+              color : this.resShadowColor,
+              offsetX: this.resShadowOffset2,
+              offsetY: this.resShadowOffset2,
+            })
+            .decoration({
+                type:TextDecorationType.Underline,
+                color:this.restextColor
+            })
+            .lineHeight(this.resLineheight)
+            .textBackgroundStyle({
+              color: this.restextColor,
+              radius: {
+                topLeft : this.resRadius,
+                topRight : this.resRadius,
+                bottomLeft : this.resRadius,
+                bottomRight : this.resRadius,
+              }
+            })
+        }
+        SymbolGlyph($r('sys.symbol.ohos_trash'))
+          .attributeModifier(this.myModifier10 as SymbolGlyphModifier)
+        SymbolGlyph($r('sys.symbol.ohos_trash'))
+          .fontSize(this.resFontSize)
+          .fontColor([this.resFontSize, this.resFontSize, this.resFontSize])
+          .minFontScale(this.resMinFontScale)
+          .maxFontScale(this.resMaxFontScale)
+
+
+        Tabs() {
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Pink)
+          }.tabBar(SubTabBarStyle.of(this.text))
+
+          TabContent() {
+            Column(){
+              TextInput({text : "", placeholder : "111111"})
+                .placeholderColor($r("app.color.textColor"))
+                .fontSize($r("app.string.fontSize"))
+                .fontColor($r("app.color.textColor"))
+                .decoration({type: TextDecorationType.Underline, color : $r("app.color.textColor") })
+                .passwordIcon({
+                    onIconSrc : $r("app.media.startIcon"),
+                    offIconSrc : $r("app.media.startIcon")
+                })
+            }.width('100%').height('100%').backgroundColor(Color.Green)
+
+          }.tabBar(SubTabBarStyle.of(this.text))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Blue)
+          }.tabBar(SubTabBarStyle.of(this.text))
+        }
+        .height('60%')
+        .backgroundColor(0xf1f3f5)
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          Text("这是文本")
+            .foregroundColor(Color.Red)
+        }
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          TextInput({text : "这是TextInput", placeholder: "1231231" })
+            .foregroundColor(Color.Red)
+        }
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          TextArea({text : "这是TextArea", placeholder: "1231231" })
+            .foregroundColor(Color.Red)
+        }
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          Search({value : "这是Search" , placeholder: "aaaaaa" })
+            .foregroundColor(Color.Red)
+        }
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          Marquee({
+            start: false,
+            step: 10,
+            loop: Number.POSITIVE_INFINITY,
+            fromStart: true,
+            src: '这是Marquee'
+          })
+            .foregroundColor(Color.Red)
+        }
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          Hyperlink(this.resAddress, "这是HyperLink")
+            .foregroundColor(Color.Red)
+        }
+
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          SymbolGlyph($r('sys.symbol.ohos_trash'))
+            .foregroundColor(Color.Red)
+        }
+
+        WithTheme({ colorMode : this.colorModeValue} ) {
+          Text() {
+            ContainerSpan(){
+              ImageSpan(this.resIcon)
+                .width('40vp')
+                .height('40vp')
+                .foregroundColor(Color.Red)
+              Span("这是Span")
+                .foregroundColor(Color.Red)
+            }
+            SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
+              .foregroundColor(Color.Red)
+          }
+        }
+
+        Row(){
+          Button("LightMode").onClick((event: ClickEvent) => {
+            this.colorModeValue = ThemeColorMode.LIGHT
+          }).margin(10)
+          Button("DarkMode").onClick((event: ClickEvent) => {
+            this.colorModeValue = ThemeColorMode.DARK
+          }).margin(10)
+          Button("SystemMode").onClick((event: ClickEvent) => {
+            this.colorModeValue = ThemeColorMode.SYSTEM
+          }).margin(10)
+        }.width(400).height(200)
+      }
+      .width(400)
+      .height('100%')
+    }
+    .height('100%')
+  }
+
+}
\ No newline at end of file