HarmonyOS 速记

目录

  • 装饰器
    • @Entry(入口)
    • @Component(组件)
    • @State(状态)
    • @Prop(属性)
    • @Preview(预览)
      • Previewer
      • Inspector
  • 结构体
    • struct
    • build
    • 自定义组件
      • 自定义 Custom 组件
  • 容器
    • Row(行) & Column(列)
    • RelativeContainer(相对布局容器)
    • margin
    • padding
    • Swiper(轮播图)
    • Grid(网格容器)
    • List(列表)
  • 组件
    • Image(图片)
      • 图片的填充模式
    • Text(文本)
      • 组件:左上角对齐
      • 文字:左对齐
  • 参考

装饰器

@Entry(入口)

@Entry 装饰的 @Component 将作为 UI 页面的入口
在单个 UI 页面中,最多可以使用@Entry 装饰一个自定义组件

@Entry
@Component
struct Index {}

@Component(组件)

@Component 装饰了 struct 关键字声明的类 Index

  • Index 被 @Component 装饰后具备组件化的能力,通过实现 build 方法描述 UI
  • @Component 装饰的 struct 类必须添加 @Component 装饰器,开发工具有提示
@Component
struct Index {build() {}
}

@State(状态)

文本信息由 @State 装饰器装饰的状态变量 message 驱动

@State message: string = 'HarmonyOS 速记';

@Prop(属性)

@Prop 装饰器,用于从父组件接收数据

  • 注意:加入 @Prop 后,Previewer 会失效

@Preview(预览)

Previewer

  • Previewer 可以直接预览 @Entry 装饰的整个页面
    也可以预览由 @Preview 装饰的单独组件
  • 预览 @Entry 装饰的整个页面时,需要选中 @Entry 所在的文件,Previewer 才能顺利打开
  • 将 Previewer 调整至 ComponentMode,便可以单独预览组件视图
  • 如果修改的是文本内容,则需要手动保存(即 ctrl+s)后,Previewer 才会更新
    如果修改的是相关属性,则不需要手动保存,Previewer 也会实时更新
  • 注意:此时的 Inspector 是不可用状态

Inspector

开启 Previewer 工具栏的 Inspector 工具,可以观察到当前组件树,并与 Previewer 交互

结构体

struct

定义组件结构体

  • @Component 装饰的 struct 类必须添加 @Component 装饰器,开发工具有提示
  • @Component 装饰的 struct 类必须重写 build 函数,开发工具有提示
struct Index {}

build

组件通过 build 函数用于描述 UI

  • @Component 装饰的 struct 类必须重写 build 函数,开发工具有提示
 build() {}

自定义组件

@Component
struct Custom {build() {}
}

自定义 Custom 组件

@Preview // 用于组件预览
@Component // 定义组件
struct Custom { // 组件名build() {Image($r('app.media.banner_pic1')) // 图片.width('100%') // 宽度.padding({ // 内边距left: 16,top: 10,right: 16,bottom: 10}).borderRadius(16) // 圆角.objectFit(ImageFit.Contain) // 缩放模式}
}

使用 Previewer 查看效果
自定义 Custom 组件

容器

Row(行) & Column(列)

    Row() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')

RelativeContainer(相对布局容器)

alignRules 在 RelativeContainer 中设置对齐规则(位置:上中下、左中右)

  • top、center、bottom 上中下
  • left、middle、right 左中右

注:alignRules 属性在 Row & Column 容器中无效

	// 水平、竖直居中RelativeContainer() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).alignRules({ // 对齐规则center: {anchor: '__container__',align: VerticalAlign.Center},middle: {anchor: '__container__',align: HorizontalAlign.Center}})}.width('100%').height('100%')

正常效果:Start -> Top/Center/Bottom

异常效果:Start -> Top/Center/Bottom

正常效果:Top -> Start/Middle/End

异常效果:Top -> Start/Middle/End

函数 alignRules 声明

alignRules(value: AlignRuleOption): T;

参数 AlignRuleOption 源码

