HarmonyOS鸿蒙Next中Flex组件设置不换行怎么能避免被截断

HarmonyOS鸿蒙Next中Flex组件设置不换行怎么能避免被截断 UI中通过Flex展示小标签，产品要求只在一行展示，展示不下就不展示了。目前通过Flex组件实现标签列表的展示，设置成NoWrap属性后，标签会一直平铺下去，且最后展示的标签还会被截断。如果不想被截断设置成Wrap属性后，又无法限制单行显示。请问如何操作？

Flex({
  direction: FlexDirection.Row,
  wrap: FlexWrap.Wrap,
  justifyContent: FlexAlign.Start,
  alignItems: ItemAlign.Center
}) {
  Row() {
    ForEach(this.patientInfo?.patientTagList, (tag: PatientTag) => {
      if (tag) {
        if (tag.imageId) {
          ImageTag({ tag: tag })
        } else {
          TextTag({ tag: tag })
        }
      }
    }, (tag: PatientTag) => Util.generateRandomUUID(false))
  }.width(20)
  .height(20)
  .alignItems(VerticalAlign.Center)
}
.height(20)
.alignRules({
  left: { anchor: 'patient_name_tv', align: HorizontalAlign.Start },
  center: { anchor: '__container__', align: VerticalAlign.Center }
})

更多关于HarmonyOS鸿蒙Next中Flex组件设置不换行怎么能避免被截断的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以给父组件设置高度，加上clip裁剪属性，文档：形状裁剪-通用属性-组件通用信息-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

可参考以下demo：

@Entry @Component struct Test66 { @State arr: string[] = [‘西安市’, ‘成都市22’,‘成都市33’,‘成都市44’,‘成都市55’,‘成都市66’, ‘重庆市’, ‘乌鲁木齐市’, ‘北京市’, ‘呼伦贝尔市’, ‘北京市333’]; build() { Column() { Flex({ wrap: FlexWrap.Wrap }) { ForEach(this.arr, (item: string) => { Text(item) .fontSize(‘16vp’) .borderWidth(‘1vp’) .borderColor(’#666666’) .borderRadius(‘10vp’) .padding(‘3vp’) .height(100) }) } }.width(‘100%’).height(100).backgroundColor(0xDCDCDC).clip(true) } }

更多关于HarmonyOS鸿蒙Next中Flex组件设置不换行怎么能避免被截断的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Flex组件默认情况下会根据容器大小自动换行。如果希望Flex组件不换行并且避免内容被截断，可以通过以下方式实现：

  1. 设置flexWrap属性：将flexWrap属性设置为FlexWrap.NoWrap，这样Flex容器内的子组件将不会换行。

    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap }) {
  // 子组件
}

  2. 设置justifyContent属性：通过调整justifyContent属性来控制子组件的对齐方式，例如设置为FlexAlign.Start，子组件将从容器起始位置排列，避免被截断。

    Flex({ justifyContent: FlexAlign.Start }) {
  // 子组件
}

  3. 设置alignItems属性：通过调整alignItems属性来控制子组件在交叉轴上的对齐方式，例如设置为ItemAlign.Start，子组件将与容器的起始位置对齐，避免被截断。

    Flex({ alignItems: ItemAlign.Start }) {
  // 子组件
}

  4. 设置overflow属性：如果内容超出容器大小，可以通过设置overflow属性为Overflow.Visible，使内容不会被截断。

    Flex({ overflow: Overflow.Visible }) {
  // 子组件
}

通过以上方式，可以在Flex组件不换行的情况下避免内容被截断。具体使用哪种方式取决于你的布局需求。

在HarmonyOS鸿蒙Next中，使用Flex组件时，可以通过设置flexWrap属性为FlexWrap.NoWrap来避免换行。同时，为防止内容被截断，可以结合使用overflow属性为Overflow.Visible，确保内容在超出容器时仍然可见。此外，合理调整flexShrink和flexGrow属性，确保子组件能够自适应容器大小，避免被截断。

回到顶部