学鸿蒙踩过的几个坑：ArkUI页面布局真没我想的那么简单！

刚开始学习HarmonyOS开发的时候，我觉得做页面应该不算太难。毕竟以前学过一点HTML和CSS，想着ArkUI应该也是差不多的思路：把组件放到页面上，再调整一下样式就好了。

但真正动手之后才发现，事情没有那么简单。特别是在做一个简单的课程表页面时，我遇到了不少问题，也慢慢总结出一些经验。

一、Column和Row，看着简单却容易用错

ArkUI中经常用到Column和Row。简单理解，Column负责纵向排列，Row负责横向排列。一开始，我经常遇到组件位置不符合预期的问题。

比如，明明想让两个按钮横向排列，结果它们上下分布；或者一个组件设置了宽度之后，把其他内容挤出了屏幕。

后来我发现，写布局之前最好先画一个简单的结构图，确定哪些内容应该横向排列，哪些需要纵向排列。例如，一个课程信息卡片可以这样写：

@Entry
@Component
struct CoursePage {
  build() {
    Column({ space: 16 }) {
      Row() {
        Text('高等数学')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)

        Blank()

        Text('周一 08:00')
          .fontSize(14)
      }
      .width('100%')

      Text('教学楼A101')
        .fontSize(16)
    }
    .padding(20)
    .width('100%')
  }
}

这里的Blank()可以帮助左右两边的内容分开，让时间显示在右侧。

二、页面为什么突然显示不全？

另一个让我印象深刻的问题是，课程列表内容越来越多之后，下面几条课程直接看不到了。刚开始我以为是数据出了问题，后来才发现，是页面没有设置合适的滚动结构。对于较长的内容列表，可以考虑使用List或Scroll等组件。如果每一条数据结构相同，使用List配合ForEach通常更适合。而且，实际开发时还要注意组件高度、父容器约束等问题。

我后来也发现，不少布局问题其实并不需要写很复杂的代码，只要把组件之间的层级关系理清楚就能解决。

三、修改数据后页面没变化？

除了布局，我还遇到过一个挺让人头疼的问题：代码里明明修改了数据，但界面却没有变化。比如在课程表中添加一个“已完成”标记，希望点击之后改变文字颜色。

一开始我直接修改数组中的对象属性，但页面更新并不符合预期。后来了解了@State等状态管理机制，才知道ArkUI的界面刷新与数据状态变化密切相关。对于传统@State管理的对象数组，可以通过创建新数组的方式，让数据更新更明确。

this.courses = this.courses.map((item: CourseItem) =>
  item.id === targetId
    ? { ...item, completed: true }
    : item
);

这里的CourseItem是提前定义的课程数据类型。

通过重新生成数组，再赋值给状态变量，可以减少某些嵌套对象更新不被观察到的问题。

四、遇到报错，我现在会先看哪里？

刚开始看到DevEco Studio出现红色报错，我的第一反应就是复制给AI，让它帮忙改。但后来发现，AI有时会把原来正确的代码也一起修改。所以我现在更愿意先看报错位置，再检查变量类型、组件属性和括号结构。

如果还是解决不了，再把具体问题交给AI分析。相比直接让AI重写整个页面，这种方式更容易找到真正的错误。

这次课程表开发让我明白，页面开发并不只是让界面看起来好看。布局结构是否合理、数据能否正确更新、不同屏幕上是否正常显示，这些都会影响最终体验。

对于刚开始学HarmonyOS的同学，我觉得不用着急追求特别复杂的界面。先把Column、Row、List和基础状态管理学扎实，再慢慢尝试更多组件，进步反而更快。

踩坑其实不可怕，关键是每解决一个问题，都真正弄明白它为什么会发生。这就是我这次想分享的学习经历。