实验目标

HCCDA鸿蒙应用实验中的基础布局与组件嵌套实操旨在帮助开发者掌握HarmonyOS的UI布局方式，理解组件嵌套逻辑，实现灵活界面设计。

基础布局类型

线性布局（DirectionalLayout）

• 通过orientation属性设置排列方向（垂直VERTICAL或水平HORIZONTAL）。
• 权重（weight）属性控制子组件占比。

相对布局（DependentLayout）

• 通过alignment或anchor属性定义组件间相对位置关系。
• 示例：按钮相对于文本框底部对齐。

弹性布局（FlexLayout）

• 支持flexDirection、justifyContent等属性，适用于复杂自适应场景。

组件嵌套核心要点

父子组件通信

• 父组件通过@State装饰器管理子组件状态。
• 子组件通过@Link或@Prop接收父组件数据。

代码片段示例

// 父组件传递数据
@State message: string = "Hello HarmonyOS";

build() {
  Column() {
    ChildComponent({ message: this.message }) // 嵌套子组件
  }
}

// 子组件接收数据
@Component
struct ChildComponent {
  @Prop message: string; // 单向同步

  build() {
    Text(this.message)
  }
}

常见问题与解决

布局错乱

• 检查父容器尺寸是否明确（如width("100%")）。
• 避免嵌套过深，建议使用FlexLayout替代多层Column/Row。

性能优化

• 使用@Reusable装饰器复用组件实例。
• 复杂列表优先采用LazyForEach懒加载。

调试技巧

• 开发者工具的布局边界检查功能可高亮显示组件边界。
• 使用border属性临时添加边框辅助定位。

通过以上方法，可系统化掌握鸿蒙应用的基础布局与组件嵌套技术。