HarmonyOS-UIAbitity-Divider——【坚果派-红目香薰】

2024-01-31 10:03:57 浏览数 (2)

摘要

作者:红目香薰 团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

HarmonyOS-UIAbitity-Divider

提供分隔器组件,分隔不同内容块/内容元素。

属性

名称

参数类型

默认值

描述

vertical

boolean

false

使用水平分割线还是垂直分割线,false: 水平分割线, true:垂直分割线。

color

ResourceColor

-

设置分割线颜色。

strokeWidth

number | string

1

设置分割线宽度。

lineCap

LineCapStyle

LineCapStyle.Butt

设置分割线条的端点样式。

注:无事件

示例代码

代码语言:text复制
 @Entry
 @Component
 struct DividerExample {
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
       Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
       Row().width('100%').height(40).backgroundColor(0xF1F3F5)
       Divider()
       Row().width('100%').height(40).backgroundColor(0xF1F3F5)
       Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
       Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
         Text('bravery')
         Divider().vertical(true).margin(20).height(15)
         Text('effort')
         Divider().vertical(true).margin(20).height(15)
         Text('upward')
       }.width(250)
       Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC)
       Row().width('100%').height(40).backgroundColor(0xF1F3F5)
       Divider().vertical(false).strokeWidth(5).color(0x2788D9).lineCap(LineCapStyle.Round)
       Row().width('100%').height(40).backgroundColor(0xF1F3F5)
     }.width('100%').height(350).padding({ left: 35, right: 35, top: 35 })
   }
 }
 

示例效果:

可以看到分割作用。

0 人点赞