当前位置:   article > 正文

第九节HarmonyOS 常用基础组件20-Divider

第九节HarmonyOS 常用基础组件20-Divider

1、描述

提供分割器组件,分割不同内容块或内容元素。

2、接口

Divider()

3、属性

名称

参数类型

描述

vertical

boolean

使用水平分割线还是垂直分割线。

false:水平分割线

true:垂直分割线

color

ResourceColor

分割线颜色

默认值:“#33182431”

strokeWidth

number | string

分割线宽度(不支持百分比)

默认值:1

单位:vp

lineCap

LineCapStyle

分割线的端点样式

默认值:LineCapStyle.Butt

4、LineCapStyle枚举说明

名称

描述

Butt

线条两端为平行线,不额外扩展。

Round

在线条两端延伸半个圆,直径等于线宽。

Square

在线条两端延伸一个矩形,宽度等于线宽的一半,高度等于线宽。

5、示例

  1. import router from '@ohos.router'
  2. @Entry
  3. @Component
  4. struct DividerPage {
  5. @State message: string = '提供分隔器组件,分隔不同内容块/内容元素。'
  6. build() {
  7. Row() {
  8. Scroll() {
  9. Column() {
  10. Text(this.message)
  11. .fontSize(20)
  12. .fontWeight(FontWeight.Bold)
  13. .width("96%")
  14. Blank(12)
  15. Text("Text001").fontSize(20).width("96%")
  16. // 默认
  17. Divider()
  18. .width("90%")
  19. .vertical(false)
  20. .color(Color.Green)
  21. .strokeWidth(20)
  22. .lineCap(LineCapStyle.Butt)
  23. Text("Text001").fontSize(20).width("96%")
  24. // 两端向外延伸一个半圆
  25. Divider()
  26. .width("90%")
  27. .vertical(false)
  28. .color(Color.Red)
  29. .strokeWidth(20)
  30. .lineCap(LineCapStyle.Round)
  31. Text("Text001").fontSize(20).width("96%")
  32. // 两端向外延伸一个矩形,宽度等于线宽的一半,高度等于线宽。
  33. Divider()
  34. .width("90%")
  35. .vertical(false)
  36. .color(Color.Blue)
  37. .strokeWidth(20)
  38. .lineCap(LineCapStyle.Square)
  39. Blank(12)
  40. Button("CheckboxGroup文本文档")
  41. .fontSize(20)
  42. .backgroundColor('#007DFF')
  43. .width('96%')
  44. .onClick(() => {
  45. // 处理点击事件逻辑
  46. router.pushUrl({
  47. url: "pages/baseComponent/divider/DividerDesc",
  48. })
  49. })
  50. Blank(12)
  51. }
  52. .width('100%')
  53. }
  54. }
  55. .padding({ top: 12, bottom: 12 })
  56. }
  57. }

6、效果图

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/238549
推荐阅读
相关标签
  

闽ICP备14008679号