HarmonyOS鸿蒙Next中如何将横向List列表中的ListItem设置为同样的高度？

HarmonyOS鸿蒙Next中如何将横向List列表中的ListItem设置为同样的高度？每个ListItem里是一个居中显示的text，且 text的内容不固定长度。所以可能某个text很高，要求这一行List保持同样的最高高度。

显示效果有点类似于Excel中的一行单元格，高度一致。

eggper 1楼•1 个月前

找到解决办法了，List不行，得换成Flex布局，再用上ItemAlign.Stretch 完美解决~

更多关于HarmonyOS鸿蒙Next中如何将横向List列表中的ListItem设置为同样的高度？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 2楼•1 个月前

你可以尝试给text组件设置最大行数或者最大高度，参考以下代码：

Text('123')
//最大行数
.maxLines(10)
//最大高度
.constraintSize({
  maxHeight:100
})

zlyuanteng 3楼•1 个月前

由于我还设置了

.borderWidth(0.5)
.borderColor('#ffd6d6d6')

所以现在视觉效果是单元格一个高一个低。。。还是不理想。。。

vueper 4楼•1 个月前

在HarmonyOS鸿蒙Next中，若要将横向List列表中的ListItem设置为同样的高度，可以通过设置ListItemComponent的layoutWeight属性来实现。layoutWeight属性用于分配剩余空间，确保所有ListItem在高度上保持一致。

首先，确保ListContainer的布局方向设置为横向，可以使用orientation属性设置为ListContainer.HORIZONTAL。

接下来，在每个ListItemComponent中设置layoutWeight属性为相同的值，例如1。这样，所有ListItem将根据layoutWeight的分配比例获得相同的高度。

示例代码如下：

ListContainer {
  orientation: ListContainer.HORIZONTAL
  ListItem {
    layoutWeight: 1
    // 其他布局内容
  }
  ListItem {
    layoutWeight: 1
    // 其他布局内容
  }
  // 更多ListItem
}

通过这种方式，所有ListItem在高度上将会保持一致。

songsunli 5楼•1 个月前

在HarmonyOS鸿蒙Next中，可以通过设置ListItem的layoutWeight属性来实现横向列表中的ListItem具有同样的高度。具体步骤如下：

使用ListContainer布局：确保你的列表使用ListContainer作为容器。
设置ListItem的layoutWeight：为每个ListItem设置layoutWeight属性为相同的值，例如1。这将使所有ListItem在垂直方向上均匀分配高度。

示例代码：

ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
ListContainer.ItemProvider provider = new SampleItemProvider(data);
listContainer.setItemProvider(provider);

在SampleItemProvider中，为每个ListItem设置layoutWeight：

@Override
public Component getComponent(int position, Component convertComponent, ListContainer listContainer) {
    ListItem item = (ListItem) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_list_item, null, false);
    item.setLayoutWeight(1); // 设置相同的layoutWeight
    return item;
}

这样，所有ListItem在横向列表中将具有同样的高度。