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

红目香薰

发布于 2024-01-31 10:03:57

1490

发布于 2024-01-31 10:03:57

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

摘要

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

HarmonyOS-UIAbitity-Divider

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

属性

名称	参数类型	默认值	描述
vertical	boolean	false	使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。
color	ResourceColor	-	设置分割线颜色。
strokeWidth	number \| string	1	设置分割线宽度。
lineCap	LineCapStyle	LineCapStyle.Butt	设置分割线条的端点样式。

注：无事件

示例代码

 @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 })
   }
 }

示例效果：