HarmonyOS 二次封装一个输入框组件实现禁用效果

今天药忘吃喽~ 2024-04-22 07:32 33阅读 0赞

我们创建一个 ets文件  
![在这里插入图片描述][7e05a3937929427db46facf96b2502c1.png]  
然后 编写代码如下

@Component
    export struct Input {
        
    
      @Link value:string;
      @Link placeholder:string;
      @Link disable:boolean;
    
      build() {
        
        Row(){
        
          TextInput({
        
            text: this.value,
            placeholder: this.placeholder?this.placeholder:""
          })
            .width("100%")
            .height("100%")
            .position({
        x: 0,y: 0})
            .focusable(!this.disable)
            .onChange((value)=>{
        
              this.value = value;
            })
          if(this.disable) {
        
            Column()
              .width("100%")
              .height("100%")
              .position({
        x: 0,y: 0})
              .zIndex(1)
          }
        }
        .width("100%")
        .height("100%")
    
      }
    }

这里 我们要了三个属性 分别是  
value 用来控制输入框的 Text属性 接收用户输入的值  
placeholder 提示输入内容  
disable 是否禁用

这里 我们里面的元素 高宽基本都是用的百分之百 宽度那我们组件外的那块元素  
然后 我们 写了一个 TextInput组件 赋值上了 placeholder value  
然后onChange 将用户最新输入的 value 赋值给我们组件绑定的 外面传入的value  
然后 我们判断 disable 如果是禁用 就展示 Column  
因为他们都设置了 position 相当于都是 绝对定位 然后 x y 位置都是0 我们Column的 zindex 高一些会把TextInput 挡住

然后 我们在 index.ets  
中这样写

import {
         Input } from "../components/General"
    
    @Entry
    @Component
    struct Dom {
        
      
      @State value:string = "";
      @State disable:boolean = true;
      @State placeholder:string = "请输入内容";
    
      build() {
        
        Column() {
        
          Row(){
        
            Input({
        
              placeholder: $placeholder,
              value: $value,
              disable: $disable
            })
              .width("100%")
              .height("100%")
          }
          .width(200)
          .height(30)
          Button("打印数据").onClick(()=>{
        
            console.log(this.value);
          })
          Button(this.disable?"启用":"禁用").onClick(()=>{
        
            this.disable = !this.disable
          })
        }
        .height('100%')
      }
    }

我们导入了 Input 组件  
然后 我们定义了这三个属性  
然后 传入了 Input 组件中

运行代码 我们可以看到 我们点击输入框 是输入不了的  
因为它被挡住了  
![在这里插入图片描述][f2080bc8883a484ea7cd894f1bd3ead7.png]  
然后 我们点击 启用 按钮  
然后 我们点击输入框 进行键盘输入 就一切正常  
![在这里插入图片描述][59ddc93180a746a19c077005f3aced50.png]  
然后 我们点击打印数据  
可以看到 我们value 就能非常好的存入了 最新的用户输入的数据  
![在这里插入图片描述][b35daf3b133447bd803f7757da24c89a.png]

[7e05a3937929427db46facf96b2502c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/81a46f370107463aa403d8894f98d5ce.png
[f2080bc8883a484ea7cd894f1bd3ead7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/53e118ba13a04c72a18a14e692b46983.png
[59ddc93180a746a19c077005f3aced50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/596897e892b14f26b17da0dabb128288.png
[b35daf3b133447bd803f7757da24c89a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/910d65193de942c8ae2d58a7f0cc94f7.png