Dev.to

鸿蒙开发：了解分割线

前言本文基于Api13 分割线的场景非常之多，特别常见于列表中，随便打开一个应用，都能够找到分割线的足迹，虽然分割线用处很多，但是，在实际的开发中，如何去正确的使用分割线呢，这是我们要谈的问题。比如一个简简单单的列表，分割线该如何绘制？肯定很多人都会想到，使用列表中自带的分割线属性divider，使用它可以很快速的实现一个分割线，代码如下： Column() { List() { ForEach(this.dataList, (item: string) => { ListItem() { Text(item) .width("100%") .height(50) .textAlign(TextAlign.Center) } }) } .divider({ color: Color.Gray, strokeWidth: 1, }) } .height('100%') .width('100%') 运行之后效果：如果，我的分割线不是一条规则的线呢？比如是一个图片，比如是一段虚线，再比如，在条目的最后，我也想要分割线呢？显然在使用列表自带的分割线属性divider就无法满足了。边框样式border 每个组件都有一个通用属性border，使用它可以很方便的实现一个边框样式，可以设置边框粗细，颜色，圆角等等属性。比如，设置一个边框为1，颜色为灰色的边框： Column() { }.width("100%") .height(50) .border({ width: 1, color: Color.Gray }) 效果如下：再比如，加一个圆角度数： Column() { }.width("100%") .height(50) .border({ width: 1, color: Color.Gray, radius: 10 }) 效果如下：当然了，你也可以设置其它的类型，比如虚线： Column() { }.width("100%") .height(50) .border({ width: 1, color: Color.Gray, radius: 10,style:BorderStyle.Dashed}) 我们看下效果：一般设置分割线，在底部，我们直接给条目的组件设置底部的分割线就行： List() { ForEach(this.dataList, (item: string) => { ListItem() { Text(item) .width("100%") .height(50) .textAlign(TextAlign.Center) .border({ width: { bottom: 1 }, color: Color.Gray }) } }) } 可以看到，实现的效果和组件自带的分割线属性是一样，而且最后一个条目也完美的补上了。分割线组件Divider 要不说，还是鸿蒙呢，对于一个分割线也提供了一个组件出来，这是生怕开发者不会绘制啊，这个组件和其他的组件使用方式基本一致，但就一个作用，就是展示分割线。 Divider() .strokeWidth(10) .color(Color.Gray) 属性类型概述 strokeWidth number /string 设置分割线的宽度 color ResourceColor 设置分割线的颜色 vertical boolean 设置分割线的方向，使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。 lineCap LineCapStyle 设置分割线的端点样式还是上述的案例，我们是用Divider组件设置一下分割线： List() { ForEach(this.dataList, (item: string) => { ListItem() { Column() { Text(item) .width("100%") .height(50) .textAlign(TextAlign.Center) Divider() .strokeWidth(10) .color(Color.Gray) } } }) } 我们看下最终的效果：相关总结在实际的开发中，如果自带的分割线能够满足我们的需求，以自身的分割线属性为主，如果不满足，我们可以使用组件进行绘制。一般来说，关于Divider组件很少用于列表中，一般都是固定UI中需要一个分割线，这时就可以进行使用。

Mar 22, 2025 - 04:40

前言

本文基于Api13

分割线的场景非常之多，特别常见于列表中，随便打开一个应用，都能够找到分割线的足迹，虽然分割线用处很多，但是，在实际的开发中，如何去正确的使用分割线呢，这是我们要谈的问题。

比如一个简简单单的列表，分割线该如何绘制？

肯定很多人都会想到，使用列表中自带的分割线属性divider，使用它可以很快速的实现一个分割线，代码如下：

Column() {
      List() {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height(50)
              .textAlign(TextAlign.Center)
          }
        })
      }
      .divider({
        color: Color.Gray,
        strokeWidth: 1,
      })
    }
    .height('100%')
    .width('100%')

运行之后效果：

如果，我的分割线不是一条规则的线呢？比如是一个图片，比如是一段虚线，再比如，在条目的最后，我也想要分割线呢？显然在使用列表自带的分割线属性divider就无法满足了。

边框样式border

每个组件都有一个通用属性border，使用它可以很方便的实现一个边框样式，可以设置边框粗细，颜色，圆角等等属性。

比如，设置一个边框为1，颜色为灰色的边框：

 Column() {

      }.width("100%")
      .height(50)
      .border({ width: 1, color: Color.Gray })

效果如下：

再比如，加一个圆角度数：

 Column() {

      }.width("100%")
      .height(50)
      .border({ width: 1, color: Color.Gray, radius: 10 })

效果如下：

当然了，你也可以设置其它的类型，比如虚线：

 Column() {

      }.width("100%")
      .height(50)
      .border({ width: 1, color: Color.Gray, radius: 10,style:BorderStyle.Dashed})

我们看下效果：

一般设置分割线，在底部，我们直接给条目的组件设置底部的分割线就行：

List() {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height(50)
              .textAlign(TextAlign.Center)
              .border({ width: { bottom: 1 }, color: Color.Gray })
          }
        })
      }

可以看到，实现的效果和组件自带的分割线属性是一样，而且最后一个条目也完美的补上了。

分割线组件Divider

要不说，还是鸿蒙呢，对于一个分割线也提供了一个组件出来，这是生怕开发者不会绘制啊，这个组件和其他的组件使用方式基本一致，但就一个作用，就是展示分割线。

Divider()
        .strokeWidth(10)
        .color(Color.Gray)

属性	类型	概述
strokeWidth	number /string	设置分割线的宽度
color	ResourceColor	设置分割线的颜色
vertical	boolean	设置分割线的方向，使用水平分割线还是垂直分割线。false：水平分割线；true：垂直分割线。
lineCap	LineCapStyle	设置分割线的端点样式

还是上述的案例，我们是用Divider组件设置一下分割线：

List() {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Column() {
              Text(item)
                .width("100%")
                .height(50)
                .textAlign(TextAlign.Center)
              Divider()
                .strokeWidth(10)
                .color(Color.Gray)
            }
          }
        })
      }

我们看下最终的效果：