梅科尔工作室-江凌宇-鸿蒙笔记2
HarmonyOS构建漂亮的页面
一、页面基本元素介绍
- 常用基础组件
组件介绍:
组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。
组件根据功能可以分为以下五大类:基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元,包括Text、Image、TextInput、Button、LoadingProgress等
2.Text
Text组件用于在界面上展示一段文本信息,可以包含子组件Span。
文本样式
针对包含文本元素的组件,例如Text、Span、Button、TextInput等,可使用fontColor、fontSize、fontStyle、 fontWeight、fontFamily这些文本样式,分别设置文本的颜色、大小、样式、粗细以及字体
设置文本对齐方式
使用textAlign属性可以设置文本的对齐方式
textAlign参数类型为TextAlign,定义了以下几种类型:
Start(默认值):水平对齐首部。
Center:水平居中对齐。
End:水平对齐尾部。
设置文本超长显示
当文本内容较多超出了Text组件范围的时候,您可以使用textOverflow设置文本截取方式,需配合maxLines使用,单独设置不生效,maxLines用于设置文本显示最大行数。下面的示例代码将textOverflow设置为Ellipsis ,它将显示不下的文本用 “...” 表示:
设置文本装饰线
使用decoration设置文本装饰线样式及其颜色,大家在浏览网页的时候经常可以看到装饰线,例如带有下划线超链接文本。decoration包含type和color两个参数,其中type用于设置装饰线样式,参数类型为TextDecorationTyp,color为可选参数。
下面的示例代码给文本设置了下划线,下划线颜色为黑色
3. Image
Image组件用来渲染展示图片,它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高,图片就能加载出来
4 .TextInput
TextInput组件用于输入单行文本,响应输入事件。TextInput的使用也非常广泛,例如应用登录账号密码、发送消息等。和Text组件一样,TextInput组件也支持文本样式设置,下面的示例代码实现了一个简单的输入框:
设置输入提示文本
当我们平时使用输入框的时候,往往会有一些提示文字。例如登录账号的时候会有“请输入账号”这样的文本提示,当用户输入内容之后,提示文本就会消失,这种提示功能使用placeholder属性就可以轻松的实现。您还可以使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式
5. Button
Button组件主要用来响应点击操作,可以包含子组件。下面的示例代码实现了一个“登录按钮”:
二、Column&Row组件的使用
1 .概述
一个丰富的页面需要很多组件组成,那么,我们如何才能让这些组件有条不紊地在页面上布局呢?这就需要借助容器组件来实现。
容器组件是一种比较特殊的组件,它可以包含其他的组件,而且按照一定的规律布局,帮助开发者生成精美的页面。容器组件除了放置基础组件外,也可以放置容器组件,通过多层布局的嵌套,可以布局出更丰富的页面。
ArkTS为我们提供了丰富的容器组件来布局页面,本文将以构建登录页面为例,介绍Column和Row组件的属性与使用。
2 组件介绍
布局容器概念
线性布局容器表示按照垂直方向或者水平方向排列子组件的容器,ArkTS提供了Column和Row容器来实现线性布局。
Column表示沿垂直方向布局的容器。
Row表示沿水平方向布局的容器。
主轴和交叉轴概念
在布局容器中,默认存在两根轴,分别是主轴和交叉轴,这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。
主轴:在Column容器中的子组件是按照从上到下的垂直方向布局的,其主轴的方向是垂直方向;在Row容器中的组件是按照从左到右的水平方向布局的,其主轴的方向是水平方向。
交叉轴:与主轴垂直相交的轴线,如果主轴是垂直方向,则交叉轴就是水平方向;如果主轴是水平方向,则交叉轴是垂直方向。
属性介绍
2. 交叉轴方向的对齐(alignItems)
子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。
Column容器的主轴是垂直方向,交叉轴是水平方向,其参数类型为HorizontalAlign(水平对齐),HorizontalAlign定义了以下几种类型:
以上则是对于鸿蒙组件开发页面的基本介绍,欢迎补充
梅科尔工作室-江凌宇-鸿蒙笔记2相关推荐
- 梅科尔工作室-江凌宇-鸿蒙笔记1
对于鸿蒙软件开发所用编译器的介绍 鸿蒙APP开发所采用的编译器为华为自研的DevEc编译器,简洁美观易上手是此编译器的巨大优势 主要目录配置文件作用(stage模型和FA模型下) 下面是在FA模型下的 ...
- 梅科尔工作室-江凌宇-鸿蒙笔记3
介绍一下ArkTs的两个组件和两个渲染 list组件 list组件是编辑过程中经常用到的,它的接口如下: List(value?:{space?: number | string, initialIn ...
- 梅科尔工作室-江凌宇-鸿蒙笔记4
今天我们来介绍几个API模块 路由跳转模块 为了实现Ability内页面的跳转和数据的传递我们首先要导入的必须是router模块 我们有四种跳转方式 方式一: router.push(),跳转到指定页 ...
- 梅科尔工作室-崔启凡-鸿蒙笔记4
鸿蒙笔记4 路由跳转 作用 用法 跳转方式 方式一 方式二 方式三 方式四 跳转页面数据的接受 数据请求 弹窗 绑定事件 点击事件 触摸事件 挂载卸载事件 拖拽事件 路由跳转 作用 实现Ability ...
- 梅科尔工作室-梁嘉莹-鸿蒙笔记1
基本操作界面介绍 预览按钮 内置API文档查阅 项目设置 运行按钮(只有在真机模拟或远程模拟时才可以使用) 安装插件,在files下的settings-->Plugins里面,可以安装一个中文的 ...
- 梅科尔工作室-梁嘉莹-鸿蒙笔记2
1 组件介绍 组件(Component)是界面搭建与显示的最小单位,HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件,我们可以使用这些组件轻松的编写出更加丰富.漂亮的界面. ...
- 梅科尔工作室--梁嘉莹-鸿蒙笔记3
目录 List组件 子组件 接口 语法 父子组件 组件导出 双向数据绑定 if-else渲染 使用语法 注意事项 for循环渲染 使用语法 注意事项 List组件 子组件: Listitem 接口: ...
- 梅科尔工作室-梁嘉莹-鸿蒙笔记4
目录 官方API使用 路由跳转模块 实现Ability内页面的跳转和数据传递. 首先需要导入router模块 跳转方式 信息传递 注意事项 数据请求模块 申请网络上的接口,获取传输的数据.文档中心 首 ...
- 梅科尔工作室-孙溢博-鸿蒙笔记1
目录 一.主要目录配置文件作业 (一).stage模型 1.index.ets页面 2.resource文件 3.module.json5模块 4.pages模块 (二).FA模型 1.主要模块 二. ...
最新文章
- visual assist x太卡了_LeetCode69. x 的平方根
- 《高性能javascript》读书笔记
- python写一个通讯录V2.0
- Java代码实现执行Linux服务器命令
- define() vs const 该如何选择?
- flask_requirements
- Walking Robot
- wiremock 使用_使用WireMock进行更好的集成测试
- python图像处理教程_Python基于Tensor FLow的图像处理操作详解
- jhipster详解
- Apache Hive-1.2.1 Manual Patch and Compile
- pywinauto实战-操作h2testw.exe自动化测试脚本
- java rgb yuv_RGB,CMY(K),YUV,YIQ,YCbCr顏色的轉換算法(java實現)
- unit自动驾驶怎么使用_自动驾驶与驾驶辅助系统 正确使用驾驶辅助系统
- 通过Nginx反向代理提供网站内嵌
- 喇叭音圈是大一点好还是小一点好
- Spring Boot中html、js、Css、图片等应该放在什么位置
- 【iOS学习笔记】玩转字符串
- 数据库“xxx”的事务日志已满,原因为“LOG_BACKUP”
- 宝藏德国炒锅,菲仕乐小黑锅,好用不踩雷