HarmonyOS 鸿蒙Next评论列表的ITEM高度如何自适应？

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next评论列表的ITEM高度如何自适应？

我在做一个评论列表的item布局时，这个item高度我不设置具体高度就会占满整个屏幕，但是也不能写死因为评论行数不确定，请问有什么办法能让高度随着文字自适应吗？

下面的代码可以直接预览，请求帮助！

理想中的效果是下面预览图中左边的这根灰色竖条高度跟右边的评论文字高度一样。

这是布局的代码：

Column() {
  Row() {
    Stack({ alignContent: Alignment.Top }) {
      Divider()
        .strokeWidth(8)
        .color($r(‘app.color.gray_e1e1e1’))
        .vertical(true)
      Image($r(‘app.media.cbn_live_text_year_mark_black’))
        .width(16)
        .height(16)
    }.padding({
      left: ‘22vp’
    })

    Text(‘时间’)
      .fontColor($r(‘app.color.black_262626’))
      .fontSize(‘12fp’)
      .padding({
        left: 8, right: 8
      })
  }.width(‘100%’).height(40).alignItems(VerticalAlign.Top)

  Row() {
    Stack({ alignContent: Alignment.Top }) {
      Divider()
        .strokeWidth(8)
        .color($r(‘app.color.gray_e1e1e1’))
        .vertical(true)
      Image($r(‘app.media.cbn_live_text_day_mark_black’))
        .width(16)
        .height(16)
        .margin({
          top: 9
        })
    }.padding({
      left: ‘22vp’
    })
    Text(‘评论正文’)
      .fontSize(‘12fp’)
      .fontColor($r(‘app.color.black_000000’))
  }.width(‘100%’).alignItems(VerticalAlign.Top)

}.width(‘100%’)

这是布局的效果：

Harmonyos Next教程
3 回复

可以考虑动态设置Divider的高度，比如Divider的高度定义为状态变量：

[@State](/user/State) dividerHeight: number = 0；

Divider()
  .height(this.dividerHeight)

给“评论正文”的Text绑定onAreaChange()事件：

Text('评论正文')
  .onAreaChange((_, newValue) => {
    this.dividerHeight = newValue.height as number
  })

这样，正文高度变化的时候，Divider高度就自动变化了。

是个思路，我去试一下，我也遇到这样的布局了

在HarmonyOS鸿蒙Next系统中，实现评论列表ITEM高度自适应的方法主要依赖于布局模型的选择和属性的设置。

首先，你可以考虑使用Flex布局。在评论列表的父容器中设置Flex布局，并通过调整flex-direction等属性，使每个评论ITEM能够自适应其内容高度。这种方法的好处是布局灵活，且子元素默认会根据父容器的高度进行自适应。

其次，你也可以尝试使用Grid布局。但需要注意的是，Grid组件默认不会根据GridItem内容自动调整高度。因此，你需要动态计算GridItem的总高度，并手动设置给Grid组件的height属性。同时，确保未设置rowsTemplate或columnsTemplate中影响高度的属性。

另外，还可以考虑使用动态调整的方法。通过监听评论内容的变化，动态计算并设置每个评论ITEM的高度。这种方法虽然实现起来相对复杂，但能够提供更高的灵活性和适应性。

最后，需要注意的是，在设置布局时，应避免给父容器设置固定的高度值，而应使用height: auto或类似的属性，以确保子元素能够自适应父容器的高度变化。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部