HarmonyOS应用开发-常用组件与布局

基础组件

Text

  • 功能：用于显示文本内容。
  • 属性：可以设置文本颜色、字体大小、字体样式、字体粗细和字体族。
参数名称参数类型描述
fontColorResourceColor设置文本颜色。
fontSizeLength | Resource设置文本尺寸，Length为number类型时，使用fp单位。
fontStyleFontStyle设置文本的字体样式。默认值：FontStyle.Normal。
fontWeightnumber | FontWeight | string设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。默认值：FontWeight.Normal。
fontFamilystring | Resource设置文本的字体列表。使用多个字体，使用“，”进行分割，优先级按顺序生效。例如：“Arial，sans-serif”。
  • 示例代码：
Text().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')

Image

  • 功能：用于显示图像。
  • 属性：包括图像的缩放类型、背景颜色、宽度和高度。
    示例代码：
参数名称参数类型描述
objectFitImageFit设置图片的缩放类型。
backgroundColorColor设置图片的背景颜色。
widthLength设置图片的宽度。
heightLength设置图片的高度。
  • 示例代码：
Image($r("app.media.image1")).objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(100)

TextInput

  • 功能：用于接收用户输入的单行文本。
  • 属性：可以设置文本样式、提示文本、输入类型、光标位置等。
功能示例代码
基础TextInput设置TextInput()
- 字体颜色.fontColor(Color.Blue)
- 字体大小.fontSize(20)
- 字体样式.fontStyle(FontStyle.Italic)
- 字体粗细.fontWeight(FontWeight.Bold)
- 字体族.fontFamily('Arial')
输入提示文本设置TextInput({ placeholder: '请输入帐号' })
- 提示文本颜色.placeholderColor(0x999999)
- 提示文本样式.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
输入框类型设置TextInput({ placeholder: '请输入密码' }).type(InputType.Password)
- 输入类型type 的参数类型为 InputType，包括 Normal、Password、Email 和 Number
设置光标位置使用 TextInputController 动态设置光标位置，例如：this.controller.caretPosition(2)
获取输入文本设置 onChange 事件，实时获取用户输入的文本信息，例如： TextInput().onChange((value: string) => { this.text = value })
  • 示例代码
TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily('Arial')

Button

  • 功能：用于响应点击操作，通常用于实现按钮。
  • 属性：可以设置按钮样式、点击事件和包含子组件。
