如何自定义输入框样式（TextInput）原创

野生菌君

发布于 2023-12-20 15:50

1.2w浏览

0收藏

场景介绍

输入框是一种常见的场景，开发者为了丰富其多样性，在输入框中的占位符、下划线做了相关处理。本文几位大家介绍如何开发自定义输入框。

效果呈现

效果图如下：

如何自定义输入框样式（TextInput）-鸿蒙开发者社区

运行环境

本例基于以下环境开发，开发者也可以给予其他适配的版本进行开发：

IDE: DevEco Studio 3.2 Release
SDK: Ohos_sdk_public 3.2.12.5 (API Version 9 Release)

实现思路

点击输入框，提示文字向上浮动并同时改变文字颜色，输入框底线进行匀速放缩：通过监听输入框状态(onEditChange)发生变化时，提示文字向上浮动以及底部线进行放缩，同时改变文字和底部线的颜色。
在输入文本时，输入框右侧显示“清除”图标。点击“清空”图标，清空输入文本：通过监听输入框中有文本输入(onChange)时，右侧显示“清除”图标。

开发步骤

封装TextInput组件去监听onEditChange事件（输入状态的变化）和onchange事件（输入内容的变化）。具体代码块如下：

TextInput({text:this.textValue})
  .width('100%')
  .height('100%')
  .borderRadius(0)
  .borderColor('#86C7CC')
  .borderWidth({bottom: 1})
  .backgroundColor(Color.Transparent)
  .type(this.typeInput)
  .showPasswordIcon(false)
  // 输入内容发生变化
  .onEditChange((isEditing)=>{
    this.isEditing = isEditing
    this.isFloatHint = this.isEditing || this.textValue !==''
  })
  // 输入状态变化时
  .onChange((value)=>{
    this.textValue = value
    this.isFloatHint = this.isEditing || this.textValue !== ''
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

输入状态发生变化(onEditChange)时,提示文字向上浮动并同时改变颜色；输入框底线匀速放缩并改变颜色。具体代码如下：

// 提示文本（占位符）
Text(this.placeholder)
  .enabled(false)
  .fontColor(this.isFloatHint ?  '#5D7DB3' : '#E1E4EA')
  .position({x: 0, y: this.isFloatHint ? 0 : '50%'})
  .translate({x: 15, y: '-50%'})
   .animation({duration:100, curve: Curve.Linear})

// 底部线
Line()
  .width('100%')
  .height(1)
  .backgroundColor('#5D7DB3')
  .position({x: 0, y: 44})
  .scale({x: this.isFloatHint ? 1 : 0, centerX: 0})
  .animation({duration: 300, curve: Curve.Linear})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

输入内容发生变化(onChange)时，输入框右侧显示“清除”图标，点击该图标清空输入框内容。具体代码块如下：

if (this.textValue){
  Image($r("app.media.canel"))
    .width(15)
    .height(15)
    .border({width: 1, radius: 15, color: '#fffffff'})
    .position({x: '90%', y: '50%'})
    .translate({y: '-50%'})
    .onClick(()=>{
        this.textValue = ''
    })
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

构建界面UI。具体代码块如下：

@Entry
@Component
struct InputFloatHintPage{
  build(){
    Column(){
      Text('欢迎使用')
        .fontSize(50)
        .fontColor('#91B5A9')
      Column(){
        InputFloatHint({placeholder: '请输入用户名'})
        Blank().height(30)
        InputFloatHint({placeholder: '请输入密码'})
      Column() {
        Row() {
          Checkbox()
            .select(false)
            .selectedColor(0x39a2db)
            .padding({left:1})
          Text('免密登录')
          Blank().width(150)
          Text('忘记密码')
            .fontColor('#5C9DBA')
        }
      }.justifyContent(FlexAlign.SpaceBetween)
        Blank().height(50)
        Button('登录').width(150)
      }
      .width('90%')
      .padding(30)
      .backgroundColor(Color.White)
      .border({radius: 10})
      .shadow({radius: 10, color: '#5C9DBA' })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
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.
36.
37.

完整代码

完整示例代码如下：

@Component
struct InputFloatHint{
  @State isFloatHint: boolean = false
  @State textValue: string = ''
  isEditing = false
  placeholder: string
  typeInput:InputType = InputType.Normal

  build(){
    Stack(){
      TextInput({text:this.textValue})
        .width('100%')
        .height('100%')
        .borderRadius(0)
        .borderColor('#86C7CC')
        .borderWidth({bottom: 1})
        .backgroundColor(Color.Transparent)
        .type(this.typeInput)
        .showPasswordIcon(false)
        .onEditChange((isEditing)=>{
          this.isEditing = isEditing
          this.isFloatHint = this.isEditing || this.textValue !==''
        })
        .onChange((value)=>{
          this.textValue = value
          this.isFloatHint = this.isEditing || this.textValue !== ''
        })
      Text(this.placeholder)
        .enabled(false)
        .fontColor(this.isFloatHint ?  '#5D7DB3' : '#E1E4EA')
        .position({x: 0, y: this.isFloatHint ? 0 : '50%'})
        .translate({x: 15, y: '-50%'})
        .animation({duration:100, curve: Curve.Linear})

      Line()
        .width('100%')
        .height(1)
        .backgroundColor('#5D7DB3')
        .position({x: 0, y: 44})
        .scale({x: this.isFloatHint ? 1 : 0, centerX: 0})
        .animation({duration: 300, curve: Curve.Linear})

      if (this.textValue){
        Image($r("app.media.canel"))
          .width(15)
          .height(15)
          .border({width: 1, radius: 15, color: '#fffffff'})
          .position({x: '90%', y: '50%'})
          .translate({y: '-50%'})
          .onClick(()=>{
            this.textValue = ''
          })
      }
    }.width('100%').height(45)
  }
}

@Entry
@Component
struct InputFloatHintPage{
  build(){
    Column(){
      Text('欢迎使用')
        .fontSize(50)
        .fontColor('#91B5A9')
      Column(){
        InputFloatHint({placeholder: '账号'})
        Blank().height(30)
        InputFloatHint({placeholder: '密码'})
        Blank().height(50)
        Button('登录').width(150)
      }
      .width('90%')
      .padding(30)
      .backgroundColor(Color.White)
      .border({radius: 10})
      .shadow({radius: 10, color: '#5C9DBA' })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.

参考

分类

标签

1条回复

按时间正序

按时间倒序

红叶亦知秋

提示文字和输入框底线细节部分很值得学习

2023-12-21 10:10:01

51CTO

51CTO博客

51CTO学堂

如何自定义输入框样式（TextInput）原创

场景介绍

效果呈现

运行环境

实现思路

开发步骤

完整代码

参考

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

如何自定义输入框样式（TextInput） 原创

场景介绍

效果呈现

运行环境

实现思路

开发步骤

完整代码

参考

目录

订阅鸿蒙技术特刊，精选内容抢先看

如何自定义输入框样式（TextInput）原创