#夏日挑战赛# 3.6 TextInput组件和TextArea组件 原创 精华

/**
 * 3.6.1 TextInput组件
 * 单行文本输入组件。
 *
 * 接口:
 *  TextInput(value?: { placeholder?: string })
 *    placeholder: 无输入时的提示文本。
 *
 * 属性:
 *  .type(InputType) 默认值InputType.Normal，设置输入框类型。
 *    InputType.Normal 基本输入模式。
 *    InputType.Password 密码输入模式。
 *    InputType.Email e-mail地址输入模式。
 *    InputType.Number 纯数字输入模式。
 *  .placeholderColor(Color) 设置placeholder颜色。
 *  .placeholderFont({
      size?: number,
      weight?:number | FontWeight,
      family?: string,
      style?: FontStyle
    }) 设置placeholder文本样式。
 *  .enterKeyType(EnterKeyType) 默认值EnterKeyType.Done，设置输入法回车键类型。
 *    EnterKeyType.Go 显示Go文本。
 *    EnterKeyType.Search 显示为搜索样式。
 *    EnterKeyType.Send 显示为发送样式。
 *    EnterKeyType.Next 显示为下一个样式。
 *    EnterKeyType.Done 标准样式。
 *  .caretColor(Color) 设置输入框光标颜色。
 *  .maxLength(number) 设置文本的最大输入字符数。
 *
 * 事件：
 *  .onChange(value: string) => void 输入发生变化时，触发回调。
 *  .onSubmit(callback: (enterKey: EnterKeyType) => void) 回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。
 *  .onEditChanged(callback: (isEditing: boolean) => void) 输入状态变化时，触发回调。
 */
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

      TextInput({ placeholder: $r("app.string.hint") })  // 无输入时的提示文本(可选)。
        .type(InputType.Normal)  // 输入框类型
        .placeholderColor($r("app.color.fgLevel1")) // 设置placeholder颜色
        .placeholderFont({ size: 20, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal }) // 设置placeholder文本样式
        .enterKeyType(EnterKeyType.Next) // 设置输入法回车键类型
        .caretColor($r("app.color.info"))  // 设置输入框光标颜色
        .maxLength(20)  // 设置文本的最大输入字符数
        .onChange((value: string) => {
          console.log(value) // 输入发生变化时，触发回调
        })
        .onSubmit((enterKey) => {
          // 回车键或者软键盘回车键触发该回调
        })
        .onEditChanged((isEditing) => {
          // 输入状态变化时，触发回调
        })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

/**
 * 3.6.2 TextArea组件
 * 多行文本输入组件。
 *
 * 接口:
 *  TextArea(value?: { placeholder?: string })
 *    placeholder: string 无输入时的提示文本。
 *
 * 属性:
 *  .placeholderColor(Color) 设置placeholder文本颜色。
 *  .placeholderFont({
      size?: number,
      weight?:number | FontWeight,
      family?: string,
      style?: FontStyle
    }) 设置placeholder文本样式。
    .caretColor(Color) 设置输入框光标颜色。
 *  .textAlign(TextAlign) 默认值TextAlign.Start，设置文本水平对齐方式。
 *    TextAlign.Center 水平居中对齐。
 *    TextAlign.Start 水平对齐首部。
 *    TextAlign.End 水平对齐尾部。
 *
 * 事件：
 *  .onChange(callback: (value: string) => void) 输入发生变化时，触发回调。
 */
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

      TextArea({ placeholder: $r("app.string.hint") })  // 无输入时的提示文本(可选)。
        .placeholderColor($r("app.color.fgLevel2"))   // 设置placeholder颜色
        .placeholderFont({ size: 20, weight: FontWeight.Normal, family: "sans-serif", style: FontStyle.Normal }) // 设置placeholder文本样式
        .textAlign(TextAlign.Center)  // 设置文本水平对齐方式
        .caretColor($r("app.color.info"))  // 设置输入框光标颜色
        .height(100) // 多行文本框的高度
        .fontColor($r("app.color.fgLevel1")) // 输入文本颜色适配深色模式和浅色模式
        .onChange((value: string) => { // 输入发生变化时，触发回调
          console.log(value)
        })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.