declare interface AlignRuleOption {top?: { // 上anchor: string;align: VerticalAlign;};center?: { // 中anchor: string;align: VerticalAlign;};bottom?: { // 下anchor: string;align: VerticalAlign;};left?: { // 左anchor: string;align: HorizontalAlign;};middle?: { // 中anchor: string;align: HorizontalAlign;};right?: { // 右anchor: string;align: HorizontalAlign;};bias?: Bias;
}

结论

top、center、bottom、left、middle、right

  • 对应着 设置子控件的基线,即以子控件的哪个位置作为对齐的基准点

VerticalAlign#Top、Center、Bottom & HorizontalAlign#Start、Center、End

  • 这些属性才是对应着 设置子控件相对于父布局的对齐规则,但需要配合上面的基准来使用才会得到想要的正确效果

margin

外边距

      Text(this.message)// .margin(12).margin({left: 20,top: 20,right: 20,bottom: 20})

padding

内边距

      Text(this.message)// .padding(12).padding({left: 20,top: 20,right: 20,bottom: 20})

Swiper(轮播图)

使用Swiper构建轮播图


@Entry
@Component
struct Index {@State message: string = 'HarmonyOS 速记';build() {Column() {// TitleText(this.message).padding({left: 16,top: 10,right: 16,bottom: 10}).width('100%').textAlign(TextAlign.Start).fontWeight(FontWeight.Bold)// BannerBanner().margin({left: 16,right: 16})}.height('100%').width('100%').backgroundColor('#F1F3F5')}
}@Preview
@Component
struct Banner {// Banner 数据源@State banners: Array<BannerBean> = [new BannerBean('pic0', $r('app.media.banner_pic0'),'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'),new BannerBean('pic1', $r('app.media.banner_pic1'),'https://developer.huawei.com/consumer/cn/'),new BannerBean('pic2', $r('app.media.banner_pic2'),'https://developer.huawei.com/consumer/cn/deveco-studio/'),new BannerBean('pic3', $r('app.media.banner_pic3'),'https://developer.huawei.com/consumer/cn/arkts/'),new BannerBean('pic4', $r('app.media.banner_pic4'),'https://developer.huawei.com/consumer/cn/arkui/'),new BannerBean('pic5', $r('app.media.banner_pic5'),'https://developer.huawei.com/consumer/cn/sdk')];build() {Swiper() { // 轮播图ForEach(this.banners, // 数据源(item: BannerBean, index: number) => { // 用于生成 item 组件Image(item.imageSrc).width('100%').borderRadius( 10 ) // 设置图片的圆角,不是 Banner 的圆角,所以感觉有点怪异.objectFit(ImageFit.Contain)},(item: BannerBean, index: number) => item.id // 用于 item 增量更新,所以需要 id)}.autoPlay(true) // 开启自动播放.loop(true) // 开启轮训// .interval(1000) // 时间间隔// .indicator(true) // 使用默认的指示器.indicator( // 配置指示器new DotIndicator().color('#1a000000').selectedColor('#0A59F7'))}
}/*** Banner 结构体*/
class BannerBean {id: string = '';imageSrc: ResourceStr = '';url: string = '';constructor(id: string, imageSrc: ResourceStr, url: string) {this.id = id;this.imageSrc = imageSrc;this.url = url;}
}

Swiper 轮播图

Grid(网格容器)

网格容器,由“行”和“列”分割的单元格所组成,其中容器内各条目对应一个 GridItem 组件
如果仅设置行、列数量与占比中的一个,则网格单元将按照设置的方向排列,超出Grid显示区域后,Grid拥有可滚动能力
设置单行显示,则赋能套件部分可以横向滑动
网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局

List(列表)

List容器可以轻松高效地显示结构化、可滚动的信息。当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能

组件

Image(图片)

用于显示图片,使用 $r(‘app.media. 文件名字’) 将 media 文件夹下的图片读取到 Image 组件

