使用ListItemGroup后列表Item高度不一致问题

开发联动布局时，发现使用ListItemGroup后列表Item高度存在问题。

HarmonyOS

superinsect

2024-09-29 13:08:17

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

在开发联动布局时，使用 ListItemGroup 能够将多个列表项组合在一起，以实现更复杂的布局。然而，如果你发现列表项高度不一致的问题，这通常是由于以下几种原因引起的：

列表项内容不同：不同的内容会导致高度不一致。
样式问题：样式设置不一致或者父容器的样式设置影响了子项。
动态数据加载：如果列表项依赖于动态加载的数据，不同的数据可能导致高度不一致。

### 解决方法

#### 1. 确保统一的样式

为所有列表项设置统一的样式，确保它们具有相同的高度。

.list-item {
  height: 50px; /* 设置固定高度 */
  display: flex;
  align-items: center;
  padding: 10px;
}

#### 2. 使用 Flexbox 或 Grid 布局

利用 CSS 的 Flexbox 或 Grid 布局来保证列表项的一致性。

<style>
  .list-container {
    display: flex;
    flex-direction: column;
  }

  .list-item {
    height: 50px; /* 设置固定高度 */
    flex: 1; /* 确保所有子项均匀分布 */
    display: flex;
    align-items: center;
    padding: 10px;
  }
</style>

<div class="list-container">
  <div class="list-item">Item 1</div>
  <div class="list-item">Item 2</div>
  <div class="list-item">Item 3</div>
</div>

#### 3. 动态调整高度

如果列表项需要随着内容动态调整高度，可以考虑使用 JavaScript 来手动设置每个列表项的高度，使其一致。

document.addEventListener("DOMContentLoaded", function () {
  const listItems = document.querySelectorAll(".list-item");

  // 找到最大高度
  let maxHeight = 0;
  listItems.forEach(item => {
    const itemHeight = item.getBoundingClientRect().height;
    if (itemHeight > maxHeight) {
      maxHeight = itemHeight;
    }
  });

  // 设置所有列表项为相同的最大高度
  listItems.forEach(item => {
    item.style.height = `${maxHeight}px`;
  });
});

### 示例：React 联动布局中的 ListItemGroup

假设你正在使用 React，并且遇到了 ListItemGroup 中的列表项高度不一致问题。以下是一个示例，展示如何通过上述方法解决这个问题。

import React, { useEffect } from 'react';
import './styles.css'; // 引入样式

const ListItemGroup = ({ items }) => {
  useEffect(() => {
    const listItems = document.querySelectorAll('.list-item');

    // 找到最大高度
    let maxHeight = 0;
    listItems.forEach(item => {
      const itemHeight = item.getBoundingClientRect().height;
      if (itemHeight > maxHeight) {
        maxHeight = itemHeight;
      }
    });

    // 设置所有列表项为相同的最大高度
    listItems.forEach(item => {
      item.style.height = `${maxHeight}px`;
    });
  }, [items]);

  return (
    <div className="list-container">
      {items.map((item, index) => (
        <div key={index} className="list-item">
          {item.content}
        </div>
      ))}
    </div>
  );
};

export default ListItemGroup;

### 样式

确保在 styles.css 文件中定义必要的样式。

/* styles.css */
.list-container {
  display: flex;
  flex-direction: column;
}

.list-item {
  min-height: 50px; /* 设置最小高度 */
  flex: 1; /* 确保所有子项均匀分布 */
  display: flex;
  align-items: center;
  padding: 10px;
}

### 使用示例

将 ListItemGroup 组件用于你的应用中：

import React from 'react';
import ListItemGroup from './ListItemGroup';

const items = [
  { content: 'Item 1' },
  { content: 'Item 2 with longer content' },
  { content: 'Item 3' }
];

function App() {
  return (
    <div className="App">
      <h1>List Item Group Example</h1>
      <ListItemGroup items={items} />
    </div>
  );
}

export default App;

通过以上方法和示例，你可以确保 ListItemGroup 中的列表项高度一致，从而实现一个更加美观和流畅的用户界面。如果有任何进一步的问题或需求，请随时提问！

2024-09-29 14:10:04

FengTianYa

当ListItemGroup的父组件List的listDirection属性为Axis.Vertical时，不允许设置ListItemGroup组件的height属性。ListItemGroup的高度为header高度、footer高度和所有ListItem布局后总高度之和。可以两边都使用ListItemGroup来处理。

