鸿蒙os响应式数据使用不了

Question

鸿蒙开发里面的响应式数据已经定义好了，但是界面上一直是未定义

@Entry
@Component
struct Login{


  @State private text:String = "hello";

  build(){
      Column(){
        Text("顶部")
          .backgroundColor("blue")
          .width("100%")
          .height("100lpx")
          .fontSize("36lpx")
          .textAlign(TextAlign.Center)
        Column(){
          Row(){
            TextInput({placeholder:'用户名/手机号/邮箱'})
              .backgroundColor(Color.Transparent)
          }
            .border({width:{bottom:'3lpx'},color:'grey'})
            .width("500lpx")
          TextInput({placeholder:"密码"})
            .type(InputType.Password)
            .showPasswordIcon(false)
          Text("text"+this.text)
          Button("登录按钮").onClick(() =>{

          })
          Stack(){
            Divider()
            Text("其他登录方式")
              .backgroundColor("#fafaf9")
              .padding({left:'20lpx', right:'20lpx'})
          }
        }
          .flexGrow(1)
          .justifyContent(FlexAlign.SpaceEvenly)
        Row(){
          Column() {
            Text("首页")
          }
          Text("品牌馆")
          Text("分类")
          Text("用户中心")
        }
          .backgroundColor("#Faa")
          .width("100%")
          .height("110lpx")
          .justifyContent(FlexAlign.SpaceAround)
          .border({width:{top:"3lpx"},color:{top:"blue"}})
      }
      .backgroundColor("#FAFAF9")
      .width('720lpx')
      .height('100%')
    }
}

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在鸿蒙（HarmonyOS）开发中遇到了响应式数据绑定的问题。在你的代码片段中，Text("text" + this.text) 应该显示 text 变量的值，但实际显示的是 textundefined。这通常是因为没有正确地将状态变量与视图元素关联起来。

为了解决这个问题，你需要确保你的组件结构正确，并且在适当的位置使用了状态属性。这里有一个修改后的版本，你应该能在预览器中看到文本框中的文字更新：

@Entry
@Component
struct Login {

  @State private var text = "hello"; // 使用var关键字代替String类型

  build() {
    Column(
      spaceBetweenChildren: true, // 添加这个属性以使子元素间有间距
      children: [
        Text("顶部")
          .backgroundColor("blue")
          .width("100%")
          .height("100lpx")
          .fontSize("36lpx")
          .textAlign(TextAlign.Center),

        Column(
          children: [
            Row(
              children: [
                TextInput({
                  placeholder: '用户名/手机号/邮箱',
                  onInput: (value) => text = value, // 当输入框值改变时，更新text状态
                })
                  .backgroundColor(Color.Transparent),
              ],
              border: { width: { bottom: '3lpx' }, color: 'grey' },
              width: "500lpx",
            ),
            TextInput({
              placeholder: "密码",
              type: InputType.Password,
              showPasswordIcon: false,
            }),
            Text("text ${text}") // 使用模板字符串语法
              .onTapGesture { // 增加点击事件，以便看到文本变化
                setState(() {
                  text = "Clicked!";
                });
              },
            Button("登录按钮").onClick(() => {}),
            Stack(children: [
              Divider(),
              Text("其他登录方式")
                .backgroundColor("#fafaf9")
                .padding({ left: '20lpx', right: '20lpx' }),
            ]),
          ],
          flexGrow: 1,
          justifyContent: FlexAlign.SpaceEvenly,
        ),
        Row(
          children: [
            Column() {
              Text("首页")
            },
            Text("品牌馆"),
            Text("分类"),
            Text("用户中心"),
          ],
          backgroundColor: "#Faa",
          width: "100%",
          height: "110lpx",
          justifyContent: FlexAlign.SpaceAround,
          border: { width: { top: "3lpx" }, color: { top: "blue" } },
        ),
      ],
    )
      .backgroundColor("#FAFAF9")
      .width('720lpx')
      .height('100%');
  }
}

注意这里的主要更改是：

1. 将 private text:String = "hello"; 更改为 private var text = "hello";。
2. 在 TextInput 的 onInput 属性上添加了一个回调函数，当输入框的值发生变化时会触发，从而实时更新 text 状态。
3. 使用模板字符串语法 "text ${text}" 来动态展示 text 变量的值。
4. 在 Text("text ${text}") 上添加一个点击手势监听器，以便在点击时能看到 text 的变化。

这样应该就能正常显示并更新 text 变量的值了。如果还有问题，请告诉我，我会继续帮你解决。