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

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


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
相关问题
HarmonyOS 列表分组可折叠展开
382浏览 • 1回复 待解决
分组列表实践(嵌套列表
1059浏览 • 1回复 待解决
如何实现分组列表吸顶/吸底效果
2254浏览 • 1回复 待解决
如何设置镜像语言左右间距
476浏览 • 1回复 待解决
Span组件设置间距间距
574浏览 • 1回复 待解决
Java Text控件,如何设置间距
6976浏览 • 1回复 待解决
HarmonyOS span中如何设置圆角
454浏览 • 1回复 待解决
TextInput ,TextArea无法设置字体间距
323浏览 • 1回复 待解决
HarmonyOS stack设置圆角不生效
14浏览 • 0回复 待解决
Text多行展示时,如何设置间距
355浏览 • 1回复 待解决
UIAbility是否可以设置圆角
1905浏览 • 1回复 待解决
HarmonyOS WebView 圆角设置失效
50浏览 • 1回复 待解决