HarmonyOS鸿蒙Next中UI布局子控件超出父控件宽度

想要控制子组件不超过父组件宽度，可以给父组件设置 clip(true) 属性

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-kit-V5#section1096512221245

想要文本到达右侧宽度后自动换行可以使用 layoutWeight，仅在 Row/Column/Flex 布局中生效。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-size-V5#layoutweight

demo：

Text('我的宽度超出了父容器宽度，父容器是红色背景我的宽度超出了父容器宽度，父容器是红色背景我的宽度超出了父容器宽度，父容器是红色背景我的宽度超出了父容器宽度，父容器是红色背景')
.fontSize(14)
.fontColor(Color.Black)
.margin({ left: 5 })
.width('100%')
.layoutWeight(1)

@Builder
createItemView(title: string, content: string) {
  Row() {
    Text(title).fontSize(14).fontColor($r('app.color.start_window_background'))
    Text(content).fontSize(14).fontColor(Color.Black).margin({ left: 5 }).layoutWeight(1)
  }.width('100%').padding({ top: 10, bottom: 10 }).backgroundColor(Color.Red)
}

在HarmonyOS鸿蒙Next中，UI布局子控件超出父控件宽度的问题通常与布局容器的约束机制有关。鸿蒙提供了多种布局容器，如DirectionalLayout、DependentLayout、StackLayout等，每种布局容器对子控件的尺寸和位置处理方式不同。

1. DirectionalLayout：子控件按照水平或垂直方向排列。如果子控件的宽度总和超过父控件宽度，默认情况下子控件会被压缩或超出父控件边界。可以通过设置weight属性来分配剩余空间，避免子控件超出父控件。

2. DependentLayout：子控件通过相对位置约束进行布局。如果子控件的宽度设置过大，可能超出父控件边界。需要检查子控件的约束条件，确保其宽度不超过父控件。

3. StackLayout：子控件按照堆叠方式布局，后添加的控件会覆盖之前的控件。如果子控件的宽度超出父控件，默认情况下会显示在父控件外。可以通过设置clip属性为true来裁剪超出部分。

4. 自适应布局：使用match_parent或wrap_content来控制子控件尺寸。如果子控件宽度设置为match_parent，其宽度会与父控件一致；如果设置为wrap_content，子控件会根据内容自适应宽度，但仍可能超出父控件。

5. 测量与布局：鸿蒙的UI框架会通过测量（Measure）和布局（Layout）两个阶段来确定控件的大小和位置。如果子控件在测量阶段返回的宽度超过父控件，布局阶段会将其放置在父控件外。

总结：子控件超出父控件宽度的问题主要与布局容器的约束机制和子控件的尺寸设置有关。通过合理设置布局参数和约束条件，可以避免子控件超出父控件边界。