HarmonyOS鸿蒙Next中上下两个View如何保持宽度一致？

开发者您好，您可以参考：onAreaChange：组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。从而获取组件的宽度，然后对比下两个组件宽度，取最大值即可。

示例代码如下：

@Entry
@ComponentV2
struct Index {
  @Local sizeValue: string = '';
  @Local TextWidth: number = 0;
  @Local TextWidth2: number = 0;

  @Computed
  get w1() {
    let w = 0;
    if (this.TextWidth && this.TextWidth2) {
      w = Math.max(this.TextWidth, this.TextWidth2);
    }
    console.log('w1', w);
    return w;
  }

  build() {
    Column() {
      Row() {
        Text('使 用 该 点 创 建 新 地 址 hello world')
          .fontColor(Color.White)
          .fontSize(14);

        Image($r('app.media.startIcon'))
          .width(12)
          .height(12)
          .margin({ left: 8 });
      }
      .borderRadius({
        topLeft: 6,
        topRight: 6,
        bottomLeft: 0,
        bottomRight: 0
      })
      .padding({
        left: 20,
        right: 20,
        top: 6,
        bottom: 6
      })
      .width(this.w1 || 'auto')
      .backgroundColor(Color.Red)
      .onAreaChange((oldValue: Area, newValue: Area) => {
        this.TextWidth2 = newValue.width as number;
      });

      Text('hello world || hello world')
        .fontColor(Color.Gray)
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .backgroundColor(Color.Orange)
        .height(32)
        .maxLines(1)
        .padding({ left: 20, right: 20 })
        .width(this.w1 || 'auto')
        .onAreaChange((oldValue: Area, newValue: Area) => {
          this.TextWidth = newValue.width as number;
        })
        .borderRadius({
          bottomLeft: 6, bottomRight: 6
        });
    }.width(this.w1 || 'auto');
  }
}

在HarmonyOS Next中，要实现上下两个View（如Row和Text）宽度一致，且随内容自适应（以最宽者为准），同时Column容器也匹配该宽度，可以综合使用布局约束和尺寸设置。以下是几种核心方案：

1. 使用 .width(Length.Auto) 或 .width('auto')
   这是最直接的方法。为Row、Text以及外层的Column都设置宽度为Auto，系统会自动计算内容所需的最大宽度，并保持一致。

   Column() {
     // Row部分
     Row() {
       // ... 内容
     }
     .width('auto') // 关键：宽度自适应内容
     .padding({ left: 20, right: 20 }) // 确保内边距一致，避免宽度计算偏差
   
     // Text部分
     Text(this.model?.building)
       .width('auto') // 关键：宽度自适应文本内容
       .padding({ left: 20, right: 20 }) // 内边距需与Row保持一致
   }
   .width('auto') // Column也设为自适应，宽度将等于子组件最大宽度
   

   注意：确保Row和Text的padding（左右内边距）或margin设置相同，否则即使内容宽度一致，最终渲染宽度也可能因内边距差异而不同。

2. 利用 .constraintSize() 进行约束
   如果希望限制最大宽度（例如不超过屏幕的80%），可以结合constraintSize：

   Column() {
     Row() { ... }
       .constraintSize({ maxWidth: '80%' }) // 约束最大宽度
       .width('auto')
   
     Text(this.model?.building)
       .constraintSize({ maxWidth: '80%' })
       .width('auto')
   }
   .width('auto')
   

   这样既能保持宽度一致，又能避免占满屏幕。

3. 使用通用属性 .align() 实现对齐
   如果子组件宽度不一致，可以通过Column的align属性让子组件在交叉轴上对齐（例如左对齐或居中对齐），但这不会强制子组件宽度相等。若需严格等宽，仍需依赖.width('auto')。

4. 避免固定宽度或百分比宽度

   • 不要为Row、Text或Column设置固定宽度（如.width(200)）或百分比宽度（如.width('100%')），否则会破坏自适应。
   • 如果遇到文本换行影响宽度，可配合.maxLines(1)和.textOverflow({ overflow: TextOverflow.Ellipsis })限制单行显示，确保宽度计算稳定。

代码调整建议：
根据你的代码片段，主要问题是Row和Text的宽度未同步。请为两者添加.width('auto')，并统一padding的左右值（例如均为20）。同时，将Column的宽度也设为'auto'。示例修正如下：

Column() {
  if (this.model?.isCanCreateAddress == true) {
    Row() {
      Text('使用该点创建新地址')
        .fontColor(Color.White)
        .fontSize(14)

      Image($r('app.media.icon_search_address_create_arrow'))
        .width(12)
        .height(12)
        .margin({ left: 8 })
    }
    .width('auto') // 新增：宽度自适应
    .padding({ left: 20, right: 20, top: 6, bottom: 6 }) // 左右内边须与Text一致
    // ... 其他样式
  }

  Text(this.model?.building)
    .width('auto') // 新增：宽度自适应
    .padding({ left: 20, right: 20 }) // 左右内边距与Row保持一致
    // ... 其他样式
}
.width('auto') // 新增：Column宽度自适应子组件最大宽度

这样，Row和Text的宽度将自动取两者内容的最大宽度，Column也会匹配该宽度，且不会占满屏幕。