HarmonyOS鸿蒙Next中如何写一个竖向排列的List，嵌套Group，且分组里的item是横向排列的视图

HarmonyOS鸿蒙Next中如何写一个竖向排列的List，嵌套Group，且分组里的item是横向排列的视图呢？

4 回复

如果必须使用Group，是实现不了的，文档中明确说明，ListItemGroup使用direction属性设置布局方向不生效，ListItemGroup组件布局方向跟随父容器List组件的布局方向。

可以在ListItem中嵌套Column-Row排版自定义实现，参考示例：

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private timeTable: TimeTable[] = [
    {
      title: '星期一',
      projects: ['语文', '数学', '英语']
    },
    {
      title: '星期二',
      projects: ['物理', '化学', '生物']
    },
    {
      title: '星期三',
      projects: ['历史', '地理', '政治']
    },
    {
      title: '星期四',
      projects: ['美术', '音乐', '体育']
    }
  ];

  @Builder
  itemHead(text: string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width('100%')
      .padding(10)
  }

  @Builder
  itemFoot(num: number) {
    Text('共' + num + '节课')
      .fontSize(16)
      .backgroundColor(0xAABBCC)
      .width('100%')
      .padding(5)
  }

  build() {
    Column() {
      List({ space: 20 }) {
        ForEach(this.timeTable, (item: TimeTable) => {
          ListItem() {
            Column() {
              this.itemHead(item.title)
              Row() {
                ForEach(item.projects, (project: string) => {
                  Text(project)
                    .width('25%')
                    .height(100)
                    .fontSize(20)
                    .textAlign(TextAlign.Center)
                    .backgroundColor(0xFFFFFF)
                }, (item: string) => item)
              }
              .justifyContent(FlexAlign.SpaceAround)
              .width('100%')
              this.itemFoot(item.projects.length)
            }
          }
        })
      }
      .width('90%')
      .sticky(StickyStyle.Header | StickyStyle.Footer)
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

interface TimeTable {
  title: string;
  projects: string[];
}

更多关于HarmonyOS鸿蒙Next中如何写一个竖向排列的List，嵌套Group，且分组里的item是横向排列的视图的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


@Entry @Component struct ListExample { @State arr1: number[] = [0,1,2,3,4,5] @State arr2: number[] = [0,1,2,3,4,5]

build() { Column() { List({ space: ‘4vp’, initialIndex: 0 }) { ForEach(this.arr1, () => { ListItem() { Flex(){ ForEach(this.arr2, (item: number)=>{ Text(’’ + item) .width(‘100%’) .textAlign(TextAlign.Center) .backgroundColor(0xDCDCDC) }) }

        }
      })
  }
  .width('100%')
}
.width('100%')
.padding({ top: 5 })

} }

嗷，嵌套个flex就好了

在HarmonyOS鸿蒙Next中，可以使用ListContainer和DirectionalLayout实现竖向排列的List，嵌套Group，且分组里的item横向排列。首先，创建ListContainer作为主容器，设置其方向为垂直。然后，在ListContainer的ItemProvider中，为每个Group创建一个DirectionalLayout，设置其方向为水平，用于横向排列item。最后，将每个item添加到对应的DirectionalLayout中。

在HarmonyOS Next中实现竖向List嵌套横向Group的布局，可以使用List和Row组件组合实现。以下是核心代码示例：

@Entry
@Component
struct NestedListExample {
  @State groupData: Array<GroupData> = [
    {
      title: 'Group 1',
      items: ['Item 1-1', 'Item 1-2', 'Item 1-3']
    },
    // 更多分组数据...
  ]

  build() {
    List({ space: 10 }) {
      ForEach(this.groupData, (group: GroupData) => {
        ListItem() {
          Column() {
            // 分组标题
            Text(group.title)
              .fontSize(20)
              .margin({ bottom: 8 })
            
            // 横向排列的item
            Row({ space: 5 }) {
              ForEach(group.items, (item: string) => {
                Text(item)
                  .borderRadius(4)
                  .padding(10)
                  .backgroundColor('#f0f0f0')
              }
            }
            .width('100%')
            .height(80)
          }
          .width('100%')
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

interface GroupData {
  title: string;
  items: Array<string>;
}

关键点说明：

  1. 外层使用List组件实现竖向滚动
  2. 每个ListItem包含一个Column布局
  3. 在Column内部使用Row组件实现横向排列的item
  4. 通过ForEach动态渲染分组数据

注意调整Row的height和space参数来控制横向排列的间距和高度。如需横向滚动，可将Row嵌套在Scroll组件中。

回到顶部