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

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


HarmonyOS
2024-03-17 14:45:42
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
QW_MA

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[]; 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
分享
微博
QQ
微信
回复
2024-03-18 20:28:52
相关问题
HarmonyOS 列表分组可折叠展开
1085浏览 • 1回复 待解决
分组列表实践(嵌套列表
1911浏览 • 1回复 待解决
如何实现分组列表吸顶/吸底效果
2931浏览 • 1回复 待解决
如何设置镜像语言左右间距
1111浏览 • 1回复 待解决
HarmonyOS Canvas如何设置圆角
712浏览 • 1回复 待解决
Span组件设置间距间距
1255浏览 • 1回复 待解决
HarmonyOS 如何设置Text间距
538浏览 • 1回复 待解决
HarmonyOS span中如何设置圆角
1058浏览 • 1回复 待解决
HarmonyOS text如何设置间距
545浏览 • 1回复 待解决
Java Text控件,如何设置间距
7771浏览 • 1回复 待解决
HarmonyOS CustomDialog怎么设置圆角
955浏览 • 1回复 待解决
HarmonyOS Text中span不能设置间距
597浏览 • 1回复 待解决