1 Star 0 Fork 5.4K

王关 / docs_custom

forked from OpenHarmony / docs 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
39705.diff 17.18 KB
一键复制 编辑 原始数据 按行查看 历史
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Rich_Editor.gif b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Rich_Editor.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d4dcf3fba0c9e6169719f03f398c15477fc3a7ed
Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Rich_Editor.gif differ
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Search.gif b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Search.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b25f5f1f4b3cfc81b24ce9aa5d6d67725339e924
Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Search.gif differ
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Text_Area.gif b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Text_Area.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3214a6d5aff49ed27135ba0affc0e9eb87c9fadc
Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Text_Area.gif differ
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Text_Input.gif b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Text_Input.gif
new file mode 100644
index 0000000000000000000000000000000000000000..51a917ea21eda1256855a7bf9859c756076c3f25
Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/Custom_Text_Input.gif differ
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md
index 9d39e5e3524db6bcaa4139fc1d0944d3dcf6302e..3d208ea15504010980ddd08f4fe68d740588cfd5 100644
--- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md
+++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-richeditor.md
@@ -34,7 +34,7 @@ RichEditor(value: RichEditorOptions)
### customKeyboard
-customKeyboard(value: CustomBuilder)
+customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
设置自定义键盘。
@@ -54,9 +54,10 @@ customKeyboard(value: CustomBuilder)
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| ------ | ------------------------------------------- | ---- | ------------ |
-| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| ------- | ------------------------------------------- | ---- | ------------ |
+| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| options | [KeyboardOptions](#keyboardoptions12) | 否 | 自定义键盘。 |
### bindSelectionMenu
@@ -931,6 +932,14 @@ onLongPress(callback: (event?: GestureEvent) => void )
| ----- | ---------------------------------------- | ---- | ------- |
| event | [GestureEvent](ts-gesture-settings.md#gestureevent对象说明) | 否 | 用户长按事件。 |
+## KeyboardOptions<sup>12+</sup>
+
+设置自定义键盘是否支持避让属性。
+
+| 名称 | 类型定义 | 描述 |
+| --------------- | ---------------------------- | ------------------------------------ |
+| KeyboardOptions | {supportAvoidance?: boolean} | 设置是否可以支持自定义键盘触发避让。 |
+
## 示例
### 示例1
@@ -2951,4 +2960,82 @@ struct RichEditorDemo {
}
}
```
-![PreventDefaultExample](figures/richEditorPreventDefault.gif)
\ No newline at end of file
+![PreventDefaultExample](figures/richEditorPreventDefault.gif)
+
+### 示例14
+
+supportAvoidance使用示例。
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct RichEditorExample {
+ controller: RichEditorController = new RichEditorController()
+ @State height1:string|number = '20%'
+ @State height2:number = 100
+ @State supportAvoidance:boolean = true;
+
+ // 自定义键盘组件
+ @Builder CustomKeyboardBuilder() {
+ Column() {
+ Row(){
+ Button('增加特表情包').onClick(() => {
+ this.controller.addTextSpan("\uD83D\uDE0A",
+ {
+ style:
+ {
+ fontColor: Color.Orange,
+ }
+ })
+ })
+ }
+ Grid() {
+ ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
+ GridItem() {
+ Button(item + "")
+ .width(110).onClick(() => {
+ this.controller.addTextSpan(item + '', {
+ offset: this.controller.getCaretOffset(),
+ style:
+ {
+ fontColor: Color.Orange,
+ fontSize: 30
+ }
+ })
+ this.controller.setCaretOffset(this.controller.getCaretOffset() + item.toString().length)
+ })
+ }
+ })
+ }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
+ }.backgroundColor(Color.Gray)
+ }
+
+ build() {
+ Column() {
+ Row(){
+ Button("20%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "20%"
+ })
+ Button("80%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "80%"
+ })
+ }
+ .height(this.height1)
+ .width("100%")
+ RichEditor({ controller: this.controller })
+ // 绑定自定义键盘
+ .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })
+ .borderWidth(1)
+ .borderColor(Color.Red)
+ .width("100%")
+ }
+ }
+}
+```
+
+![CustomRichEditorType](figures/Custom_Rich_Editor.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-search.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-search.md
index 9760622ca974ea0546f32d873fa68badc2e8b349..d945b9511944ebea2efa6509b43047a5b7cf56a5 100644
--- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-search.md
+++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-search.md
@@ -203,7 +203,7 @@ selectionMenuHidden(value: boolean)
### customKeyboard<sup>10+</sup>
-customKeyboard(value: CustomBuilder)
+customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
设置自定义键盘。
@@ -223,9 +223,10 @@ customKeyboard(value: CustomBuilder)
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| ------ | ------------------------------------------- | ---- | ------------ |
-| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| ------- | ------------------------------------------- | ---- | ------------ |
+| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| options | [KeyboardOptions](#keyboardoptions12) | 否 | 自定义键盘。 |
### type<sup>11+</sup>
@@ -468,6 +469,14 @@ getTextContentRect(): RectResult
| width | number | 内容宽度大小。|
| height | number | 内容高度大小。|
+## KeyboardOptions<sup>12+</sup>
+
+设置自定义键盘是否支持避让属性。
+
+| 名称 | 类型定义 | 描述 |
+| --------------- | ---------------------------- | ------------------------------------ |
+| KeyboardOptions | {supportAvoidance?: boolean} | 设置是否可以支持自定义键盘触发避让。 |
+
### getTextContentLineCount<sup>10+</sup>
@@ -666,4 +675,66 @@ struct SearchExample {
}
```
-![searchEnterKeyType](figures/searchEnterKey.gif)
\ No newline at end of file
+![searchEnterKeyType](figures/searchEnterKey.gif)
+
+### 示例5
+
+supportAvoidance使用示例。
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct SearchExample {
+ controller: SearchController = new SearchController()
+ @State inputValue: string = ""
+ @State height1:string|number = '20%'
+ @State supportAvoidance:boolean = true;
+ // 自定义键盘组件
+ @Builder CustomKeyboardBuilder() {
+ Column() {
+ Row(){
+ Button('x').onClick(() => {
+ // 关闭自定义键盘
+ this.controller.stopEditing()
+ }).margin(10)
+ }
+ Grid() {
+ ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
+ GridItem() {
+ Button(item + "")
+ .width(110).onClick(() => {
+ this.inputValue += item
+ })
+ }
+ })
+ }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
+ }
+ .backgroundColor(Color.Gray)
+ }
+
+ build() {
+ Column() {
+ Row(){
+ Button("20%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "20%"
+ })
+ Button("80%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "80%"
+ })
+ }
+ .height(this.height1)
+ .width("100%")
+ Search({ controller: this.controller, value: this.inputValue})
+ // 绑定自定义键盘
+ .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })
+ }
+ }
+}
+```
+
+![CustomSearchKeyType](figures/Custom_Search.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md
index f79edb10b264a75a9facf52693af0dcedeb78ee1..02ddf37d37f2fa1eb7c1277918070d651582dbe1 100644
--- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md
+++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md
@@ -237,7 +237,7 @@ maxLines(value: number)
### customKeyboard<sup>10+</sup>
-customKeyboard(value: CustomBuilder)
+customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
设置自定义键盘。
@@ -257,9 +257,10 @@ customKeyboard(value: CustomBuilder)
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| ------ | ------------------------------------------- | ---- | ------------ |
-| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| ------- | ------------------------------------------- | ---- | ------------ |
+| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| options | [KeyboardOptions](#keyboardoptions12) | 否 | 自定义键盘。 |
### type<sup>11+</sup>
@@ -520,6 +521,14 @@ getCaretOffset(): CaretOffset
| NUMBER | 纯数字输入模式。 |
| PHONE_NUMBER | 电话号码输入模式。<br/>支持输入数字、空格、+ 、-、*、#、(、),长度不限。 |
+## KeyboardOptions<sup>12+</sup>
+
+设置自定义键盘是否支持避让属性。
+
+| 名称 | 类型定义 | 描述 |
+| --------------- | ---------------------------- | ------------------------------------ |
+| KeyboardOptions | {supportAvoidance?: boolean} | 设置是否可以支持自定义键盘触发避让。 |
+
## 示例
### 示例1
@@ -714,4 +723,68 @@ struct TextInputExample {
}
```
-![TextAreaEnterKeyType](figures/area_enterkeytype.gif)
\ No newline at end of file
+![TextAreaEnterKeyType](figures/area_enterkeytype.gif)
+
+### 示例6
+
+supportAvoidance使用示例。
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct TextAreaExample {
+ controller: TextAreaController = new TextAreaController()
+ @State inputValue: string = ""
+ @State height1:string|number = '20%'
+ @State height2:number = 100
+ @State supportAvoidance:boolean = true;
+
+ // 自定义键盘组件
+ @Builder CustomKeyboardBuilder() {
+ Column() {
+ Row(){
+ Button('x').onClick(() => {
+ // 关闭自定义键盘
+ this.controller.stopEditing()
+ }).margin(10)
+ }
+ Grid() {
+ ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
+ GridItem() {
+ Button(item + "")
+ .width(110).onClick(() => {
+ this.inputValue += item
+ })
+ }
+ })
+ }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
+ }.backgroundColor(Color.Gray)
+ }
+
+ build() {
+ Column() {
+ Row(){
+ Button("20%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "20%"
+ })
+ Button("80%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "80%"
+ })
+ }
+ .height(this.height1)
+ .width("100%")
+ TextArea({ controller: this.controller, text: this.inputValue})
+ // 绑定自定义键盘
+ .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })
+ // .height(200)
+ }
+ }
+}
+```
+
+![CustomTextAreaType](figures/Custom_Text_Area.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md
index 5bcc78a1c26aecf554d55975bdc1401cf2bfbb7e..e01722f09e76d8e52ea71b1110d8b6af3b4f8ba2 100644
--- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md
+++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md
@@ -368,7 +368,7 @@ maxLines(value: number)
### customKeyboard<sup>10+</sup>
-customKeyboard(value: CustomBuilder)
+customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
设置自定义键盘。
@@ -388,9 +388,10 @@ customKeyboard(value: CustomBuilder)
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| ------ | ------------------------------------------- | ---- | ------------ |
-| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| ------- | ------------------------------------------- | ---- | ------------ |
+| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 |
+| options | [KeyboardOptions](#keyboardoptions12) | 否 | 自定义键盘。 |
### enableAutoFill<sup>11+</sup>
@@ -791,6 +792,14 @@ getCaretOffset(): CaretOffset
| error | &nbsp;[ResourceColor](ts-types.md#resourcecolor)\|undefined | 否 | 错误时下划线颜色。不填写、undefined、null、无效值时恢复默认。此选项会修改showCounter属性中达到最大字符数时的颜色。 |
| disable | &nbsp;[ResourceColor](ts-types.md#resourcecolor)\|undefined | 否 | 禁用时下划线颜色。不填写、undefined、null、无效值时恢复默认。 |
+## KeyboardOptions<sup>12+</sup>
+
+设置自定义键盘是否支持避让属性。
+
+| 名称 | 类型定义 | 描述 |
+| --------------- | ---------------------------- | ------------------------------------ |
+| KeyboardOptions | {supportAvoidance?: boolean} | 设置是否可以支持自定义键盘触发避让。 |
+
## 示例
### 示例1
@@ -1142,3 +1151,64 @@ struct Index {
![UnderlineColor](figures/UnderlineColor.png)
+### 示例8
+
+supportAvoidance使用示例。
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Input {
+ controller: TextInputController = new TextInputController()
+ @State inputValue: string = ""
+ @State height1:string|number = '20%'
+ @State supportAvoidance:boolean = true;
+ // 自定义键盘组件
+ @Builder CustomKeyboardBuilder() {
+ Column() {
+ Row(){
+ Button('x').onClick(() => {
+ // 关闭自定义键盘
+ this.controller.stopEditing()
+ }).margin(10)
+ }
+ Grid() {
+ ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item:number|string) => {
+ GridItem() {
+ Button(item + "")
+ .width(110).onClick(() => {
+ this.inputValue += item
+ })
+ }
+ })
+ }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
+ }.backgroundColor(Color.Gray)
+ }
+
+ build() {
+ Column() {
+ Row(){
+ Button("20%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "20%"
+ })
+ Button("80%")
+ .fontSize(12)
+ .onClick(()=>{
+ this.height1 = "80%"
+ })
+ }
+ .height(this.height1)
+ .width("100%")
+ TextInput({ controller: this.controller, text: this.inputValue })
+ // 绑定自定义键盘
+ .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })
+
+ }
+ }
+}
+```
+
+![CustomTextInputType](figures/Custom_Text_Input.gif)
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
其他
1
https://gitee.com/AnBetter/docs_custom.git
git@gitee.com:AnBetter/docs_custom.git
AnBetter
docs_custom
docs_custom
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891