HarmonyOS 鸿蒙Next List里面ListItem的高度问题

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

HarmonyOS 鸿蒙Next List里面ListItem的高度问题
demo代码如下:

List({ space: 14 }) {
  ForEach(this.list, (item: PeoplePostCountyOption) => {
    ListItem() {
      Text(item.name)
        .fontSize(14)
        .fontColor(this.getSelectedColor(item.name))
        .fontFamily("normal")
        .padding(9)
        .border({ width: 0.5, color: this.getSelectedColor(item.name), radius: 7 })
        .width('100%')
        .textAlign(TextAlign.Center)
    }
  })
}.lanes(3, 14)

三个item一行，Text里的内容自适应高度，要求实现如果同一行里面，有一个是两行显示，其他两个是一行显示完的，怎么实现这两个的高度跟两行的高一样，内容居中显示。


更多关于HarmonyOS 鸿蒙Next List里面ListItem的高度问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以尝试下如下demo：

import { JSON } from ‘@kit.ArkTS’

export class area { name: string = “” heightSize: number = 0

constructor(name: string) { this.name = name } }

@Entry @Component struct Page { private arr: area[] = [new area(‘铜梁区’), new area(‘潼南区’), new area(‘荣昌区’), new area(‘开州区’), new area(‘梁平区’), new area(‘石柱**治县’), new area('秀山土族自治县kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk’), new area(‘酉自治县’), new area('彭水族自治县’)] @State private isBoolean: boolean = true

sortReturnMax(nums: number[]): number { const len: number = nums.length; for (let i: number = 0; i < len; i++) { for (let j: number = 0; j < len - 1 - i; j++) { if (nums[j] > nums[j + 1]) { const tmp = nums[j]; nums[j] = nums[j + 1]; nums[j + 1] = tmp; } } } return nums[nums.length-1] }

//将最高高度设置进去 reSetHeightSize() { for (let i = 0; i < this.arr.length; i += 3) { let arrTmp: number[] = [] arrTmp.push(this.arr[i].heightSize) arrTmp.push(this.arr[i+1].heightSize) arrTmp.push(this.arr[i+2].heightSize) let maxHeight = this.sortReturnMax(arrTmp) this.arr[i].heightSize = maxHeight this.arr[i + 1].heightSize = maxHeight this.arr[i + 2].heightSize = maxHeight } }

build() { Column() { if (this.isBoolean) { //计算实际需要的高度 List({ space: 14 }) { ForEach(this.arr, (item: area, index: number) => { ListItem() { Column() { Text(’’ + item.name) .fontSize(14) .padding(9) .border({ width: 0.5, radius: 7 }) .width(‘100%’) .onAreaChange((oldValue: Area, newValue: Area) => { this.arr[index].heightSize = newValue.height as number if (index == this.arr.length - 1) { this.isBoolean = false this.reSetHeightSize() } }) .textAlign(TextAlign.Center) } } }, (item: area) => JSON.stringify(item)) } .lanes(3) } else { List({ space: 14 }) { ForEach(this.arr, (item: area, index: number) => { ListItem() { Column() { Text(’’ + item.name) .fontSize(14) .padding(9) .border({ width: 0.5, radius: 7 }) .width(‘100%’) .height(item.heightSize) .onAreaChange((oldValue: Area, newValue: Area) => { // console.log(‘Two…’) }) .textAlign(TextAlign.Center) } } }, (item: area) => JSON.stringify(item)) } .lanes(3) } } .width(‘100%’) .height(‘100%’) .backgroundColor(0xDCDCDC) .padding({ top: 5 }) } }

更多关于HarmonyOS 鸿蒙Next List里面ListItem的高度问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）开发中，针对Next List组件中的ListItem高度问题，通常可以通过设置Item的布局参数来直接控制。

ListItem的高度主要由其内部的布局和子视图决定。如果你希望统一设置所有ListItem的高度，可以在定义Item布局时，为其根布局设置固定的高度值。例如，在XML布局文件中，可以为LinearLayout、RelativeLayout等根布局设置android:layout_height属性为具体值（如50dp）或者使用wrap_content、match_parent根据内容或父容器自适应。

如果需要动态调整不同Item的高度，可以在数据绑定时，根据具体数据项动态设置Item布局的高度。这通常需要在Java或Kotlin代码中进行处理，但鉴于要求不回答Java相关内容，你可以通过XML布局预定义几种不同高度的布局文件，在Adapter中根据条件选择不同的布局文件来创建View。

此外，检查Adapter中绑定数据的逻辑，确保没有错误地修改了Item的高度属性。

如果以上方法仍无法解决问题，可能是List组件的某些特定属性或行为影响了Item的高度表现。此时，可以查阅HarmonyOS的官方文档，了解Next List组件的详细属性和使用指南。

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

回到顶部