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

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


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
相关问题
分组列表实践(嵌套列表
547浏览 • 1回复 待解决
如何设置镜像语言左右间距
12浏览 • 1回复 待解决
如何实现分组列表吸顶/吸底效果
1010浏览 • 1回复 待解决
Java Text控件,如何设置间距
5738浏览 • 1回复 待解决
UIAbility是否可以设置圆角
821浏览 • 1回复 待解决
WebView支持设置WebView圆角吗?
465浏览 • 1回复 待解决
如何实现渐变圆角边框
1018浏览 • 1回复 待解决
lottile动画如何圆角
498浏览 • 0回复 待解决
页面列表嵌套滚动,实现列表吸顶
549浏览 • 1回复 待解决
如何创建OceanBase表分组
2536浏览 • 1回复 待解决
如何使用canvas绘制圆角矩形
23浏览 • 1回复 待解决
如何设置PolarDB监控报警?
1399浏览 • 1回复 待解决
API8怎么设置顶部两边圆角底部直角
1028浏览 • 1回复 待解决
如何设置状态栏导航栏颜色
1304浏览 • 1回复 待解决