示例demo：

build() {  
  Row() {  
    Column() {  
      // this.leftListView()  
      this.leftListView2()  
    }  
    .layoutWeight(5)  
  
    Column() {  
      this.rightListView()  
    }  
    .layoutWeight(5)  
  }  
  .width("100%")  
  .height("100%")  
}  
  
  
@Builder  
listItemHeader(value: string) {  
  Row() {  
    Text(value)  
      .fontSize(13)  
      .fontColor(Color.Black)  
      .textAlign(TextAlign.Center)  
      .backgroundColor(Color.Green)  
      .width("100%")  
      .height(this.fieldRowHeight)  
  }  
}  
  
@Builder  
leftListView2() {  
  List({scroller: this.rightScroller}) {  
    ListItemGroup({header: this.listItemHeader("行权价1")}) {  
      ForEach(this.dataList, (item: number) => {  
        ListItem() {  
          Row() {  
            Text(`${item}`)  
              .fontSize(14)  
              .width("100%")  
              .height(this.contentRowHeight)  
              .textAlign(TextAlign.Center)  
          }  
        }  
      }, (item: string, index) => item + index)  
    }  
    .divider({strokeWidth: 0.5, color: Color.Green})  
  }  
  .width("100%")  
  .height(this.listViewHeight)  
  .edgeEffect(EdgeEffect.None)  
  .friction(0.6)  
  .backgroundColor(Color.Grey)  
  .sticky(StickyStyle.Header)  
  .divider({strokeWidth: 0.5, color: Color.Green})  
  .scrollBar(BarState.Off)  
  .onScrollStart(() => {  
    this.currentScroller = this.leftScroller  
  })  
  .onScroll((xOffset: number, yOffset: number) => {  
    if (this.currentScroller != this.leftScroller) {  
      return  
    }  
    this.leftScroller.scrollTo(this.leftScroller.currentOffset())  
  })  
}  
}

listItemGroup和listItem内部实现方式有部分差异，ListItem使用Divider分割线可以规避。demo如下：

@Builder  
leftListView() {  
  Row() {  
    Text("l行权价ListItem")  
      .fontSize(13)  
      .fontColor(Color.Black)  
      .textAlign(TextAlign.Center)  
      .backgroundColor(Color.Green)  
      .width("100%")  
      .height(this.fieldRowHeight)  
  }  
  List({scroller: this.leftScroller}) {  
    ForEach(this.dataList, (item: number) => {  
      ListItem() {  
        Column(){  
          Row() {  
            Text(`${item}`)  
              .fontSize(14)  
              .width("100%")  
              .height(this.contentRowHeight)  
              .textAlign(TextAlign.Center)  
          }  
          Divider().strokeWidth(1).color('#FFF30843')  //这里       }  
        }  
      }, (item: string, index) => item + index)  
    }  
      .width("100%")  
      .height(this.listViewHeight)  
      .edgeEffect(EdgeEffect.None)  
      .friction(0.6)  
      .backgroundColor(Color.Grey)  
      .sticky(StickyStyle.Header)  
      .scrollBar(BarState.Off)  
      .onScrollStart(() => {  
        this.currentScroller = this.leftScroller  
      })  
      .onScroll((xOffset: number, yOffset: number) => {  
        if (this.currentScroller != this.leftScroller) {  
          return  
        }  
        this.rightScroller.scrollTo(this.leftScroller.currentOffset())  
      })  
  }  
  @Builder  
  rightListView() {  
    List({scroller: this.rightScroller}) {  
      ListItemGroup({header: this.listItemHeader("行权价ListItemGroup")}) {  
        ForEach(this.dataList, (item: number) => {  
          ListItem() {  
            Row() {  
              Text(`${item}`)  
                .fontSize(14)  
                .width("100%")  
                .height(this.contentRowHeight)  
                .textAlign(TextAlign.Center)  
            }  
          }  
        }, (item: string, index) => item + index)  
      }  
      .divider({strokeWidth: 1, color: Color.Red})  
    }  
    .width("100%")  
    .height(this.listViewHeight)  
    .edgeEffect(EdgeEffect.None)  
    .friction(0.6)  
    .backgroundColor(Color.Grey)  
    .sticky(StickyStyle.Header)

2024-09-29 17:54:32

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

使用ListItemGroup后列表Item高度不一致问题

订阅鸿蒙技术特刊，精选内容抢先看