HarmonyOS鸿蒙Next Divider分隔线如何使用？界面分隔组件指南

HarmonyOS 5.0，DevEco Studio 5.0
需要在列表或区块间添加分隔线
不清楚Divider的使用方法
希望了解分隔线的最佳实践

希望了解HarmonyOS Divider组件的使用方法，实现界面分隔效果

songsunli 1楼

1. 基础分隔线

arkts

@Entry
@Component
struct BasicDividerDemo {
  build() {
    Column({ space: 16 }) {
      Text('上方内容')

      Divider()
        .color($r('app.color.divider'))

      Text('下方内容')
    }
    .padding(16)
  }
}

2. 自定义样式分隔线

arkts

@Entry
@Component
struct StyledDividerDemo {
  build() {
    Column({ space: 16 }) {
      // 细分隔线
      Divider()
        .strokeWidth(0.5)
        .color($r('app.color.divider'))

      // 粗分隔线
      Divider()
        .strokeWidth(8)
        .color($r('app.color.background'))

      // 虚线
      Divider()
        .strokeWidth(1)
        .color($r('app.color.divider'))
        .lineCap(LineCapStyle.Round)
    }
    .padding(16)
  }
}

3. 列表分隔线

arkts

@Entry
@Component
struct ListDividerDemo {
  @State items: string[] = ['设置项1', '设置项2', '设置项3', '设置项4']

  build() {
    Column() {
      ForEach(this.items, (item: string, index: number) => {
        Column() {
          Row() {
            Text(item)
              .fontSize(16)
              .fontColor($r('app.color.text_primary'))
            Blank()
            Image($r('app.media.ic_arrow_right'))
              .width(20)
              .height(20)
              .fillColor($r('app.color.text_secondary'))
          }
          .width('100%')
          .padding(16)

          // 最后一项不显示分隔线
          if (index < this.items.length - 1) {
            Divider()
              .color($r('app.color.divider'))
              .margin({ left: 16 }) // 左侧缩进
          }
        }
      })
    }
    .backgroundColor($r('app.color.surface'))
    .borderRadius(16)
    .margin(16)
  }
}

4. 带图标的列表分隔

arkts

@Entry
@Component
struct IconListDividerDemo {
  @State items: SettingItem[] = [
    { icon: $r('app.media.ic_notification'), title: '通知设置' },
    { icon: $r('app.media.ic_privacy'), title: '隐私设置' },
    { icon: $r('app.media.ic_about'), title: '关于我们' }
  ]

  build() {
    Column() {
      ForEach(this.items, (item: SettingItem, index: number) => {
        Column() {
          Row() {
            Image(item.icon)
              .width(24)
              .height(24)
              .fillColor($r('app.color.text_primary'))
            Text(item.title)
              .fontSize(16)
              .fontColor($r('app.color.text_primary'))
              .margin({ left: 12 })
            Blank()
            Image($r('app.media.ic_arrow_right'))
              .width(20)
              .height(20)
              .fillColor($r('app.color.text_secondary'))
          }
          .width('100%')
          .padding(16)

          if (index < this.items.length - 1) {
            Divider()
              .color($r('app.color.divider'))
              .margin({ left: 52 }) // 对齐文字起始位置
          }
        }
      })
    }
    .backgroundColor($r('app.color.surface'))
    .borderRadius(16)
  }
}

interface SettingItem {
  icon: Resource
  title: string
}

5. 垂直分隔线

arkts

@Entry
@Component
struct VerticalDividerDemo {
  build() {
    Row() {
      Column() {
        Text('3').fontSize(24).fontWeight(FontWeight.Bold)
        Text('鱼缸').fontSize(12).fontColor($r('app.color.text_secondary'))
      }
      .layoutWeight(1)

      Divider()
        .vertical(true)
        .height(40)
        .color($r('app.color.divider'))

      Column() {
        Text('12').fontSize(24).fontWeight(FontWeight.Bold)
        Text('鱼只').fontSize(12).fontColor($r('app.color.text_secondary'))
      }
      .layoutWeight(1)

      Divider()
        .vertical(true)
        .height(40)
        .color($r('app.color.divider'))

      Column() {
        Text('85').fontSize(24).fontWeight(FontWeight.Bold)
        Text('评分').fontSize(12).fontColor($r('app.color.text_secondary'))
      }
      .layoutWeight(1)
    }
    .width('100%')
    .padding(20)
    .backgroundColor($r('app.color.surface'))
    .borderRadius(16)
  }
}

