• 鸿蒙入门12-Divider

    分割器组件，分割不同内容快/内容元素

    参数

    • 无

    属性

    名称

    参数类型

    默认值

    描述

    vertical

    boolean

    false

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

    false ： 水平分割线

    true ： 垂直分割线

    color

    ResourceColor

    -

    设置分割线颜色

    strokeWidth

    number ｜ string

    1

    设置分割线宽度

    lineCap

    LineCapStyle

    LineCapStyle.Butt

    设置分割线的端点样式

    LineCapStyle

    名称

    描述

    Butt

    分割线两端为 无端点

    Round

    分割线两端为 圆角端点

    Square

    分割线两端为 直角端点

    事件

    • 无
    • 不支持通用事件

    示例 1

    1. @Entry
    2. @Component
    3. struct Index {
    4.   @State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
    5.   build() {
    6.     Column() {
    7.       Text('文本内容')
    8.  
    9.       Divider().strokeWidth(10).lineCap(LineCapStyle.Butt)
    10.  
    11.       Text('文本内容')
    12.  
    13.       Divider().strokeWidth(10).lineCap(LineCapStyle.Round)
    14.  
    15.       Text('文本内容')
    16.  
    17.       Divider().strokeWidth(10).lineCap(LineCapStyle.Square)
    18.  
    19.       Text('文本内容')
    20.     }.padding(50)
    21.   }
    22. }

     示例 2

    1. @Entry
    2. @Component
    3. struct Index {
    4.   @State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
    5.   build() {
    6.     Column() {
    7.       Text('文本内容')
    8.  
    9.       Divider().strokeWidth(10).lineCap(LineCapStyle.Butt)
    10.  
    11.       Text('文本内容')
    12.  
    13.       Divider().strokeWidth(10).lineCap(LineCapStyle.Round)
    14.  
    15.       Text('文本内容')
    16.  
    17.       Divider().strokeWidth(10).lineCap(LineCapStyle.Square)
    18.  
    19.       Text('文本内容')
    20.  
    21.       Row() {
    22.         Text('文本')
    23.  
    24.         Divider().strokeWidth(10).vertical(true)
    25.  
    26.         Text('文本')
    27.  
    28.         Divider().strokeWidth(10).vertical(true)
    29.  
    30.         Text('文本')
    31.  
    32.         Divider().strokeWidth(10).vertical(true)
    33.  
    34.         Text('文本')
    35.       }.height(50)
    36.     }.padding(50)
    37.   }
    38. }

     示例 3

    1. @Entry
    2. @Component
    3. struct Index {
    4.   @State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
    5.   build() {
    6.     Column() {
    7.       Text('文本内容')
    8.  
    9.       Divider().strokeWidth(10).lineCap(LineCapStyle.Butt).color(Color.Pink)
    10.  
    11.       Text('文本内容')
    12.  
    13.       Divider().strokeWidth(10).lineCap(LineCapStyle.Round).color(Color.Brown)
    14.  
    15.       Text('文本内容')
    16.  
    17.       Divider().strokeWidth(10).lineCap(LineCapStyle.Square).color(Color.Orange)
    18.  
    19.       Text('文本内容')
    20.     }.padding(50)
    21.   }
    22. }

     

  • 相关阅读:
    Unreal Engine 4 + miniconda + Python2.7 + Pycharm
    腾讯mini项目-【指标监控服务重构】2023-08-19
    ffmpeg基础五：单独解码裸流aac或MP3或H264
    持续集成指南：GitLab 的 CI/CD 工具配置与使用
    前端面经 前端优化
    WINUI——Trigger(触发器)使用小结
    C语言深度剖析——bool类型，浮点数相等比较。
    Ceph入门到精通-网络调优netstat -s
    2022年华数杯资料汇总
    Spring之Bean的初始化和销毁
  • 原文地址：https://blog.csdn.net/qq_42660453/article/details/138181172