功能示例代码
创建登录按钮Button('登录', { type: ButtonType.Capsule, stateEffect: true })
- 按钮宽度.width('90%')
- 按钮高度.height(40)
- 字体大小.fontSize(16)
- 字体粗细.fontWeight(FontWeight.Medium)
- 背景颜色.backgroundColor('#007DFF')
设置按钮样式type 用于定义按钮样式，可以是 ButtonType.Capsule、ButtonType.Circle 或 ButtonType.Normal。stateEffect 用于设置按钮按下时是否开启切换效果。
设置按钮点击事件绑定 onClick 事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。例如：.onClick(() => { // 处理点击事件逻辑 })
包含子组件Button组件可以包含子组件，例如包含Image组件，使按钮更丰富多样。
  • 示例代码：
Button('登录', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')

LoadingProgress

  • 功能：用于显示加载进度。
  • 属性：可以设置加载进度的颜色、高度和宽度。
参数名称参数类型描述
colorColor设置加载进度的颜色。
heightLength设置加载进度的高度。
widthLength设置加载进度的宽度。
  • 示例代码：
LoadingProgress().color(Color.Blue).height(60).width(60)

基础容器

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供Column和Row容器组件，Column用于垂直布局，Row用于水平布局。

基本属性

容器组件中存在两根轴：主轴和交叉轴。它们始终相互垂直，但它们的方向取决于容器的类型。

  • 主轴：在Column容器中，子组件按垂直方向从上到下排列，主轴方向是垂直的。在Row容器中，子组件按水平方向从左到右排列，主轴方向是水平的。
  • 交叉轴：交叉轴与主轴垂直相交，如果主轴是垂直的，交叉轴就是水平的，反之亦然。
属性名称描述
justifyContent设置主轴上的对齐格式。
alignItems设置交叉轴上的对齐格式。

主轴方向

对齐格式描述
Start元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
Center元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。
End元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

Column

对齐格式描述
Start设置子组件在水平方向上按照起始端对齐。
Center (默认值)设置子组件在水平方向上居中对齐。
End设置子组件在水平方向上按照末端对齐。

Row

对齐格式描述
Top设置子组件在垂直方向上居顶部对齐。
Center (默认值)设置子组件在垂直方向上居中对齐。
Bottom设置子组件在垂直方向上居底部对齐。

示例代码

@Entry
@Component
export struct LoginPage {build() {Column() {Image($r('app.media.logo'))...Text($r('app.string.login_page'))...Text($r('app.string.login_more'))...TextInput({ placeholder: $r('app.string.account') })...TextInput({ placeholder: $r('app.string.password') })...Row() {Text($r(…)) Text($r(…)) }Button($r('app.string.login'), { type: ButtonType.Capsule, stateEffect: true })...Row() {this.imageButton($r(…))this.imageButton($r(…))this.imageButton($r(…))}...}...}
}

列表容器

ArkUI提供了List组件和Grid组件，开发者使用List和Grid组件能够很轻松的完成一些列表页面。

List组件

属性描述
ForEach用于遍历数组并生成列表项，减少代码冗余。
divider用于自定义列表项之间的分割线，包括线宽、颜色和距离设置。
onScroll用于监听列表滚动事件，提供滑动偏移量和当前滑动状态。
onScrollIndex用于监听滑动时的起始位置和结束位置索引值。
onReachStart用于监听列表到达起始位置的事件。
onReachEnd用于监听列表到达底部末尾位置的事件。
onScrollStop用于监听列表滑动停止的事件。
listDirection用于设置列表项的排列方向，可以是垂直或水平。

Grid组件

属性描述
ForEach用于遍历数组并生成网格布局中的GridItem，可以减少重复代码。
columnsTemplate用于指定网格的列布局，通过设置每列的宽度分配比例来定义列数和宽度。
rowsTemplate用于指定网格的行布局，通过设置每行的高度分配比例来定义行数和高度。
columnsGap用于设置列之间的间距。
rowsGap用于设置行之间的间距。
onScrollIndex用于监听滚动时的起始位置和结束位置索引值，可用于实现滚动监听。

Tabs组件

属性描述
barPosition设置页签位置，可以是BarPosition.Start或BarPosition.End。默认值是BarPosition.Start。
barWidth设置TabBar的宽度。
barHeight设置TabBar的高度。
barMode设置Tabs的布局模式，可以是BarMode.Fixed或BarMode.Scrollable。默认值是BarMode.Fixed。
vertical设置TabBar的排列方向，为true时纵向排列，为false时横向排列。默认值是false。
TabContent子组件，每一个页签对应一个TabContent组件。
tabBar用于设置TabBar的显示内容，可以是字符串或使用@Builder修饰的函数。
TabsController控制页签切换和监听页签变化的控制器。
onChange监听页签切换时的回调函数。

结语

无论是创建简单的文本标签还是实现复杂的按钮操作，HarmonyOS提供了强大的组件，以帮助您构建出色的用户界面。希望这些组件介绍能帮助您更好地理解和利用HarmonyOS的界面开发能力。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/136423.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CSS3实现动态旋转加载样式

CSS3实现动态旋转加载样式

要使用 CSS3 创建一个动态旋转加载样式&#xff0c;可以使用 CSS 动画和旋转变换。下面是一个简单的示例&#xff1a; HTML&#xff1a; <div class"loader"></div> CSS&#xff1a; .loader {width: 50px;height: 50px;border: 4px solid #3498db;b…
阅读更多...
HR人才测评，采用线上测评做春招秋招

HR人才测评，采用线上测评做春招秋招

从人力资源管理的工作&#xff0c;已经有好些年了&#xff0c;我只想说这不是一个有创意和创造性的工作&#xff0c;因为大部分时间我都在从事数据方面的工作。关于公司内部的文案工作先且不说&#xff0c;这里分享下我做招聘工作的过程。 每年春秋两季的校招&#xff0c;算是…
阅读更多...
基于单片机的多层电梯控制仿真系统

基于单片机的多层电梯控制仿真系统

**单片机设计介绍&#xff0c; 基于单片机的多层电梯控制仿真系统 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的多层电梯控制仿真系统是一个复杂的系统&#xff0c;它需要结合单片机技术、控制理论、电子技术以及人…
阅读更多...
RabbitMQ 系列教程

RabbitMQ 系列教程

一、RabbitMQ 部署及配置详解(集群部署) 二、RabbitMQ 部署及配置详解 (单机) 三、RabbitMQ 详解及实例&#xff08;含错误信息处理&#xff09; 四、RabbitMq死信队列及其处理方案 五、RabbitMQ Java开发教程—官方原版 六、RabbitMQ Java开发教程&#xff08;二&#x…
阅读更多...
虚拟机复制后，无法ping通问题解决

虚拟机复制后，无法ping通问题解决

虚拟机复制后&#xff0c;无法ping通问题解决 可能出现的现象 ssh工具连接不上虚拟机&#xff1b;虚拟机ping不通外网或者ping不通内网其它虚拟机&#xff1b; 原因 原虚拟机和新复制出来的虚拟机的ip地址重复&#xff1b;原虚拟机和新复制出来的虚拟机的MAC地址重复&#…
阅读更多...
资源文件（QT）

资源文件（QT）

设置图标成功
阅读更多...
Spring Boot中使用Spring Data JPA访问MySQL

Spring Boot中使用Spring Data JPA访问MySQL

Spring Data JPA是Spring框架提供的用于简化JPA&#xff08;Java Persistence API&#xff09;开发的数据访问层框架。它通过提供一组便捷的API和工具&#xff0c;简化了对JPA数据访问的操作&#xff0c;同时也提供了一些额外的功能&#xff0c;比如动态查询、分页、排序等。 …
阅读更多...
坐标系转换（仅作记载）

坐标系转换（仅作记载）

一.极坐标转换为普通坐标系 参考&#xff1a;极坐标方程与直角坐标方程的互化 - 知乎 (zhihu.com) 公式&#xff1a;&#xff08;无需考虑象限引起的正负问题&#xff09; 普通坐标系转换为极坐标系 参考&#xff1a; 极坐标怎么与直角坐标系相互转化&#xff1f; - 知乎 (zh…
阅读更多...
基于SSM的建筑装修图纸管理平台

基于SSM的建筑装修图纸管理平台

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
Spring Task定时任务框架

Spring Task定时任务框架

二十四、Spring Task 24.1 介绍 Spring Task 是Spring框架提供的任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑。 定位&#xff1a;定时任务框架 作用&#xff1a;定时自动执行某段Java代码 为什么要在Java程序中使用Spring Task&#xff1f; 应用场景…
阅读更多...
AI全栈大模型工程师(二十)SKvs.LangChain

AI全栈大模型工程师(二十)SKvs.LangChain

文章目录 SK vs. LangChain概念对照功能对照 环境搭建PluginsSemantic Functionsskprompt.txtconfig.json Semantic Kernel ToolsNative Functions内置 Plugins MemoryPlanner后记 SK vs. LangChain #%% md 概念对照 LangChainSemantic KernelModelConnectorToolsConnectorV…
阅读更多...
elementui-plus el-tree组件数据不显示问题解决

elementui-plus el-tree组件数据不显示问题解决

当前情况: 显示: 注意看右侧的树是没有文字的,数据已经渲染,个数是对的,但就是没有文字, 解决: 对比以后发现是template中的#default{data}没有写大括号导致的 所以写上大括号后: 正常显示
阅读更多...
Docker入门指南：什么是Docker？

Docker入门指南：什么是Docker？

Docker入门指南&#xff1a;什么是Docker&#xff1f; Docker已经成为现代应用程序开发和部署的重要工具&#xff0c;但对于初学者来说&#xff0c;理解Docker的核心概念可能有些令人困惑。在本文中&#xff0c;我们将深入介绍Docker的基本知识&#xff0c;包括容器化技术、容…
阅读更多...
如何安装mmcv

如何安装mmcv

问题&#xff1a; modulenotfounderror: no module named mmcv 解决措施&#xff1a; 这里无法使用常规的pip安装思路解决这个问题&#xff0c;我们可以使用mmcv的官方文档解决这个问题&#xff0c;官方文档地址如下&#xff1a; https://mmcv.readthedocs.io/en/latest/ge…
阅读更多...
理解MySQL的日志 Redo、Undo

理解MySQL的日志 Redo、Undo

理解MySQL的Redo日志和Undo日志 1、MySQL 日志文件解决的问题2、redo 日志2.1、redo log 的组成2.2、redo log 刷盘策略2.3、MySQL 的 redo log解决了哪些问题 3、undo 日志3.1、undo 日志作用3.2、undo log 的类型3.3、undo log 的生命周期3.4、事务回滚相关的几个隐藏字段 1、…
阅读更多...
垂直领域大模型落地思考

垂直领域大模型落地思考

相比能做很多事&#xff0c;但每件事都马马虎虎的通用大模型&#xff1b;只能做一两件事&#xff0c;但这一两件事都能做好&#xff0c;可被信赖的垂直大模型会更有价值。这样的垂直大模型能帮助我们真正解决问题&#xff0c;提高生产效率。 本文将系统介绍如何做一个垂直领域…
阅读更多...
【Linux精讲系列】——vim详解

【Linux精讲系列】——vim详解

​作者主页 &#x1f4da;lovewold少个r博客主页 ⚠️本文重点&#xff1a;c入门第一个程序和基本知识讲解 &#x1f449;【C-C入门系列专栏】&#xff1a;博客文章专栏传送门 &#x1f604;每日一言&#xff1a;宁静是一片强大而治愈的神奇海洋&#xff01; 目录 目录 ​作者…
阅读更多...
Django（二、静态文件的配置、链接数据库MySQL）

Django（二、静态文件的配置、链接数据库MySQL）

文章目录 一、静态文件及相关配置1.以登录功能为例2.静态文件3.资源访问4.静态文件资源访问如何解决&#xff1f; 二、静态文件相关配置1. 如何配置静态文件配置&#xff1f;2.接口前缀3. 接口前缀动态匹配4. form表单请求方法补充form表单要注意的点 三、request对象方法reque…
阅读更多...
11、云服务器的宝塔面板安装、在宝塔安装MySQL、Redis、NGINX、JAVA

11、云服务器的宝塔面板安装、在宝塔安装MySQL、Redis、NGINX、JAVA

1►云服务器的宝塔面板安装 如果购买云服务器的时候&#xff0c;选择系统为宝塔面板&#xff0c;那么就不需要麻烦了。宝塔已经装好了。 但是如果没有选择宝塔面板&#xff0c;就需要手动安装。 第一步&#xff1a;点击重装系统 第二步&#xff1a;选择宝塔面板 宝塔面板官方…
阅读更多...
Python标准库有哪些

Python标准库有哪些

概述 可用性注释 内置函数 内置常量 由 site 模块添加的常量 # Author : 小红牛 # 微信公众号&#xff1a;wdPython内置类型 逻辑值检测 布尔运算 — and, or, not 比较运算 数字类型 — int, float, complex 布尔类型 - bool 迭代器类型 序列类型 — list, tuple, range 文本…
阅读更多...
最新文章

Copyright @ 2022~2023