HarmonyOS 鸿蒙Next ArkUI（ets）如何将传感器的数据实时显示在UI的Text中？

HarmonyOS 鸿蒙Next ArkUI（ets）如何将传感器的数据实时显示在UI的Text中？

代码如下，运行后控制台的确能够输出传感器采集的数据，但是文本框并不能实时显示，而且`Ac_x`，`Ac_y`等定义的变量的值也并没有改变

```typescript
struct Index {
  [@State](/user/State) Ac_x: string = 'xxxxx'
  [@State](/user/State) Ac_y: string = 'xxxx'
  [@State](/user/State) Ac_z: string = 'xxxx'
  [@State](/user/State) Ang_x: string = 'xxxx'
  [@State](/user/State) Ang_y: string = 'xxxx'
  [@State](/user/State) Ang_z: string = 'xxxx'
  
  build() {
    Flex({
      direction:FlexDirection.Column,
      justifyContent:FlexAlign.Center,
      alignItems:ItemAlign.Center
    }){
      Text(this.Ac_x+this.Ac_y+this.Ac_z)
        .width("100%")
        .fontSize(35)
        .fontWeight(400)
      Text_and_Select()//运动状态
      Text_and_Input()//采样频率
      Button(
        "开始",
        {type:ButtonType.Circle}
      )
      .width(55)
      .height(55)
      .margin({top:20})
      .backgroundColor(0xF55A42)
      .onClick(()=>{
        console.info('Button onClick')
        //加速度传感器
        sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ACCELEROMETER,function(data){
          var that = this;
          var currentDate= new Date();
          console.info(currentDate.toLocaleString()+" "+"加速度-X: " + data.x);
          console.info(currentDate.toLocaleString()+" "+"加速度-Y: " + data.y);
          console.info(currentDate.toLocaleString()+" "+"加速度-Z: " + data.z);
          that.Ac_x =data.x;
          that.Ac_y =data.y;
          that.Ac_z =data.z;
        },
          {interval: 10000000}
        );
        //陀螺仪
        sensor.on(sensor.SensorType.SENSOR_TYPE_ID_GYROSCOPE,function(data){
          var currentDate= new Date();
          var that = this;
          console.info(currentDate.toLocaleString()+" "+"角速度-X: " + data.x);
          console.info(currentDate.toLocaleString()+" "+"角速度-Y: " + data.y);
          console.info(currentDate.toLocaleString()+" "+"角速度-Z: " + data.z);
          that.An_x =data.x;
          that.An_y =data.y;
          that.An_z =data.z;
        },
          {interval: 10000000}
        );
//        sensor.on(sensor.SensorType.SENSOR_TYPE_ID_ORIENTATION,function(data){
//          var currentDate= new Date();
//          console.info(currentDate.toLocaleString()+" "+"方向X: " + data.beta);
//          console.info(currentDate.toLocaleString()+" "+"方向Y: " + data.gamma);
//          console.info(currentDate.toLocaleString()+" "+"方向Z: " + data.alpha);
//        },
//          {interval: 10000000}
//        );
      })
    }
    .width("100%")
    .height("50%")
    .border({width:"10",color:"#000" })
    .backgroundColor("#ee1cca84")
  }

更多关于HarmonyOS 鸿蒙Next ArkUI（ets）如何将传感器的数据实时显示在UI的Text中？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

开发者您好，请将data.x, data.y, data.z转为string，再赋值。可参考以下代码：

that.An_x = data.x + '';
that.An_y = data.y + '';
that.An_z = data.z + '';

更多关于HarmonyOS 鸿蒙Next ArkUI（ets）如何将传感器的数据实时显示在UI的Text中？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，使用ArkUI（ets）框架可以通过订阅传感器数据，并将其实时显示在UI的Text组件中。具体实现步骤如下：

  1. 引入传感器模块： 在ets文件中，首先需要引入传感器相关的模块，例如加速度传感器模块。

  2. 创建传感器监听器： 使用sensor.on('accelerometer', callback)方法订阅加速度传感器数据，callback函数会接收传感器数据作为参数。

  3. 更新UI： 在callback函数中，使用this.$set方法或直接修改状态变量，将传感器数据绑定到Text组件的文本属性上。

  4. 页面布局： 在ets文件中定义页面布局，包含一个Text组件用于显示传感器数据。

  5. 生命周期管理： 确保在页面销毁时取消传感器订阅，避免内存泄漏。

示例代码片段（伪代码）：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct SensorDisplay {
  [@State](/user/State) data: string = '';

  onMounted() {
    sensor.on('accelerometer', (data) => {
      this.data = `X: ${data.x}, Y: ${data.y}, Z: ${data.z}`;
    });
  }

  onUnmounted() {
    sensor.off('accelerometer');
  }

  build() {
    Row() {
      Text(this.data)
        .fontSize(24)
    }.padding(16)
  }
}
``

如果问题依旧没法解决请联系官网客服,官网地址是 [https://www.itying.com/category-93-b0.html](https://www.itying.com/category-93-b0.html)
回到顶部