首页 > 其他分享 >学习笔记(三十四):ArkUi-Divider (分隔)

学习笔记(三十四):ArkUi-Divider (分隔)

时间:2024-11-10 22:40:40浏览次数:1  
标签:ArkUi 设置 Divider 分隔线 三十四 默认值 分割线 属性

概述:

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

一、定义

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%')
  }
}

 

 

 

标签:ArkUi,设置,Divider,分隔线,三十四,默认值,分割线,属性
From: https://www.cnblogs.com/xqxacm/p/18538680

相关文章

  • 学习笔记(三十二):[email protected] (布局回调)
    概述:提供注册组件布局和绘制完成回调通知的能力。一、导入模块import{inspector}from'@kit.ArkUI' 二、绑定指定组件,返回对应的监听句柄inspector.createComponentObservercreateComponentObserver(id:string):ComponentObserver 三、注册\取消注册回调参......
  • 学习笔记(三十):ArkUi-UIContext.getPromptAction(弹窗)
    概述:基于promptAction弹窗演进而来,支持全局自定义弹窗,不依赖UI组件,依赖UIContext,支持在非页面文件中使用,弹窗内容支持动态修改,支持自定义弹窗圆角半径、大小和位置,适合在与页面解耦的全局弹窗、自定义弹窗显示和退出动画等场景下使用。注意:需先使用UIContext中的getPromptAct......
  • 第三十四章 Vue路由进阶之声明式导航(导航高亮)
    目录一、导航高亮1.1.基于语法1.2.主要代码 二、声明式导航的两个类名2.1.声明式导航类名匹配方式2.2.声明式导航类名样式自定义 ​2.3.核心代码一、导航高亮1.1.基于语法在Vue中通过VueRouter插件,我们可以非常简单的实现实现导航高亮效果VueRouter提......
  • 三十四、Python基础语法(文件操作-上)
    一、介绍文件:可以储存在长期储存设备上的一段数据,在计算机储存的数据都是二进制的形式储存的,我们用软件打开文件不是看见0和1是因为软件会自动将二进制数据进行转换。二、文件操作1.打开文件打开文件:文件是在硬盘中储存的,打开文件可以理解为将硬盘中文件加载到内存中,在pyth......
  • 学习笔记(二十八):ArkUi-自定义弹窗 (CustomDialog)
    概述:CustomDialog是自定义弹窗,可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗一、创建自定义弹框1、使用@CustomDialog装饰器装饰自定义弹窗,可在此装饰器内自定义弹窗内容//自定义弹框内容@CustomDialogst......
  • 学习笔记(二十七):ArkUi-警告弹窗(AlertDialog)
    概述:警告弹窗,需要向用户提问或得到用户的许可。警告弹窗用来提示重要信息,但会中断当前任务,尽量提供必要的信息和有用的操作。避免仅使用警告弹窗提供信息,用户不喜欢被信息丰富但不可操作的警告打断。必选内容包含:标题、可选信息文本、最多3个按钮。可选内容包含:输入框、icon......
  • arkUI:Column和Rom的间距设置(列向,横向)
    arkUI:Column和Rom的间距设置(列向,横向)1主要内容说明2相关内容举例和说明2.1Column的间距(列的间距)2.1.1源码1(Column的间距)2.1.2源码1运行效果2.2Row的间距(横向间距)2.2.1源码2(Row的间距)3.结语4.定位日期1主要内容说明Column:垂直布局组件,子组件从上到下依次......
  • 鸿蒙HarmonyOS(ArkUI基础-3)
    文章目录ArkUI(方舟UI框架)1.简介2.基本概念3.概述4.布局1.概述......
  • 学习笔记(二十五):ArkUi-栅格布局 (GridRow/GridCol)
    概述:栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。主要优势包括:提供可循的规律:栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数,可以方便地对页面元素进行定位和排版。统一的定位标注:栅格......
  • 第三十四讲:join语句怎么优化?
    第三十四讲:join语句怎么优化?简概:万年不变的开头​ 在上一篇文章中,我和你介绍了join语句的两种算法,分别是IndexNested-LoopJoin(NLJ)和BlockNested-LoopJoin(BNL)。我们发现在使用NLJ算法的时候,其实效果还是不错的,比通过应用层拆分成多个语句然后再拼接查询结果更方......