HarmonyOS 鸿蒙Next中ArcList和ArcListItem使用时报错, 请问这个是什么原因呀?

HarmonyOS 鸿蒙Next中ArcList和ArcListItem使用时报错, 请问这个是什么原因呀?

报错信息: Only UI component syntax can be written here
DevEco Studio 版本:
DevEco Studio 5.1 Release
构建版本：5.1.0.840
Api 版本: 5.1.0(18)
“deviceTypes”: [“wearable”]

相关的文件 api 配置正常, 可以实现表盘的弧形滚动条, 但是列表组件使用过程中会报错, 期望大佬解惑, 谢谢

// 报错代码案例, 感觉没哪里有问题, 希望大佬指点迷津
import { ArcList, ArcListItem } from '@kit.ArkUI'

@Component
struct WatchesComp {
  orderList: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Stack() {
      ArcList() {
        ForEach(this.orderList, (item: number) => {
          ArcListItem() {
            Text(`${item}`)
          }
        })
      }
    }.width("100%").height("100%").borderRadius('50%')
  }
}

更多关于HarmonyOS 鸿蒙Next中ArcList和ArcListItem使用时报错, 请问这个是什么原因呀?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

这个错误表示在ArkTS中使用ArcList和ArcListItem时，语法不正确。可以检查一下如下问题

ArcList和ArcListItem的语法使用错误

组件结构不正确

缺少必要的属性或方法

ArkTS版本兼容性问题

更多关于HarmonyOS 鸿蒙Next中ArcList和ArcListItem使用时报错, 请问这个是什么原因呀?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


ArcList组件必须直接包含ArcListItem子组件，且父容器需符合特定规范；列表数据未使用@State装饰器进行响应式绑定。修改后的代码楼主试一下

import { ArcList, ArcListItem } from '@kit.ArkUI';

@Entry
@Component
struct WatchesComp {
  [@State](/user/State) orderList: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    // ArcList必须作为直接父容器，不能嵌套在Stack中
    ArcList() {
      ForEach(this.orderList, (item: number) => {
        ArcListItem() {
          Text(`${item}`)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .autoScale(true) // 必须设置自动缩放属性
      })
    }
    .width('100%')
    .height('100%')
    .borderRadius('50%')
  }
}
  • 并不是数据和装饰器的问题，改成list系列是没有问题的
  • 配置我都弄好了的

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

楼主也要检查一下是不是编译器版本的问题，这是我的编译器版本信息

cke_15494.png

5.1到最新版都试过了，

找HarmonyOS工作还需要会Flutter技术的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

  1. 我看这个组件是只支持穿戴设备的开发，在entry/src/main/module.json5机型列表里面添加手表的类型就能正常使用，且真机或者模拟器的API为18及以上

cke_3440.png

cke_759.png

  1. 模拟器和真机API18及以上的版本都能跑 也不会包报错

cke_13187.png

这个我都设置过了， api 没有问题， 能支持穿戴的 ide 版本我都尝试了一遍， 不行喽，

尝试用同事的编译器试试，

我这边测了，虽然有报错，但是真机可以正常显示，你只管写就行。

需 import ArcListItemAttribute

import { ArcList, ArcListItem, ArcListItemAttribute } from '@kit.ArkUI'

完整代码如下

import { ArcList, ArcListItem, ArcListItemAttribute } from '@kit.ArkUI'

@Component
struct Index {
  orderList: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Stack() {
      ArcList() {
        ForEach(this.orderList, (item: number) => {
          ArcListItem() {
            Text(`${item}`)
          }
          .backgroundColor(Color.Pink)
        })
      }
    }.width("100%").height("100%").borderRadius('50%')
  }
}

经过尝试后还是会报错, ArcList 和 ArcListItem 部分会报红, Only UI component syntax can be written here，

有报错，不要管他，能正常运营就行了。

标题

这是段落一。

这是段落二。

可以先看一下这里，是我自己封装的手表智能穿戴设备圆形屏幕圆形列表适配，圆形列表两端逐渐缩小、渐隐效果-华为开发者问答 | 华为开发者联盟

鸿蒙Next中ArcList和ArcListItem报错可能原因：

  1. API版本不匹配，需确认使用的SDK版本支持这些组件；
  2. 组件未正确导入或声明，检查import语句是否完整；
  3. 参数传递错误，如required属性缺失或类型不符；
  4. 父容器不兼容，ArcList需要在特定布局组件中使用。

建议检查开发文档确认组件用法规范。

这个报错是因为在HarmonyOS Next中，ArcList和ArcListItem的使用方式有特定要求。主要问题出在ForEach的使用方式上。

在ArkUI中，ForEach应该直接作为ArcList的子组件，而不是放在ArcList的构建函数内。正确的写法应该是：

@Component
struct WatchesComp {
  orderList: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Stack() {
      ArcList() {
        ForEach(this.orderList, (item: number) => {
          ArcListItem() {
            Text(`${item}`)
          }
        })
      }
    }.width("100%").height("100%").borderRadius('50%')
  }
}

另外需要注意：

  1. 确保你的项目配置中正确引入了@kit.ArkUI模块
  2. 检查API版本是否确实支持ArcList组件
  3. 确认设备类型配置为wearable

如果仍然报错，可以检查ArcList是否需要在特定容器中使用，或者是否有其他必要的属性需要设置。

回到顶部