    Image($r('app.media.banner_pic1')) // 设置图片资源.width('100%') // 宽度.padding({ // 内边距left: 16,top: 10,right: 16,bottom: 10}).borderRadius(16) // 圆角.objectFit(ImageFit.Contain) // 缩放模式

图片的填充模式

.objectFit(ImageFit.Contain)

设置图片的填充模式

  • Contain 模式,即保持宽高比进行缩小或者放大,使得图片完全显示在显示边界内
  • Cover 模式,即保持宽高比进行缩小或者放大,使得图片两边都大于或等于显示边界。

Text(文本)

组件:左上角对齐

      Text(this.message) // 默认宽度 wrap_content.id('HelloWorld').fontSize(20).fontWeight(FontWeight.Bold).fontStyle(FontStyle.Italic).lineHeight(55).alignRules({ // 对齐规则:左上角(top、left) 为 对其基准点top: { // 上边缘 为 对其基准点anchor: '__container__',align: VerticalAlign.Top // 上对齐},left: { // 左边缘 为 对其基准点anchor: '__container__',align: HorizontalAlign.Start // 左对齐}})

文字:左对齐

      Text(this.message).width('100%') // 设置宽度 match_parent.textAlign(TextAlign.Start) // 设置文字朝向 居左

参考

HarmonyOS应用开发快速入门

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

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

相关文章

Java入门程序-HelloWorld

Java程序开发的三个步骤 1.编写代码得到 .java 源代码文件 2.使用javac编译得到 .class 字节码文件 3.使用java运行 注意事项 建议代码文件名全英文&#xff0c;首字母大写&#xff0c;满足驼峰命名法&#xff0c;源代码文件的后缀必须是.java 开发HelloWorld程序 &…

MATLAB十九种作图大全

一、二维曲线图 反应两个变量的因果关系 clear; %清除工作空间的所有变量 clc; %清除命令窗口的内容&#xff0c;对工作环境中的全部变量无任何影响 close all; %关闭所有的Figure窗口 x linspace(1,200,100); %均匀…

如何在.NET中实现跨平台开发?

在.NET中实现跨平台开发主要依赖于几个关键的技术和框架&#xff0c;这些技术和框架使得.NET应用程序可以在多种操作系统上运行&#xff0c;包括但不限于Windows、Linux和macOS。以下是实现.NET跨平台开发的一些主要方法&#xff1a; 使用.NET Core或.NET 5/6/7&#xff1a; .N…

进程监控与管理详解

一、进程的定义: 进程process是正在运行的程序,包括: 分配的内存地址空间 安全属性、包括所有权和特权 一个或多个线程 进程状态 进程的环境包括: 本地和全局变量 当前调度上下文…

Mac清理其他文件:释放存储空间的高效指南

每个Mac用户都可能遇到存储空间不足的问题&#xff0c;尤其是当“其他”文件积累到一定体积时。在Mac上&#xff0c;“其他”文件通常包括各种系统文件、缓存、文档以及不被归类为应用程序、照片、电影或音乐的其他类型的文件。这些文件往往不易被注意&#xff0c;但逐渐占用了…

vue 数组转字符串以逗号分隔

var list [a,b,c] var listString list.join(,) //变成字符串后&#xff0c;以逗号分隔

数组学习内容

动态初始化 只给长度&#xff0c;数据类型【】 数组名new 数据类型【数组长度】 内存图

python 实现euler modified变形欧拉法算法

euler modified变形欧拉法算法介绍 Euler Modified&#xff08;改进&#xff09;变形欧拉法算法&#xff0c;也被称为欧拉修改法或修正欧拉法&#xff08;Euler Modified Method&#xff09;&#xff0c;是一种用于数值求解微分方程的改进方法。这种方法在传统欧拉法的基础上进…

ArcGIS Pro SDK (十三)地图创作 4 设备

ArcGIS Pro SDK (十三)地图创作 4 设备 文章目录 ArcGIS Pro SDK (十三)地图创作 4 设备1 设备位置 API、GPS/GNSS 设备1.1 连接到设备位置源1.2 获取当前设备位置源1.3 关闭当前设备位置源1.4 获取当前设备位置源和属性1.5 更新当前设备位置源上的属性1.6 订阅设备位置属性…

Leetcode—1137. 第 N 个泰波那契数【简单】

2024每日刷题&#xff08;160&#xff09; Leetcode—1137. 第 N 个泰波那契数 记忆化搜索实现代码 class Solution { public:int tribonacci(int n) {int zero 0;int one 1;int two 1;if(n 0) {return zero;}if(n 1) {return one;}if(n 2) {return two;}int ans 0;fo…

LangChain:构建强大的LLM应用的全方位框架

LangChain&#xff1a;构建强大的LLM应用的全方位框架 引言 在人工智能和大语言模型&#xff08;LLMs&#xff09;快速发展的今天&#xff0c;开发者们迫切需要一个强大而灵活的框架来简化LLM应用的开发过程。LangChain应运而生&#xff0c;它不仅提供了丰富的工具和组件&…

SQL编程题复习(24/9/17)

练习题 x40 10-34 查询显示01班所有学生的信息10-35 查询显示03班所有女生的信息10-36 查询显示刘山同学的电话号码10-37 查询显示所有女生的学号、姓名与班级编号10-38 查询显示年龄在19岁以下的学生的全部信息10-39 查询统计19岁以下学生的总人数&#xff08;Num&#xff09;…

vscode搭建ros开发环境问题记录(更新...)

文章目录 vscode 不能自动补全方法一&#xff1a;方法二&#xff1a; 开发环境&#xff1a; vmware 15.7 ubuntu 20.04 ros noetic vscode 不能自动补全 方法一&#xff1a; 这里将头文件已经正确包含到c_cpp_properties.json中代码中仍然不能自动补全&#xff0c; 将C_CPP插…

ant-design表格自动合并相同内容的单元格

表格自动合并相同内容的单元格 合并hooks import { TableColumnProps } from antdexport const useAutoMergeTableCell <T extends object>(dataSource: Array<T>,columns: Array<TableColumnProps> | Array<keyof T> ): Map<keyof T, Array<…

基于python+django+vue的农业管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的农…

57.【C语言】字符函数和字符串函数(strerror函数)

目录 11.strerror函数 *简单使用 *错误码打印 *实际的用法 *附:VS中errno.h对错误码的分类 11.strerror函数 *简单使用 strerror string error cpuscplus的介绍 点我跳转 翻译: 函数 strerror char * strerror ( int errnum ); 得到指向错误信息字符串(简称错误码)的指针…

配置环境-keil

配置keil -- 先将keil安装配置好&#xff0c;包括库 一、STM32 -- STM32是意法半导体&#xff08;意大利&#xff09;采用ARM公司设计的内核&#xff0c;设计一系列32位单片机芯片。 1、STM32开发的几种方式 2、STM32寄存器和库函数版本的工程创建 新建文件夹 复制相关文件…

web基础之RCE

简介&#xff1a;RCE称为远程代码执行漏洞&#xff1b;是互联网的一种安全漏洞&#xff1b;攻击者可以直接向后台服务器远程注入操作系统命令&#xff1b;从而操控后台系统&#xff1b;也是CTF比较常考的一个方面 1、eval执行 &#xff08;1&#xff09;分析后端代码&#xf…

git reset 几点疑问

疑问&#xff1a;使用 git reset --hard <commit-hash-from-branch-B> 将工作区状态reset为其他branch的某点。 如果当前工作区的分支&#xff08;比如 branch A&#xff09;上使用 git reset --hard 将其状态重置为另一个分支&#xff08;比如 branch B&#xff09;的某…

应急响应--Linux入侵检查思路及防御

在Linux系统中&#xff0c;应急响应和入侵检查是确保系统安全的重要环节。以下是一些关键的检查思路和防御措施&#xff1a; 应急响应–Linux入侵检查思路 检查系统用户&#xff1a; 使用cat /etc/passwd和cat /etc/shadow命令查看系统用户信息和密码信息&#xff0c;检查是否…