Name	Type	Mandatory	Description
value	boolean	Yes	Whether the divider is vertical or horizontal. false: A horizontal divider is used. true: A vertical divider is used. Default value: false Invalid values are treated as the default value.

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Color of the divider. Default value: '#33182431' Invalid values are treated as the default value. You can set a common divider color using WithTheme.

Name	Type	Mandatory	Description
value	number \| string	Yes	Stroke width of the divider. Default value: 1px Invalid values are treated as the default value. Unit: vp NOTE Percentage values are not supported. This attribute has lower priority than the height attribute. If its value exceeds the height setting, cropping is performed based on the height constraint. Due to hardware limitations on some devices where 1 px dividers may not display properly after rounding, you are advised to use the 2px value.

Percentage values are not supported. This attribute has lower priority than the height attribute. If its value exceeds the height setting, cropping is performed based on the height constraint. Due to hardware limitations on some devices where 1 px dividers may not display properly after rounding, you are advised to use the 2px value.

[h2]lineCap

lineCap(value: LineCapStyle)

Sets the line cap style of the divider. This attribute can be dynamically set using attributeModifier.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	LineCapStyle	Yes	Line cap style of the divider. Default value: LineCapStyle.Butt Invalid values are treated as the default value.

Name

Type

Mandatory

Description

value

LineCapStyle

Yes

Line cap style of the divider.

Default value: LineCapStyle.Butt

Invalid values are treated as the default value.

Events

The universal events are supported.

Example

[h2]Example 1: Configuring the Divider Direction, Color, and Stroke Width

This example demonstrates how to configure a divider's direction, color, and stroke width.

// xxx.ets
@Entry
@Component
struct DividerExample {
  build() {
    Column() {
      // Use horizontal dividers.
      Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
      List() {
        ForEach([1, 2, 3], (item: number) => {
          ListItem() {
            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
          }.width(244).height(48)
        }, (item: number) => item.toString())
      }.padding({ left: 24, bottom: 8 })

      Divider().strokeWidth(8).color('#F1F3F5')
      List() {
        ForEach([4, 5], (item: number) => {
          ListItem() {
            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
          }.width(244).height(48)
        }, (item: number) => item.toString())
      }.padding({ left: 24, top: 8 })

      // Use vertical dividers.
      Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
      Column() {
        Column() {
          Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3)
          Row() {
            Button('Button')
              .width(136)
              .height(22)
              .fontSize(16)
              .fontColor('#007DFF')
              .fontWeight(500)
              .backgroundColor(Color.Transparent)
            Divider()
              .vertical(true)
              .height(22)
              .color('#182431')
              .opacity(0.6)
              .margin({ left: 8, right: 8 })
            Button('Button')
              .width(136)
              .height(22)
              .fontSize(16)
              .fontColor('#007DFF')
              .fontWeight(500)
              .backgroundColor(Color.Transparent)
          }.margin({ top: 17 })
        }
        .width(336)
        .height(152)
        .backgroundColor('#FFFFFF')
        .borderRadius(24)
        .padding(24)
      }
      .width('100%')
      .height(168)
      .backgroundColor('#F1F3F5')
      .justifyContent(FlexAlign.Center)
      .margin({ top: 8 })
    }.width('100%').padding({ top: 24 })
  }
}

[h2]Example 2: Configuring the Divider Line Cap Style

This example shows how to define the line cap style for a divider.

// xxx.ets
@Entry
@Component
struct DividerExample {
  build() {
    Column({space:30}) {
      Text("LineCap:Butt")
      Divider()
        .strokeWidth(20)
        .width("90%")
        .color('#F1F3F5')
        .lineCap(LineCapStyle.Butt)

      Text("LineCap:Round")
      Divider()
        .strokeWidth(20)
        .width("90%")
        .color('#F1F3F5')
        .lineCap(LineCapStyle.Round)

      Text("LineCap:Square")
      Divider()
        .strokeWidth(20)
        .width("90%")
        .color('#F1F3F5')
        .lineCap(LineCapStyle.Square)

    }.width('100%').padding({ top: 24 })
  }
}

目录

Divider

Child Components

APIs

Attributes

[h2]vertical

[h2]color

[h2]strokeWidth

[h2]lineCap

Events

Example

[h2]Example 1: Configuring the Divider Direction, Color, and Stroke Width

[h2]Example 2: Configuring the Divider Line Cap Style