學習筆記（三十四）：ArkUi-Divider (分隔)

听着music睡發表於2024-11-10
筆記UIIDE

概述：

提供分隔器元件，分隔不同內容塊/內容元素。

一、定義

Divider()

二、屬性

1、vertical，設定分割線的方向

vertical(value: boolean)

使用水平分割線還是垂直分割線。

false：水平分割線；true：垂直分割線。

預設值：false

2、color，設定分割線的顏色

color(value: ResourceColor)

預設值：'#33182431'

3、strokeWidth，設定分隔線的寬度

分割線寬度。

預設值：1px

單位：vp

說明：

分割線的寬度不支援百分比設定。優先順序低於通用屬性height，超過通用屬性設定大小時，按照通用屬性進行裁切。部分裝置硬體中存在1畫素取整後分割線不顯示問題，建議使用2畫素。

4、lineCap，設定分割線的端點樣式

lineCap(value: LineCapStyle)

預設值：LineCapStyle.Butt

使用示例：

分隔線使用示例
@Entry
@Component
struct BlankDividerExample {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text('預設分隔線')
        Divider()
        Text('帶屬性的分隔線')
          .margin({top:30})
        Divider().color(Color.Red).vertical(false).strokeWidth(4).lineCap(LineCapStyle.Butt)

      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .padding(10)
    }
    .height('100%')
  }
}

相關文章