在HarmonyOS NEXT开发中2个TextInput控件，当TextInput输入都有值时，改变Text的背景色？

Question

在HarmonyOS NEXT开发中2个TextInput控件，当TextInput输入都有值时，改变Text的背景色？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以参考如下代码：

@Entry 
@Component 
struct TextInputDemo { 
  @State message: string = 'Hello World'; 
  @State text1: string = '' 
  @State text2: string = '' 
  @State changeColoor : boolean=false 
  controller: TextInputController = new TextInputController() 
 
  build() { 
    Column(){ 
      Text(this.message) 
        .id('HelloWorld') 
        .fontSize(50) 
        .fontWeight(FontWeight.Bold) 
        .alignRules({ 
          center: { anchor: '__container__', align: VerticalAlign.Center }, 
          middle: { anchor: '__container__', align: HorizontalAlign.Center } 
        }) 
        .backgroundColor(this.changeColoor ? Color.Red: '') 
      TextInput({ text: this.text1, placeholder: 'input your word1...', controller: this.controller }) 
        .width('95%') 
        .height(40) 
        .margin(20) 
        .onChange((value: string)=>{ 
          this.text1 = value 
          if(this.text2 && this.text1){ 
            this.changeColoor = true 
          }else{ 
            this.changeColoor = false 
          } 
 
        }) 
      TextInput({ text: this.text2, placeholder: 'input your word2...', controller: this.controller }) 
        .width('95%') 
        .height(40) 
        .margin(20) 
        .onChange((value: string)=>{ 
          this.text2 = value 
          if(this.text1 && this.text2){ 
            this.changeColoor = true 
          }else { 
            this.changeColoor = false 
          } 
        }) 
    } 
    .height('100%') 
    .width('100%') 
  } 
}