#跟着若城学鸿蒙# UI组件篇-Divider及其属性

Huang兄

1109人浏览 · 2025-05-19 21:18:06

Huang兄 · 2025-05-19 21:18:06 发布

ArkUI中的Divider组件是一个用于分隔不同内容块或元素的工具，支持水平和垂直分割线，并提供了一系列样式属性以自定义其外观。该组件简单易用，适用于列表或界面布局，且不需要特殊权限。

Divider组件的基本用法

Divider组件是一个非常实用的UI组件，用于在列表或界面布局中分隔不同内容块。它支持水平和垂直分割线，并提供了一系列样式属性以自定义其外观。以下是Divider组件的基本用法：


@Entry
@Component
struct DividerExample {
  build() {
    Column() {
      Text('Item 1').fontSize(20);
      Divider().strokeWidth(1).color('#CCCCCC');
      Text('Item 2').fontSize(20);
      Divider().strokeWidth(2).color('#333333');
      Text('Item 3').fontSize(20);
    }
  }
}

在这个示例中，Divider组件被用来分隔三个文本项。通过设置strokeWidth和color属性，可以自定义分割线的宽度和颜色。

Divider组件的属性

Divider组件支持以下属性：

vertical: 一个布尔值，用于设置分割线的方向。默认值为false，表示水平分割线。如果设置为true，则表示垂直分割线。

Divider().vertical(true).strokeWidth(1).color('#CCCCCC');

strokeWidth: 分割线的线宽。默认值为1px。

Divider().strokeWidth(2).color('#333333');

color: 分割线的颜色。默认值为#CCCCCC。

Divider().color('#FF0000');

startMargin和endMargin: 分割线与列表侧边起始端和结束端的距离。默认值为0。

Divider().startMargin(10).endMargin(10).color('#CCCCCC');

Divider组件的使用场景

Divider组件在列表或界面布局中非常有用，可以帮助用户更好地识别不同的内容块。以下是一些常见的使用场景：

列表分隔线

在列表中，Divider组件可以用来分隔不同的列表项，使列表看起来更加清晰。

List() { ForEach(items, (item) => { ListItem() { Text(item.name).fontSize(20); } Divider().strokeWidth(1).color('#CCCCCC'); }) }

界面布局分隔线

在界面布局中，Divider组件可以用来分隔不同的内容区域，使界面看起来更加整洁。

@Entry
@Component
struct DividerExample {
  build() {
    Column() {
      Column() {
        Text('Header').fontSize(24);
        Divider().strokeWidth(2).color('#333333');
        Text('Content').fontSize(18);
        Divider().strokeWidth(1).color('#CCCCCC');
        Text('Footer').fontSize(16);
      }
    }
  }
}

Divider组件的样式自定义

Divider组件提供了多种样式属性，可以根据需要进行自定义。以下是一些常见的样式自定义示例：

自定义分割线颜色和宽度

Divider().strokeWidth(2).color('#FF0000');

自定义分割线与列表侧边的距离

Divider().startMargin(10).endMargin(10).color('#CCCCCC');

自定义分割线方向

Divider().vertical(true).strokeWidth(1).color('#CCCCCC');

Divider组件的注意事项

在使用Divider组件时，需要注意以下几点：

Divider组件不支持百分比设置strokeWidth、startMargin和endMargin属性。
当List存在多列时，分割线的startMargin和endMargin作用于每一列上。
List组件的分割线画在两个ListItem之间，第一个ListItem上方和最后一个ListItem下方不会绘制分割线。

示例代码

以下是一个完整的示例代码，展示了如何使用Divider组件：



@Entry
@Component
struct DividerExample {
  build() {
    Column() {
      Text('Header').fontSize(24);
      Divider().strokeWidth(2).color('#333333');
      Text('Content').fontSize(18);
      Divider().strokeWidth(1).color('#CCCCCC');
      Text('Footer').fontSize(16);
    }
  }
}