本文接上篇繼續更新ArkUI中組件的使用，本文介紹的組件有TextArea組件、RichEditor組件、RichText組件、Search組件，這幾個組件的使用對應特定場景，使用時更加需要注意根據需求去使用
TextArea組件
官方文檔：
TextArea-文本與輸入-ArkTS組件-ArkUI（方舟UI框架）-應用框架 - 華為HarmonyOS開發者
?參數表：
| 名稱 | 類型 | 必填 | 說明 |
|---|---|---|---|
| placeholder | ResourceStr | 否 | 設置無輸入時的提示文本。輸入內容后，提示文本不顯示。 僅設置placeholder屬性時，手柄依然跟隨拖動，手柄松開后光標停留在文字開頭位置。 |
| text | ResourceStr | 否 | 設置輸入框當前的文本內容。 建議通過onChange事件將狀態變量與文本實時綁定， 避免組件刷新時TextArea中的文本內容異常。 從API version 10開始，該參數支持$$雙向綁定變量。 |
| controller8+ | TextAreaController | 否 | 設置TextArea控制器。 |
?TextArea組件多行文本輸入框組件，當輸入的文本內容超過組件寬度時會自動換行顯示，在以下案例中，展示了三個多行文本輸入框，第一個是默認的，并沒有給高度，第二個給了高度，以及占位字符，第三個加上了，最大字符數，以及顯示計數器，在輸入時可通過onChange回調函數獲取到輸入框中的值
| 屬性名稱 | 描述 | 可選值或默認值 |
|---|---|---|
| placeholder | 設置文本框的提示文本 | 字符串值，如代碼中的 '請輸入內容' |
| width | 設置文本框的寬度 | 可設置為數字、百分比等，如代碼中的 '100%' |
| height | 設置文本框的高度 | 可設置為像素值等，如代碼中的 150 |
| maxLength | 設置文本框的最大輸入長度 | 正整數，如代碼中的 20 |
| showCounter | 是否顯示輸入計數器 | boolean 值，如代碼中的 true |
?代碼部分：
@Component
export struct TextAreaCase {build() {NavDestination() {Column({ space: 20 }) {TextArea()TextArea({placeholder: '請輸入內容',}).width('100%').height(150)TextArea({placeholder: '請輸入內容',}).width('100%').height(150).maxLength(20)// 設置最大長度.showCounter(true) // 顯示計數器}.justifyContent(FlexAlign.Center).height('100%').width('80%')}.height('100%').width('100%').title('展示TextArea')}
}@Builder
function TextAreaCaseBuilder() {TextAreaCase()
}?展示效果：
?RichEditor組件
官方文檔：
RichEditor-文本與輸入-ArkTS組件-ArkUI（方舟UI框架）-應用框架 - 華為HarmonyOS開發者
?支持圖文混排和文本交互式編輯的組件，這個組件屬于是用法·多樣化，一般使用場景在，對輸入內容有多中交互，以及輸入內容有多樣化需求的場景中
| 屬性/設置 | 描述 | 可選值或默認值 |
|---|---|---|
options | 配置?RichEditor?的選項，如控制器?controller | RichEditorOptions?對象，包含控制器等配置項 |
onReady | 組件準備就緒時的回調函數，用于注冊事件或初始化操作 | 回調函數，如代碼中的注冊文本變化回調和設置屬性字符串 |
controller | RichEditor?的控制器，用于操作和獲取組件的內容和狀態 | RichEditorController?或?RichEditorStyledStringController?對象 |
StyledString | 屬性字符串，包含文本和樣式信息 | 包含文本和樣式范圍的對象 |
MutableStyledString | 可變屬性字符串，允許動態修改文本和樣式 | 包含初始文本和樣式范圍的對象 |
?這里借用官方案例做展示，這里需要關注的點在于，RichEditor({controller:控制器})，這里邊的控制器，這個編輯器里的組件可以通過控制器控制其行為
?代碼部分：
import { image } from '@kit.ImageKit';
import { LengthMetrics } from '@kit.ArkUI';@Component
export struct RichEditorCase {stringLength: number = 0;imagePixelMap: image.PixelMap | undefined = undefined;@State selection: string = "";@State content: string = "";@State range: string = "";@State replaceString: string = "";@State rangeBefore: string = "";@State rangeAfter: string = "";richEditorStyledString: MutableStyledString = new MutableStyledString("");textStyle: TextStyle = new TextStyle({fontWeight: FontWeight.Lighter,fontFamily: 'HarmonyOS Sans',fontColor: Color.Green,fontSize: LengthMetrics.vp(30),fontStyle: FontStyle.Normal})fontStyle1: TextStyle = new TextStyle({ fontColor: Color.Blue });fontStyle2: TextStyle = new TextStyle({fontWeight: FontWeight.Bolder,fontFamily: 'Arial',fontColor: Color.Orange,fontSize: LengthMetrics.vp(30),fontStyle: FontStyle.Italic})controller1: RichEditorController = new RichEditorController()options1: RichEditorOptions = { controller: this.controller1 };// 創建屬性字符串對象mutableStyledString: MutableStyledString = new MutableStyledString("初始屬性字符串",[{start: 0,length: 5,styledKey: StyledStringKey.FONT,styledValue: this.fontStyle1}]);styledString: StyledString = new StyledString("插入屬性字符串",[{start: 2,length: 4,styledKey: StyledStringKey.FONT,styledValue: this.fontStyle2}]);controller: RichEditorStyledStringController = new RichEditorStyledStringController();options: RichEditorStyledStringOptions = { controller: this.controller };// 文本內容變化回調contentChangedListener: StyledStringChangedListener = {onWillChange: (value: StyledStringChangeValue) => {this.range = '[ ' + value.range.start + ' , ' + value.range.end + ' ]';this.replaceString = value.replacementString.getString();return true;},onDidChange: (rangeBefore, rangeAfter) => {this.rangeBefore = '[ ' + rangeBefore.start + ' , ' + rangeBefore.end + ' ]';this.rangeAfter = '[ ' + rangeAfter.start + ' , ' + rangeAfter.end + ' ]';}}async aboutToAppear() {console.info("aboutToAppear initial imagePixelMap");this.imagePixelMap = await this.getPixmapFromMedia($r('app.media.app_icon'));}build() {NavDestination() {Column({ space: 6 }) {Column() {Text("選中區信息").fontSize(20).width("100%")Text("selection range: " + this.selection).width("100%")Text("selection content: " + this.content).width("100%")}.width("100%").height("10%")Column() {Text("onWillChange回調信息").fontSize(20).width("100%")Text("range: " + this.range).width("100%")Text("replacementString: " + this.replaceString).width("100%")Text("onWillChange回調信息").fontSize(20).width("100%")Text("rangeBefore: " + this.rangeBefore).width("100%")Text("rangeAfter: " + this.rangeAfter).width("100%")}.borderWidth(1).borderColor(Color.Black).width("100%").height("20%")RichEditor(this.options).onReady(() => {// 注冊文本變化回調this.controller.onContentChanged(this.contentChangedListener);// 設定組件展示的屬性字符串this.controller.setStyledString(this.mutableStyledString);}).height("20%").width("100%")RichEditor(this.options1).onReady(() => {this.controller1.addTextSpan("把這些文字轉換成屬性字符串");}).height("10%").width("100%").borderWidth(1).borderColor(Color.Black)Row({ space: 2 }) {Button("插入圖片").stateEffect(true).onClick(() => {if (this.imagePixelMap !== undefined) {let imageStyledString = new MutableStyledString(new ImageAttachment({value: this.imagePixelMap,size: { width: 50, height: 50 },layoutStyle: { borderRadius: LengthMetrics.vp(10) },verticalAlign: ImageSpanAlignment.BASELINE,objectFit: ImageFit.Contain}))// 獲取組件展示的屬性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.appendStyledString(imageStyledString);// 使插入圖片后的屬性字符串展示在組件上this.controller.setStyledString(this.richEditorStyledString);this.controller.setCaretOffset(this.richEditorStyledString.length);}})Button("插入文本").onClick(() => {// 獲取組件展示的屬性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.appendStyledString(this.styledString);// 使插入文本后的屬性字符串展示在組件上this.controller.setStyledString(this.richEditorStyledString);this.controller.setCaretOffset(this.richEditorStyledString.length);})Button("刪除選中內容").onClick(() => {// 獲取選中范圍let richEditorSelection = this.controller.getSelection();let start = richEditorSelection.start ? richEditorSelection.start : 0;let end = richEditorSelection.end ? richEditorSelection.end : 0;if (start < 0 || end <= start) {return;}// 獲取組件展示的屬性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.removeString(start, end - start);// 使刪除內容后的屬性字符串展示在組件上this.controller.setStyledString(this.richEditorStyledString);})}Row({ space: 2 }) {Button("獲取選中內容").onClick(() => {// 獲取選中范圍let richEditorSelection = this.controller.getSelection();let start = richEditorSelection.start ? richEditorSelection.start : 0;let end = richEditorSelection.end ? richEditorSelection.end : 0;// 獲取組件展示的屬性字符串this.richEditorStyledString = this.controller.getStyledString();this.selection = '[ ' + start + ' , ' + end + ' ]';if (start == end) {this.content = "";} else {this.content = this.richEditorStyledString.subStyledString(start, end - start).getString();}})Button("更新選中樣式").onClick(() => {// 獲取選中范圍let richEditorSelection = this.controller.getSelection();let start = richEditorSelection.start ? richEditorSelection.start : 0;let end = richEditorSelection.end ? richEditorSelection.end : 0;if (start < 0 || end <= start) {return;}// 獲取組件展示的屬性字符串this.richEditorStyledString = this.controller.getStyledString();this.richEditorStyledString.setStyle({start: start,length: end - start,styledKey: StyledStringKey.FONT,styledValue: this.textStyle})// 使變更樣式后的屬性字符串展示在組件上this.controller.setStyledString(this.richEditorStyledString);})}Row({ space: 2 }) {//將屬性字符串轉換成span信息Button("調用fromStyledString").onClick(() => {this.controller1.addTextSpan("調用fromStyledString：" +JSON.stringify(this.controller1.fromStyledString(this.mutableStyledString)))})//將給定范圍的組件內容轉換成屬性字符串Button("調用toStyledString").onClick(() => {this.controller.setStyledString(this.controller1.toStyledString({ start: 0, end: 13 }))})}}.justifyContent(FlexAlign.Center).height('100%').width('100%')}.height('100%').width('100%').title('展示RichEditor')}private async getPixmapFromMedia(resource: Resource) {let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({bundleName: resource.bundleName,moduleName: resource.moduleName,id: resource.id})let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))let createPixelMap: image.PixelMap = await imageSource.createPixelMap({desiredPixelFormat: image.PixelMapFormat.RGBA_8888})await imageSource.release()return createPixelMap}
}@Builder
function RichEditorCaseBuilder() {RichEditorCase()
}?效果展示：
RichText組件
官方文檔：
RichText-文本與輸入-ArkTS組件-ArkUI（方舟UI框架）-應用框架 - 華為HarmonyOS開發者
富文本組件，解析并顯示HTML格式文本，可以在頁面中展示HTML格式的文本，接收一個HTML格式字符串，這里的重點在于RichText("HTML格式字符串")
| 屬性名稱 | 描述 | 可選值或默認值 |
|---|---|---|
| width | 設置組件的寬度 | 可設置為像素值、百分比等，如代碼中的 '80%' |
| height | 設置組件的高度 | 可設置為像素值等，如代碼中的 300 |
| border | 設置邊框屬性 | 包含邊框寬度、顏色、圓角等，如代碼中的?.border({ width: 4 })?等 |
| borderWidth | 設置邊框寬度 | 可設置為像素值等，如代碼中的 1 |
| borderColor | 設置邊框顏色 | 顏色值，如代碼中的 '#E6B5B2' |
| borderRadius | 設置邊框圓角半徑 | 可設置為像素值等，如代碼中的 10 |
?代碼部分：
@Component
export struct RichTextCase {@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>';build() {NavDestination() {Column({ space: 20 }) {RichText(this.data).width('80%').height(300).border({ width: 4 }).borderWidth(1).borderColor('#E6B5B2').borderRadius(10)}.justifyContent(FlexAlign.Center).height('100%').width('100%')}.height('100%').width('100%').title('展示RichText')}
}@Builder
function RichTextCaseBuilder() {RichTextCase()
}?效果展示：
Search組件
官方文檔：
Search-文本與輸入-ArkTS組件-ArkUI（方舟UI框架）-應用框架 - 華為HarmonyOS開發者
搜索框組件?，是一個鴻蒙系統重標準的搜索框樣式，可修改其參數以及屬性去根據需求自定義效果，這里是參數表
| 參數名 | 類型 | 必填 | 說明 |
|---|---|---|---|
| value | string | 否 | 設置當前顯示的搜索文本內容。 從API version 10開始，該參數支持$$雙向綁定變量。 |
| placeholder | ResourceStr10+ | 否 | 設置無輸入時的提示文本。 |
| icon | string | 否 | 設置搜索圖標路徑，默認使用系統搜索圖標。 說明： icon的數據源支持本地圖片和網絡圖片。 - 支持的圖片格式包括png、jpg、bmp、svg、gif、pixelmap和heif。 - 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data], 其中[base64 data]為Base64字符串數據。 如果與屬性searchIcon同時設置，則searchIcon優先。 |
| controller | SearchController | 否 | 設置Search組件控制器。 |
?代碼部分：
這里通過searchButton屬性設置了搜索框尾部的按鈕字樣
@Component
export struct SearchCase {build() {NavDestination() {Column({ space: 20 }) {Search({ placeholder: '請輸入內容' }).searchButton('搜索')}.justifyContent(FlexAlign.Center).height('100%').width('80%')}.height('100%').width('100%').title('展示Search')}
}@Builder
function SearchCaseBuilder() {SearchCase()
}?效果展示：
本文就介紹到TextArea組件，RichEditor組件，RichText組件以及Search組件了，持續更新中..............
)
——初步了解以及QuickStart樣例)
