【HarmonyOS NEXT开发】鸿蒙界面开发起步，ArkUI(方舟开发框架)介绍，知识点详解

2024-08-31 07:28
文章标签 知识点 详解 介绍 开发 界面 框架 起步 next 鸿蒙 harmonyos 方舟 arkui

本文主要是介绍【HarmonyOS NEXT开发】鸿蒙界面开发起步，ArkUI(方舟开发框架)介绍，知识点详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

【HarmonyOS NEXT开发】鸿蒙界面开发起步，ArkUI(方舟开发框架)介绍，知识点详解

大纲

主题：鸿蒙界面开发起步，ArkUI(方舟开发框架)介绍，知识点详解。、

内容摘要：带领直播课的观众一步步熟悉ArkUI的基本框架，引导观众实现鸿蒙界面开发的起步，

介绍布局思路，组件属性方法，图片组件…

界面开发起步

从console.log()过渡到struct Index部分的代码，先聚焦于build(){}部分的代码，build()部分是核心，起构建界面的作用。

在ArkTS中，组件是UI的基本构建块。每个组件都是一个可重用的UI单元，可以有自己的状态、样式和行为。ArkTS的组件就类似于其他框架中组件的概念(如React、Vue)。

build() {RelativeContainer() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%')
}

  • build()是一个函数，定义了如何构建UI组件的布局和内容。

  • RelativeContainer()是一个布局容器，用于在相对位置放置子组件，所谓相对指的是允许子组件根据其父容器或其他子组件的相对位置进行排列。

  • Text(this.message)Text是一个组件，用于显示传入的变量this.message的值。

  • id('HelloWorld')为 Text 组件设置一个唯一的标识符 id 为 'HelloWorld'。

  • .fontSize(50) 设置文本的字体大小为 50 像素。

  • .fontWeight(FontWeight.Bold) 设置文本的字体粗细为粗体。

  • .alignRules({...})用于定义组件的对齐规则。

    • center和middle都只是对齐规则的名称，anchor:'__container__'中__container__表示组件的父容器，在这个上下文中，它意味着组件将相对于其直接父级(即RelativeContainer)进行对齐。VerticalAlign.Center表示垂直居中对齐，HorizontalAlign.Center表示水平居中对齐。

    • center: { anchor: ‘_container_’, align: VerticalAlign.Center }这意味着将文本垂直居中对齐到容器（__container__）的中心。

    • middle: { anchor: ‘_container_’, align: HorizontalAlign.Center }这意味着将文本水平居中对齐到容器（__container__）的中间。

  • .height('100%') 和 .width('100%')

    • ``.height(‘100%’)和.width(‘100%’)` 设置容器的高度和宽度为其父容器的 100%，即它会充满整个父容器。
    • 这里是为RelativeContainer进行设置，会占据整个屏幕或组建的显示空间。

在这里插入图片描述

界面开发-布局思路

ArkUI(方舟开发框架)是一套构建鸿蒙应用界面的框架，构建页面的最小单位就是组件。

在这里插入图片描述

组件

  • 基础组件：界面呈现的基础元素。

    如：文字、图片、按钮等。

  • 容器组件：控制基础组件的布局排布。

    如：Row行、Column列。

在这里插入图片描述

布局思路：先排版、再放内容。(排好位置后填空即可。)

语法

  • 容器组件：行Row、列Column
容器组件() {// 内容
}
  • 基础组件：文字Text、图片
基础组件(参数)

在这里插入图片描述

build() {Column(){Text('小说简介')Row(){Text('都市')Text('都市生活')Text('情感')Text('男频')}}
}
组建的属性方法

需求：美化组件外观效果 -> 组件的属性方法

具体需求：

  • 将"小说简介"进行加粗，增大字号
  • 将标签行中的标签设置背景颜色为灰色，并且标签之间需要有间隔。
  • 将"小说简介"和"都市"做左对齐
组件(){}.属性方法1(参数).属性方法2(参数).属性方法3(参数)...

.width(200) // 宽度
.height(200) // 高度
.backgroundColor(Color.Pink) // 背景色
.fontSize(24) // 字体大小
.fontWeight(FontWeight.Bold) // 字体粗细

build() {RelativeContainer() { // 新增RelativeContainer// 标题部分Text('小说简介').fontWeight(FontWeight.Bold).fontSize(18)  // 设置标题字体大小.id('Brief Introduction').margin({ bottom: 10 }) // 设置标题与下方标签的间距.alignRules({left: { anchor: '__container__', align: HorizontalAlign.Start }, // 左对齐top: { anchor: '__container__', align: VerticalAlign.Top } // 顶部对齐})// 标签行部分Row() {// 都市标签Text('都市').backgroundColor(Color.Gray).padding({ left: 10, right: 10, top: 5, bottom: 5 }) // 添加内边距.margin({ right: 5 }) // 标签之间的间距.borderRadius(5) // 圆角效果// 都市生活标签Text('都市生活').backgroundColor(Color.Gray).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ right: 5 }).borderRadius(5)// 情感标签Text('情感').backgroundColor(Color.Gray).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ right: 5 }).borderRadius(5)// 男频标签Text('男频').backgroundColor(Color.Gray).padding({ left: 10, right: 10, top: 5, bottom: 5 }).borderRadius(5)}.margin({ top: 40 }) // 设置Row与标题之间的间距.alignRules({left: { anchor: '__container__', align: HorizontalAlign.Start }, // 左对齐top: { anchor: 'Brief Introduction', align: VerticalAlign.Bottom } // 相对标题下方对齐})}.height('100%').width('100%').padding({ top: 20, left: 15, right: 15 }) // 整体的外边距}

在这里插入图片描述

字体颜色
Text('小说简介').fontColor('#df3c50') // # 开头的十六进制.fornColor(Color.Orange) // Color.颜色名

一般来说，设计图中会标注颜色的十六进制数据，直接按照数据来即可。

文字溢出省略号、行高

在这里插入图片描述

  • 文字溢出省略(设置文本超长时的显示方式)

    • 语法：

      .textOverflow({overflow: TextOverflow.XXX
})

    • 注意：需要配合.maxLines(行数)使用

    build() {Column(){Text('HarmonyOS开发初体验').width('100%').lineHeight(50).fontSize(20).fontWeight(FontWeight.Bold)Text('方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法，丰富的UI功能（组件、布局、动画以及交互）').width('100%').lineHeight(24).textOverflow({overflow: TextOverflow.Ellipsis}).maxLines(2)}.width('100%')
}
Image 图片组件

语法：Image(图片数据源) 支持 网络图片资源 和 本地图片资源

  • 网络图片资源
Image('https//www.xxx.com/images/logo.png')

build() {Column(){Image('https://oss.cyzone.cn/2021/0526/a3f57e509946c68bec9c08ee2bcac5bf.jpg?x-oss-process=image/resize,w_1280,m_mfit/format,jpg/quality,q_95').width('100%') // 设置图片宽度占满容器.height('auto') // 高度根据宽度自动调整.objectFit(ImageFit.Contain) // 确保图片按比例缩放以完整显示}.height('100%').width('100%')
}

如果直接加载图片，图片并不能够在容器中完整显示。

  • 本地图片资源

将本地图片存放在固定目录src/main/resources/base/media中

Image($r('app.media.文件名'))

img

以鸿蒙的图片做例子，

build() {Column(){Image($r('app.media.img')).width('100%') // 设置图片宽度占满容器.height('auto') // 高度根据宽度自动调整.objectFit(ImageFit.Contain) // 确保图片按比例缩放以完整显示}.height('100%').width('100%')
}
输入框和组件

需求：实现登录和注册的排版 -> 输入框 和 按钮组件

在这里插入图片描述

TextInput({placeholder: '占位符文本' 
}).type(InputType.Password)
  • placeholder 提示文本
  • type
    • Normal 基本输入模式，无特殊限制
    • Password 密码输入模式
Button('按钮文本')

build() {// Column({space:15}) 在竖直方向上控制组件之间的间隔Column({space:15}){TextInput({placeholder:'请输入用户名'})TextInput({placeholder:'请输入密码'}).type(InputType.Password)Button('登录').width(200)}
}

入模式，无特殊限制

  • Password 密码输入模式
Button('按钮文本')

build() {// Column({space:15}) 在竖直方向上控制组件之间的间隔Column({space:15}){TextInput({placeholder:'请输入用户名'})TextInput({placeholder:'请输入密码'}).type(InputType.Password)Button('登录').width(200)}
}

这篇关于【HarmonyOS NEXT开发】鸿蒙界面开发起步，ArkUI(方舟开发框架)介绍，知识点详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1123266。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
基本知识点

基本知识点

1、c++的输入加上ios::sync_with_stdio(false);  等价于 c的输入，读取速度会加快（但是在字符串的题里面和容易出现问题） 2、lower_bound()和upper_bound() iterator lower_bound( const key_type &key ): 返回一个迭代器，指向键值>= key的第一个元素。 iterator upper_bou
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2