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

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


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[]; 
}
分享
微博
QQ
微信
回复
2024-03-18 20:28:52
相关问题
如何实现分组列表吸顶/吸底效果
193浏览 • 1回复 待解决
Java Text控件,如何设置间距
4932浏览 • 1回复 待解决
UIAbility是否可以设置圆角
203浏览 • 1回复 待解决
如何实现渐变圆角边框
263浏览 • 1回复 待解决
如何设置PolarDB监控报警?
893浏览 • 1回复 待解决
如何创建OceanBase表分组
1813浏览 • 1回复 待解决
如何实现列表单选效果
424浏览 • 0回复 待解决
API8怎么设置顶部两边圆角底部直角
546浏览 • 1回复 待解决
如何设置状态栏导航栏颜色
388浏览 • 1回复 待解决
Web组件如何获取设置UserAgent
216浏览 • 1回复 待解决
请教 sql 有关分组聚合问题?
1605浏览 • 1回复 待解决
组件最大和最小宽度高度如何设置
301浏览 • 1回复 待解决