1# 属性字符串 (系统接口)
2
3方便灵活应用文本样式的对象，可通过TextController中的[setStyledString](./ts-basic-components-text.md#setstyledstring12)方法与Text组件绑定，可通过RichEditorStyledStringController中的[setStyledString](ts-basic-components-richeditor.md#setstyledstring12)方法与RichEditor组件绑定。
4
5>  **说明：**
6>
7>  该组件从API Version 13开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9>  当前页面仅包含本模块的系统接口，其他公开接口参见[属性字符串](ts-universal-styled-string.md)。
10
11## StyledString
12
13### marshalling
14
15static marshalling(styledString: StyledString): ArrayBuffer
16
17序列化属性字符串。
18
19**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名 | 类型 | 必填 | 说明 |
26| ----- | ----- | ---- | ---- |
27| styledString | [StyledString](ts-universal-styled-string.md) | 是  | 属性字符串参数。 |
28
29**返回值：**
30
31| 类型              |说明       |
32| ------- | --------------------------------- |
33| ArrayBuffer | 序列化后的buffer信息。<br/>**说明：** <br/>目前支持文本和图片。 |
34
35
36### unmarshalling
37
38static unmarshalling(buffer: ArrayBuffer): Promise\<StyledString>
39
40反序列化后得到属性字符串。
41
42**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。
43
44**系统能力：** SystemCapability.ArkUI.ArkUI.Full
45
46**参数：**
47
48| 参数名 | 类型 | 必填 | 说明 |
49| ----- | ----- | ---- | ---- |
50| buffer | ArrayBuffer | 是  | 属性字符串序列化后的数据。 |
51
52**返回值：**
53
54| 类型                             | 说明                  |
55| -------------------------------- | --------------------- |
56| Promise\<[StyledString](ts-universal-styled-string.md)> |Promise对象，返回属性字符串。 |
57
58## 示例
59
60该示例通过marshalling、unmarshalling属性实现了属性字符串序列化和反序列化的功能。
61
62```ts
63// xxx.ets
64import { LengthMetrics } from '@kit.ArkUI'
65
66@Entry
67@Component
68struct Index {
69  @State textTitle: string = "序列化和反序列化接口"
70  @State textResult: string = "Hello world"
71  @State serializeStr: string = "序列化"
72  @State flag: boolean = false
73  private textAreaController: TextAreaController = new TextAreaController()
74  private buff: Uint8Array = new Uint8Array()
75
76  fontStyle: TextStyle = new TextStyle({
77    fontWeight: FontWeight.Lighter,
78    fontFamily: 'HarmonyOS Sans',
79    fontColor: Color.Green,
80    fontSize: LengthMetrics.vp(30),
81    fontStyle: FontStyle.Normal
82  })
83  // 创建属性字符串对象
84  styledString: StyledString = new StyledString("Hello world",
85    [{ start: 0, length: 11, styledKey: StyledStringKey.FONT, styledValue: this.fontStyle }]);
86
87  @Builder
88  controllableBuild() {
89    Column(){
90      TextArea({
91        text: this.textResult,
92        controller: this.textAreaController
93      }).width('95%').height('40%').enableKeyboardOnFocus(false)
94
95      Button(this.serializeStr)
96        .margin(5)
97        .onClick(async ()=>{
98          this.flag = !this.flag
99          if (!this.flag) {
100            console.info("Debug: 反序列化")
101            let styles: StyledString = await StyledString.unmarshalling(this.buff.buffer)
102            this.textTitle = "调取decodeTlv接口后，反序列化的结果显示："
103            if (styles == undefined) {
104              console.error("Debug: styledString 获取失败！！！")
105              return
106            }
107            this.textResult =  styles.getString()
108            console.info("Debug: this.textResult = " + this.textResult)
109            let stylesArr = styles.getStyles(0, this.textResult.length, StyledStringKey.FONT)
110            console.info("Debug: stylesArr.length = " + stylesArr.length)
111            for (let i = 0; i < stylesArr.length; ++i) {
112              console.info("Debug: style.start = " + stylesArr[i].start)
113              console.info("Debug: style.length = " + stylesArr[i].length)
114              console.info("Debug: style.styledKey = " + stylesArr[i].styledKey)
115              let font = stylesArr[i].styledValue as TextStyle
116              console.info("Debug: style.fontColor = " + font.fontColor)
117              console.info("Debug: style.fontSize = " + font.fontSize)
118              console.info("Debug: style.fontFamily = " + font.fontFamily)
119              console.info("Debug: style.fontStyle = " + font.fontStyle)
120            }
121            let subStr = styles.subStyledString(0, 2)
122            console.info("Debug: subStr = " + subStr.getString())
123            this.serializeStr = "序列化"
124          } else {
125            console.info("Debug: 序列化")
126            let resultBuffer = StyledString.marshalling(this.styledString)
127            this.buff = new Uint8Array(resultBuffer)
128            this.textTitle = "调取encodeTlv接口后，序列化的结果显示："
129            this.textResult = this.buff.toString()
130            console.info("Debug: buff = " + this.buff.toString())
131            this.serializeStr = "反序列化"
132          }
133        })
134    }.margin(10)
135  }
136
137  build() {
138    Column() {
139      Blank().margin(30)
140      Text(this.textTitle)
141      this.controllableBuild()
142    }
143  }
144}
145```