6. 区块分隔

arkts

@Entry
@Component
struct SectionDividerDemo {
  build() {
    Column() {
      // 区块1
      Column() {
        Text('基本设置')
          .fontSize(14)
          .fontColor($r('app.color.text_secondary'))
          .padding({ left: 16, top: 16, bottom: 8 })

        Column() {
          Text('设置项1').padding(16)
          Divider().color($r('app.color.divider')).margin({ left: 16 })
          Text('设置项2').padding(16)
        }
        .backgroundColor($r('app.color.surface'))
        .borderRadius(12)
        .margin({ left: 16, right: 16 })
      }

      // 区块分隔（使用空白或粗分隔线）
      Row().height(24)

      // 区块2
      Column() {
        Text('高级设置')
          .fontSize(14)
          .fontColor($r('app.color.text_secondary'))
          .padding({ left: 16, top: 16, bottom: 8 })

        Column() {
          Text('设置项3').padding(16)
          Divider().color($r('app.color.divider')).margin({ left: 16 })
          Text('设置项4').padding(16)
        }
        .backgroundColor($r('app.color.surface'))
        .borderRadius(12)
        .margin({ left: 16, right: 16 })
      }
    }
  }
}

更多关于HarmonyOS鸿蒙Next Divider分隔线如何使用？界面分隔组件指南的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼

Divider组件用于分隔不同内容块或列表项。在ArkTS中，通过<Divider>标签声明，可设置垂直或水平方向。关键属性包括：vertical控制方向，color设置线条颜色，strokeWidth定义线宽，lineCap调整线头样式。例如，<Divider vertical="true" color="#ff0000" strokeWidth="2"/>创建红色垂直线。它通常与Row、Column或List容器配合使用，实现界面元素间的视觉分隔。

h691938207 3楼

在HarmonyOS Next中，Divider组件用于在列表或布局中创建一条视觉分隔线，以提升内容的组织性和可读性。以下是其核心使用方法与实践指南。

基础使用

在ArkTS的UI结构中直接使用Divider组件即可插入一条默认样式的分隔线。

Column() {
  Text('上方内容')
    .fontSize(20)
  Divider()
  Text('下方内容')
    .fontSize(20)
}

关键属性配置

通过属性可以灵活控制分隔线的样式：

vertical：设置为true时创建垂直分隔线，默认为false（水平线）。通常在Row容器内使用垂直分隔。
```
Row() {
  Text('左侧')
  Divider().vertical(true)
  Text('右侧')
}
```
color：设置分隔线的颜色，例如Color.Gray。
strokeWidth：设置线的粗细（单位vp），如1。
lineCap：设置线头样式，可选LineCapStyle.Butt（平头，默认）、Round（圆头）、Square（方头）。

最佳实践建议

明确使用场景：水平Divider常用于分隔Column内的列表项或章节；垂直Divider则适合在Row内区分并列元素（如工具栏图标）。
保持视觉克制：分隔线颜色宜浅于正文（如#F1F3F5），宽度通常1vp即可，避免喧宾夺主。
结合布局属性：利用margin或padding控制分隔线与内容的间距，确保呼吸感。例如：
```
Divider()
  .margin({ top: 10, bottom: 10 })
```
列表项分隔：在List组件中，可为每个列表项后添加Divider()实现清晰的项目分隔。注意使用条件渲染或ForEach避免最后一项出现多余分隔线。
替代方案评估：简单的间距（如Height(10)）或卡片阴影有时比分隔线更能实现优雅的视觉分组。

通过合理配置Divider的属性并将其融入整体布局，可以有效构建结构清晰、视觉舒适的HarmonyOS应用界面。