# 输入框光标闪烁效果

#### 问题现象

如何实现输入框在未输入时光标闪烁的效果？

#### 效果预览

#### 背景知识

visibility：控制组件的显示或隐藏。当未设置visibility时，组件默认为显示。通过设置属性值Hidden（隐藏，但参与布局进行占位）、Visible（显示）与None（隐藏，但不参与布局，不进行占位）控制组件是否可见。

#### 解决方案

实现输入框在未输入时光标闪烁的效果可通过使用setInterval定时器切换元素的visibility属性来控制组件的显隐，模拟出光标闪烁的效果。

```
@Entry
@Component
struct TextInputPage {
  @State isShowPoint: boolean = true;
  private setIntervalB: number = -1;
  @State isFirstCLick: boolean = true;

  aboutToDisappear(): void {
    // 页面销毁，关闭定时器
    clearInterval(this.setIntervalB);
  }

  aboutToAppear(): void {
    this.carbetFire();
  }

  carbetFire() {
    if (this.isFirstCLick) {
      this.isFirstCLick = false;
      this.setIntervalB = setInterval(() => {
        this.isShowPoint = !this.isShowPoint;
      }, 800);
    }
  }

  build() {
    RelativeContainer() {
      Stack() {
        Row() {
          Row()
            .width(2)
            .height(18)
            .backgroundColor('#0A59F7')
            .margin({ left: 16 });
          Blank()
            .height('100%');
        }
        .width('100%')
        .height('100%')
        // 控制组件的显示隐藏
        .visibility(this.isShowPoint ? Visibility.Visible : Visibility.None);

        TextInput()
          .margin({left:16,right:16})
          .width('100%')
          .onEditChange((status: boolean) => {
            if (status) {
              clearInterval(this.setIntervalB);
              this.isShowPoint = false;
              this.isFirstCLick = true;
            } else {
              this.isShowPoint = true;
              this.carbetFire();
            }
          });
      }
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
      .width('95%')
      .height(40)
      .margin({ left: 16, right: 16 });
    }
    .height('100%')
    .width('100%');
  }
}
```