在HarmonyOS NEXT开发中list divider中startmargin前面的颜色怎么和listitem保持一致？

Question

在HarmonyOS NEXT开发中list divider中startmargin前面的颜色怎么和listitem保持一致？

Answer 1

目前使用list的divider属性并不能满足你想实现的效果，可以自定义实现分隔线效果，参考如下代码：

build() { 
 
  Row(){ 
    List(){ 
      ListItem(){ 
        Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceBetween}){ 
          Text('test') 
          Divider() 
            .color(Color.Red) 
              // .height(15) 
            .strokeWidth(5) 
            .margin({left:50}) 
        } 
      }.backgroundColor(Color.Blue) 
      .height(100) 
      ListItem(){ 
        Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceBetween}){ 
          Text('test') 
          Divider() 
            .color(Color.Red) 
            .strokeWidth(5) 
            .margin({left:50,bottom:0}) 
        } 
 
 
      }.backgroundColor(Color.Orange) 
      .height(100) 
      ListItem(){ 
        Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceBetween}){ 
          Text('test') 
          Divider() 
            .color(Color.Red) 
            .strokeWidth(5) 
            .margin({left:50}) 
        } 
 
 
      }.backgroundColor(Color.Yellow) 
      .height(100) 
    } 
 
    // .divider({strokeWidth:5,color:Color.Red,startMargin:50}) 
    .width('100%').height('100%') 
    .backgroundColor(Color.Gray) 
  } 
}