在HarmonyOS中，分割线与内容太挤怎么办，如何只“拉开分割线空隙”而不改动子项内边距？

Question

我不想改子组件的 padding，但希望分割线和上下内容之间有“呼吸感”，并扩大可点/可拖区域，该怎么做？

Answer 1

使用 divider(ColumnSplitDividerStyle) 单独设置分割线与上下子项的间距（startMargin/endMargin），不会改变子项布局，仅影响分割线间隔与触达感受。

// pages/SplitDividerBreath.ets
@Entry
@Component
struct SplitDividerBreath {
  @State gap: number = 10

  build() {
    Column({ space: 10 }) {
      Row({ space: 8 }) {
        Text(`分割线间距: ${this.gap}vp`)
        Button('+').onClick(() => this.gap += 2)
        Button('-').onClick(() => this.gap = Math.max(0, this.gap - 2))
      }

      ColumnSplit() {
        Column().height(120).backgroundColor('#FFFCE4EC')
        Column().height(160).backgroundColor('#FFE3F2FD')
        Column().height(100).backgroundColor('#FFE8F5E9')
      }
      .resizeable(true)
      .divider({ startMargin: this.gap, endMargin: this.gap }) // 只拉开分割线空隙
      .width('92%')
      .height('70%')
      .borderWidth(1)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}