OpenHarmony开发者论坛

标题: Flex布局如果子组件高度超过父布局高度，会遮挡住下方的item [打印本页]

作者: catorange 时间: 2025-1-9 15:24
标题: Flex布局如果子组件高度超过父布局高度，会遮挡住下方的item
[md]### 【问题描述】

如下代码，第一个item会挡住第二个item。第一个item的内容超出了红色border,如何使item正常依次显示没有遮挡

```ts

@State infoArray: Array<string> = new Array<string>()

  aboutToAppear(): void {
this.infoArray.push("12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890")
this.infoArray.push("第二行")
this.infoArray.push("第三行")
  }

  build() {
Column() {
   Scroll() {
      Flex({ justifyContent: FlexAlign.Start, alignContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
      ForEach(this.infoArray, (item: string) => {
         Text(item)
            .fontSize(12)
            .constraintSize({ minWidth: '90%' })
            .border({ width: 1, color: Color.Red })
      }, (item: string) => JSON.stringify(item))
      }.align(Alignment.TopStart)
      .padding({ bottom: 20 })
   }.height('100').width('100')
}
.height('100%')
.width('100%')
  }
```

### 【运行环境】

硬件：
ROM版本：
DevEvoStudio版本：
SDK版本：12
[/md]

作者: hyacinth养花人 时间: 2025-1-13 15:21
标题: Flex布局如果子组件高度超过父布局高度，会遮挡住下方的item
[md]可以设置文本的最大行数和文本溢出样式

```
Text(item)
            .fontSize(12)
            .constraintSize({ minWidth: '90%' })
            .border({ width: 1, color: Color.Red })
            .height(20)
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis})
```
[/md]

作者: catorange 时间: 2025-1-15 09:56
回复 hyacinth养花人: 有没有能显示全部内容，且不会遮挡的方法

作者: 马迪 时间: 2025-1-15 16:01
回复 catorange: 那不是撑的变型了吗

作者: hyacinth养花人 时间: 7 天前
回复 hyacinth养花人: 不设置Scroll的高度，或者高度设置大一点

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)