前言

很多人学 Divider，停在“横着来一条线”这一步就结束了。能用，但也只是刚够用。

真正把页面做细一点时，你会发现分割线也有很多变化空间。它可以是横向的，也可以是纵向的；可以通栏，也可以做缩进；可以弱化存在感，也可以承担更明显的版式节奏。

这份案例适合继续往前走一步，不再只看“有没有线”，而是看“线怎么参与页面设计”。

这份案例在演示什么

页面主要展示了 3 类变化：

1. 水平与垂直方向
2. 不同线型和表现形式
3. 缩进与边距控制

这些能力都很适合放到真实业务界面里理解。

完整代码

/**
 * DividerStylePatterns - Divider 样式
 * 演示 Divider 的 vertical/horizontal 方向、颜色和边距样式
 */
import { PRESET_COLORS, generateListItems, PAGE_BG_COLOR, PANEL_BG_COLOR, ACCENT_COLOR, MUTED_TEXT_COLOR } from './types'

@Entry
@Component
struct DividerStylePatterns {
  @State isShow: boolean = true

  build() {
    Column() {
      if (this.isShow) {
        Scroll() {
          Column({ space: 16 }) {
            Text('Divider 样式变体').fontSize(16).fontColor(ACCENT_COLOR).fontWeight(FontWeight.Bold)

            Column() {
              Text('Horizontal vs Vertical').fontSize(13).fontColor('#4D96FF').margin({ bottom: 8 })
              Column({ space: 12 }) {
                Text('Horizontal 水平分割线 (默认)').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#4D96FF')
                Text('Vertical 垂直分割线').fontSize(11).fontColor('#666666')
                Row() {
                  Text('左').fontSize(12).width(60).textAlign(TextAlign.Center)
                  Divider().vertical(true).strokeWidth(1).color('#4D96FF').height(30)
                  Text('中').fontSize(12).width(60).textAlign(TextAlign.Center)
                  Divider().vertical(true).strokeWidth(1).color('#4D96FF').height(30)
                  Text('右').fontSize(12).width(60).textAlign(TextAlign.Center)
                }.width('100%').height(40)
              }
            }
            .backgroundColor(PANEL_BG_COLOR).padding(12).borderRadius(12)

            Column() {
              Text('线型样式 (LineStyle)').fontSize(13).fontColor('#6BCB77').margin({ bottom: 8 })
              Column({ space: 10 }) {
                Text('Solid 实线 (默认)').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#6BCB77')
                Text('Dashed 虚线').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#6BCB77').lineCap(LineCapStyle.Butt)
                Text('Dotted 点线').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#6BCB77')
              }
            }
            .backgroundColor('#F0FAF1').padding(12).borderRadius(12)

            Column() {
              Text('边距控制').fontSize(13).fontColor('#9B59B6').margin({ bottom: 8 })
              Column({ space: 10 }) {
                Text('无缩进').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#E0E0E0')
                Text('左侧缩进 16').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#E0E0E0').margin({ left: 16 })
                Text('左右缩进 32').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#E0E0E0').margin({ left: 32, right: 32 })
                Text('全缩进 48').fontSize(11).fontColor('#666666')
                Divider().strokeWidth(1).color('#E0E0E0').margin({ left: 48, right: 48 })
              }
            }
            .backgroundColor('#F5EEF8').padding(12).borderRadius(12)
          }.width('100%')
        }
      }
      Text('Divider 样式变化 - 让分割线真正参与版式设计')
        .fontSize(12).fontColor(MUTED_TEXT_COLOR).margin({ top: 12 })
    }
    .width('100%').height('100%').backgroundColor(PAGE_BG_COLOR).padding(16)
  }
}

水平和垂直分割线，解决的是两类完全不同的问题

最先要记住的是，分割线不只有横向这一种。

水平分割线

适合切开上下内容层级，比如：

• 列表条目
• 卡片分区
• 表单段落
• 页面章节

垂直分割线

适合切开同一行里的并列区域，比如：

• 顶部工具栏
• 多列数据面板
• 标签组
• 按钮组之间的轻分隔

案例里这段就很典型：

Divider().vertical(true).strokeWidth(1).color('#4D96FF').height(30)

它让同一行的“左、中、右”三个区域边界立刻清楚了。

为什么垂直分割线一定要关注高度

和水平分割线不同，垂直分割线需要你明确给它一个可见高度：

.height(30)

不然它很可能不会呈现出你想要的效果。

这也是不少初学者第一次写垂直 Divider 时会疑惑的地方：不是写了 vertical(true) 就自动完事，尺寸还得自己配合好。

线型变化为什么能影响页面气质

案例第二块虽然演示得比较轻，但它传达了一个重要思路：分割线不一定总是最标准、最死板的实线。

不同线型往往会带来不同感觉：

• 实线：清晰、稳定、正式
• 虚线：提示感、辅助感更强
• 点线：更轻、更弱存在感

不过要注意，线型变化适合少量点缀，不适合全页面乱用。

缩进为什么是最实用的“精修动作”

第三块是我觉得最贴近真实项目的一组内容：

Divider().margin({ left: 16 })
Divider().margin({ left: 32, right: 32 })

这说明分割线不一定必须从头画到尾。

缩进的价值在于：

• 可以避开头像、图标、标签区
• 可以和正文内容起始线对齐
• 能让页面显得更精致，而不是所有元素都机械通栏

很多成熟应用里的分割线，之所以看起来顺眼，靠的就是这个小调整。

关键代码单独讲解

.vertical(true)

把默认横向分割线切换成纵向分隔方式，是并列布局里非常实用的能力。

.height(30)

垂直分割线必须搭配高度，否则很难形成清晰可见的分隔效果。

.margin({ left: 32, right: 32 })

用左右缩进控制线条长度，这比随便通栏更像经过思考的版式设计。

小白最容易踩的坑

1. 垂直分割线没设高度

结果以为代码没生效，实际上只是尺寸不够。

2. 什么地方都通栏分割

页面会显得非常机械，没有呼吸感。

3. 为了变化而变化

线型、颜色、缩进都乱用，最后页面风格会很碎。

这份代码能怎么改成真实业务

场景	改法
设置页	用缩进分割线和正文起始位置对齐
顶部工具栏	用垂直分割线隔开不同按钮组
数据卡片	用横向分割线切大区，垂直分割线切小区
品牌化页面	对重点模块使用不同样式的分隔策略

动手改一改

• 把垂直分割线应用到一个真正的工具栏布局里。
• 给设置项列表做头像缩进版分割线。
• 尝试只用缩进变化，不改颜色和线宽，观察页面精致度变化。
• 做一张卡片，同时使用横向和纵向分割线组织内容。

写在最后

分割线这种东西，真正拉开差距的从来不是“有没有”，而是你有没有把它当成版式设计的一部分来思考。方向、长度、位置这些细节，决定了页面是粗糙地被切开，还是自然地被组织起来。

如果你现在已经会写最基础的 Divider，这篇就是下一步该补的东西。把这些变化思路练熟之后，你做出来的页面会明显更像成品，而不只是功能跑通的界面。