如何优化布局避免深度嵌套？

【深度嵌套的布局会导致测量和布局耗时增加，应扁平化布局结构。

// ❌ 错误示例：深度嵌套

@Entry
@Component
struct BadNestedLayout {
  build() {
    Column() { // 第1层
      Row() { // 第2层
        Column() { // 第3层
          Row() { // 第4层
            Column() { // 第5层
              Text('Deeply nested')
                .fontSize(16)
            }
            .padding(10)
          }
          .padding(10)
        }
        .padding(10)
      }
      .padding(10)
    }
    .padding(10)
  }
}

// ✅ 正确示例：扁平化布局

@Entry
@Component
struct OptimizedLayout {
  build() {
    // 使用单个容器 + 相对定位
    Stack() {
      // 背景
      Rect()
        .width('100%')
        .height('100%')
        .fill(Color.White)

      // 内容（扁平结构）
      Text('Flat layout')
        .fontSize(16)
        .alignSelf(ItemAlign.Center)
    }
    .width('100%')
    .padding(40) // 直接在内边距实现嵌套效果
  }
}

// ✅ 使用自定义布局（更灵活）

@Component
struct CustomRowLayout {
  @BuilderParam content: () => void;

  build() {
    // 使用Flex替代多层嵌套
    Flex({
      direction: FlexDirection.Row,
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.SpaceBetween
    }) {
      this.content()
    }
    .width('100%')
  }
}

// 布局优化对比示例

@Entry
@Component
struct LayoutOptimizationDemo {
  @State items: string[] = ['Item 1', 'Item 2', 'Item 3'];

  build() {
    Column() {
      Text('优化后的列表项')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })

      // 使用扁平结构
      ForEach(this.items, (item: string, index: number) => {
        this.OptimizedListItem(item, index)
      })
    }
    .width('100%')
    .padding(20)
  }

  // 优化的列表项（扁平结构）
  @Builder
  OptimizedListItem(text: string, index: number) {
    // 单层容器 + 内边距和对齐
    Row() {
      Text(`${index + 1}.`)
        .width(40)

      Text(text)
        .layoutWeight(1)

      Image($r('app.media.icon'))
        .width(32)
        .height(32)
        .margin({ left: 10 })
    }
    .width('100%')
    .padding(12)
    .backgroundColor(Color.White)
    .borderRadius(8)
    .margin({ bottom: 8 })
  }
}

布局优化技巧：