HarmonyOS 鸿蒙Next RelativeContainer的链无法达到预期

发布于 1周前 作者 songsunli 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next RelativeContainer的链无法达到预期

问题代码如下,RelativeContainer里面放了两个Text,他们形成一条链

我需要的效果是:

当tt_title文字很短的时候效果如下

cke_17054.png

当tt_title文字很长的时候效果如下

cke_58111.png

可是现在的效果如下,请问下大佬们该如何写呢?

cke_9679.png

@Entry
@Component
struct Test {
  build() {
    RelativeContainer() {
      Text('爱的天平如此的倾斜,怎能消除你我之间界限,我无法走进你的世界,两颗心的距离太遥远')
        .id('tt_title')
        .fontColor('#666666')
        .fontSize(10)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.END)
        .margin({ left: 1 })
        .backgroundColor('#55ff0000')
        .alignRules({
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: 'tt_time', align: HorizontalAlign.Start },
          bias: { horizontal: 0 }
        })
        .chainMode(Axis.Horizontal, ChainStyle.PACKED)

      Text('2024年12月4日16:45:03')
        .id('tt_time')
        .fontColor('#999999')
        .fontSize(10)
        .maxLines(1)
        .margin({ left: 2 })
        .alignRules({
          left: { anchor: 'tt_title', align: HorizontalAlign.End },
          right: { anchor: '__container__', align: HorizontalAlign.End }
        })

    }
    .width(200)
    .height('auto')
    .margin({ left: 20 })
    .padding({ top: 5, bottom: 5 })
    .backgroundColor('#5555fff0')

  }
}

更多关于HarmonyOS 鸿蒙Next RelativeContainer的链无法达到预期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

想设置最大宽度多宽你自己定

cke_2619.png

更多关于HarmonyOS 鸿蒙Next RelativeContainer的链无法达到预期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在第一个TEXT里限制组件最大宽度就行,
.constraintSize({minWidth: 0, maxWidth: 100})

参考官方文档尺寸设置

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-size-V5

不要用 RelativeContainer 你这场景 Row 或者 Stack 都可以实现

针对HarmonyOS 鸿蒙Next中RelativeContainer的链无法达到预期的问题,以下是一些可能的解决方案:

  1. 检查布局参数

    • 确保RelativeContainer及其子组件的布局参数(如leftMargin、topMargin等)设置正确,与期望的布局效果一致。
  2. 理解锚点与偏移

    • RelativeContainer设置锚点时,是以组件占据的所有空间计算的,包括margin和padding。
    • 如果设置了offset或bias,请注意它们可能影响组件的最终位置。
  3. 组件树渲染

    • 有时组件的最终位置可能在布局渲染完成后才会确定,确保在组件完全渲染后再进行布局调整或位置获取。
  4. 嵌套容器

    • 如果RelativeContainer嵌套在其他容器中,请检查父容器的布局和位置信息是否正确。
  5. API版本与文档

    • 检查HarmonyOS的版本,确保使用的API和属性在当前版本中受支持。
    • 查阅官方文档,了解RelativeContainer的详细用法和限制。

如果以上步骤都无法解决问题,建议联系官网客服。官网地址是:https://www.itying.com/category-93-b0.html

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!