如何设置分组列表的圆角和间距?

Question

如何设置分组列表的圆角和间距

Answer 1

ListItemGroupStyle设置分组列表的圆角，List的space设置间距。可参考如下代码：

// xxx.ets 
@Entry 
@Component 
struct ListItemGroupExample { 
  private timeTable: TimeTable[] = [ 
    { projects: ['语文'] }, 
    { projects: ['数学', '英语'] }, 
    { projects: ['物理', '化学', '生物'] }, 
    { projects: ['美术', '音乐', '体育'] } 
  ] 
 
  build() { 
    Column() { 
      List({ space: 20 }) { // 设置分组列表的间距 
        ForEach(this.timeTable, (item: TimeTable) => { 
          ListItemGroup({ style: ListItemGroupStyle.CARD }) { // 设置分组列表的圆角 
            ForEach(item.projects, (project: string) => { 
              ListItem() { 
                Text(project) 
                  .width("100%") 
                  .height(100) 
                  .fontSize(20) 
                  .textAlign(TextAlign.Center) 
                  .backgroundColor(0xFFFFFF) 
              } 
            }, (item: string) => item) 
          } 
        }) 
      } 
      .width('90%') 
      .sticky(StickyStyle.Header | StickyStyle.Footer) 
      .scrollBar(BarState.Off) 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5, bottom: 5 }) 
  } 
} 
 
interface TimeTable { 
  projects: string[]; 
}