鸿蒙开发：从入门到实战！

news2024/10/5 12:59:30

一，默认模版中是容器Row或者Column中添加一个Text文本，我们可以尝试一下修改它的内容和样式，对UI语法有一个初体验：

   // 文本内容        Text("沉默的闪客")          // 字体大小          .fontSize(50)          //背景色          .backgroundColor(Color.Green)           // 字体粗细          .fontWeight(FontWeight.Bold)          //字体颜色          .fontColor(Color.Red)          //对齐方式          .textAlign(TextAlign.Start)          //宽度          .width(100)          //高度          .height(100)          //外边距          .margin({left:10})          //内边距          .padding({top:10})          // 内容边框          .border({ width: 1 })          // 设置文本超长时的显示方式          .textOverflow({ overflow: TextOverflow.Clip })          // 设置文本的最大行数          .maxLines(1)          // 设置文本字符间距          .letterSpacing(3)          // 文本基线偏移          .baselineOffset(0)          // 文本大小写展示          .textCase(TextCase.LowerCase)          // 设置文本装饰线样式及其颜色          .decoration({             type: TextDecorationType.LineThrough,             color: Color.Red        })

以上就是一个文本组件Text常用的一些设置，如果不知道是什么或者不知道都有什么，可以通过DevEco编译器里面的代码提示，组件后面添加英文点儿一下就能看到，大家可以按需选择，也可以多多尝试，其他组件通用。

二，如果上面的Text 看起来不尽兴，再来一个Image组件的内容和样式：

// 加载图片Image($r('app.media.ic_camera_master_ai_leaf'))   // 宽  .width(110)  // 高  .height(110)  // 外边距  .margin(15)  // 使用alt，在网络图片加载成功前使用占位图  .alt($r('app.media.icon'))  // 设置图片的填充效果  .objectFit(ImageFit.Cover)  .onClick(() => {  })  .onFinish(() => {  })  // 图片加载完成后，获取图片尺寸。  .onComplete((msg: { width: number,height: number }) => {    this.widthValue = msg.width    this.heightValue = msg.height  })  // 图像像素大小  .sourceSize({    width: 900,    height: 900  })  // Overlay 侧边栏浮在内容区上面  .overlay('png', { align: Alignment.Bottom  , offset: { x: 0, y: 20 } })

三，Button 按钮组件，可快速创建不同样式的按钮，同时可以在内部添加文本和进度效果。


// type: ButtonType.Normal 属性是按钮类型 包括，胶囊，原型和普通三种
Button('OK', { type: ButtonType.Normal, stateEffect: true })
   // 圆角
  .borderRadius(8)
  // 背景颜色
  .backgroundColor(0x317aff)
  // 宽
  .width(90)
  .onClick(() => {
    console.log('ButtonType.Normal')
  })
Button({ type: ButtonType.Normal, stateEffect: true }) {
  // 按钮上添加进度条和文本
  Row() {
    LoadingProgress()
    .width(20)
    .height(20)
    .margin({ left: 12 })
    .color(0xFFFFFF)
    Text('loading')
    .fontSize(12)
    .fontColor(0xffffff)
    .margin({ left: 5, right: 12 })
  }
  .alignItems(VerticalAlign.Center)
}
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)
.height(40)

Button('Disable', { type: ButtonType.Normal, stateEffect: false })
// 透明度
.opacity(0.4)
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)

上面说的都是基础组件，用来显示界面中的每一个效果的显示。

下面来说说容器组件，容器组件是包含基础组件实现界面的显示：

List是列表组件，用于展示列表数据，是容器布局中的重要组件，列表由多个ListItem构成。


// space：行间距
List({ space: 20, initialIndex: 0 }) {
  ForEach(this.arr, (item) => {
   // item
    ListItem() {
      Text('' + item)
        .width('100%').height(100).fontSize(16)
        .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
    }
  }, item => item)
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
.onScrollIndex((firstIndex: number, lastIndex: number) => {
  console.info('first' + firstIndex)
  console.info('last' + lastIndex)
})
.width('90%')

类似的容器组件 还有 Grid，Scroll 组件，组件的用法都大同小异,不再一一叙述，后面实战使用更高效，接下来要说一说基本的布局。

布局无非就是水平排列、竖向排列，层叠排列和弹性布局，由他们又繁衍出了各种各样的排列组合方式。下面进行一一讲述：

Row：横向排列，Row容器内子元素按照水平方向排列,可以包含所有基础组件。


Row() {
  Text('闪客1').width(110).height(50).textAlign(TextAlign.Center).backgroundColor('#e1e1e1')
  Image($r('app.media.icon')).width(50)
  Text('闪客3').width(110).height(50).textAlign(TextAlign.Center).backgroundColor('#ff96eeac')
  Text('闪客4').width(110).height(50).textAlign(TextAlign.Center).backgroundColor('#ffde6e6e')
}
.height('100%')

Column：竖向排列。Column容器内子元素按照垂直方向排列, 可以包含所有基础组件。

 Column() {
    Text('闪客1').width(110).height(50).width('100%').textAlign(TextAlign.Center).backgroundColor('#e1e1e1')
    Image($r('app.media.icon')).width(50)
    Text('闪客3').width(110).height(50).width('100%').textAlign(TextAlign.Center).backgroundColor('#ff96eeac')
    Text('闪客4').width(110).height(50).width('100%').textAlign(TextAlign.Center).backgroundColor('#ffde6e6e')
  }
  .justifyContent(FlexAlign.Center) // 竖直居中
  .height('100%')

Stack:层叠布局。容器内子元素的位置可以重叠，可以按照层次添加，可以把组件覆盖到另一个组件之上。

Stack() {
  Text('灰色闪客1').width(110).height(250).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#e1e1e1')
  Image($r('app.media.icon')).width(50)
  Text('绿色闪客3').width(110).height(150).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#ff96eeac')
  Text('红色闪客4').width(110).height(50).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#ffde6e6e')
}
.height('100%')

Flex：弹性布局，以弹性方式布局子组件的容器组件，有效的对容器中的子元素进行排列、对齐和分配剩余空间, 使用Flex可以同时支持横向布局和纵向布局：

Flex({ direction: FlexDirection.Row }) { // 子组件在容器主轴上布局
  Text('灰色闪客1').width(110).height(250).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#e1e1e1')
  Image($r('app.media.icon')).width(50)
  Text('绿色闪客3').width(110).height(150).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#ff96eeac')
  Text('红色闪客4').width(110).height(50).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#ffde6e6e')
}
.height('100%')

垂直布局：

Flex({ direction: FlexDirection.Column }) { // 子组件在容器主轴上布局
  Text('灰色闪客1').width(110).height(250).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#e1e1e1')
  Image($r('app.media.icon')).width(50)
  Text('绿色闪客3').width(110).height(150).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#ff96eeac')
  Text('红色闪客4').width(110).height(50).width('100%')
    .textAlign(TextAlign.Center).backgroundColor('#ffde6e6e')
}
.height('100%')

上面说了很多，都是基础的开发，组件，容器，做界面妥妥的，为了能够尽快熟悉，下面来一个登记界面的开发吧，再次熟悉熟悉开发的乐趣。

先来看登记界：

从整理布局来看是竖直布局，最外层使用Colomn容器或者Flex容器。

1，先来实现头部的图片显示


Image($r('app.media.ic_login'))
.width(130).height(60)  // 设置宽高
.margin({ top: 50, bottom: 70 }) //设置内边距 顶部和底部

2，再来实现下面的输入框，鸿蒙有TextInput组件可以实现输入操作


// 默认信息和输入信息
TextInput({ placeholder: '请输入账号', text: this.account })
  .type(InputType.Normal) // 输入类型
  .placeholderColor(Color.Gray) // 默认信息颜色
  .placeholderFont({ size: 15, weight: 2 }) // 默认信息的大小和权重
  .height(45)
  .onChange((value: string) => {

  })

3，再来实现下面的按钮，按钮使用上面说的Button来实现，按钮可以直接添加文本，也可以在内部添加文本组件。


Button() {
  Text('登录')
    .textAlign(TextAlign.Center)
    .width('100%')
    .fontSize(15)
    .fontColor(Color.White)
}.height(38)
.margin({ top: 20 })
.enabled(this.isEnableLogin)
.backgroundColor(this.isEnableLogin ? '#d81e06' : '#F9A3A1')
.onClick(()=>{
  this.login()
})

4，最先的注册和忘记密码，两个看成一个整体 通过 水平容器Row来实现，每一个是一个文本 使用Text来实现。

Row() {
  Text('账号注册')
    .fontSize(12)
    .padding(10)
  Blank() // 填充内部剩余空间，让两端的组件靠近边框
  Text('忘记密码？')
    .fontSize(12)
    .padding(10)
}.width('100%')

因为注册和忘记密码文本在两端，可以使用布局属性也可以使用Blank来实现，占用空余布局。

上面几部分完成 就成功的组成一个登录界面，当然还需要有一些点击操作和输入框文本变化监听，才是一个完整的登录功能页面。

最后

如果你想成为一名鸿蒙开发者，以下这些资料将是十分优质且有价值，让你的鸿蒙开发之路事半功倍！相对于网上那些碎片化的知识内容，这份学习资料的知识点更加系统化，更容易理解和记忆。

内容包含了：【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

鸿蒙Next全套VIP学习资料←点击领取！（安全链接，放心点击）

1.鸿蒙核心技术学习路线

​

2.大厂面试必问面试题

​

3.鸿蒙南向开发技术

​

 4.鸿蒙APP开发必备

​

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

​

这份全套完整版的学习资料已经全部打包好，朋友们如果需要可以点击→鸿蒙Next全套VIP学习资料：免费领取（安全链接，放心点击）

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

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

相关文章

docker 拉取镜像报错: error pulling image configuration:（kafka）

docker 拉取镜像报错: error pulling image configuration:（kafka）

一、问题描述 docker 拉取镜像报错: error pulling image configuration:（kafka） ERROR: error pulling image configuration: Get https://production.cloudflare.docker.com/registry-v2/docker/registry/v2/blobs/sha256/a6/a692873757c06a38279b61…
阅读更多...
日元话题热议如风暴席卷全球！

日元话题热议如风暴席卷全球！

阅读更多...
selenium中， quit 和close的区别

selenium中， quit 和close的区别

close时 """ close和quit的区别 close关闭当前页 (只是关闭了当前) quit离开整个浏览器 （走远了） """ from selenium import webdriver import time# 创建浏览器驱动对象 from selenium.webdriver.co…
阅读更多...
Sora简介与其对新媒体短视频行业的影响

Sora简介与其对新媒体短视频行业的影响

Sora简介 官网：https://openai.com/sora 当大家还在沉浸在GPT各种大语言模型的时候，OpenAI 悄无声息地发布了文生视频（text-to-video，简称 t2v）模型 Sora，这又是一个对AI冲击很大的突破了。Sora可以根据文…
阅读更多...
域内攻击 -----＞ Kerberoasting

域内攻击 -----＞ Kerberoasting

在域中，能拿到账户信息得攻击基本上有四个 域内用户枚举域内密码喷洒KerberoastingAS-REP Roasting 对于AS-REP Roasting，我们下一篇文章讲，而前两个，请参考我以前域内横向移动得文章。 那么我们今天就来聊聊Kerberoasting 1.S…
阅读更多...
KOL+UGC：解锁品牌内容营销新策略，增强用户参与与互动

KOL+UGC：解锁品牌内容营销新策略，增强用户参与与互动

在当今数字化时代，品牌与受众之间的互动性和参与感变得至关重要。其中，KOL和UGC（用户生成内容）的结合，为品牌创造了一种全新的内容创作模式。这种模式不仅增强了内容的吸引力，还极大地提升了品牌与受众之间…
阅读更多...
Vue3+vite+Tailwindcss 构建自适应页面 暗黑 高亮 主题(带源码)

Vue3+vite+Tailwindcss 构建自适应页面 暗黑 高亮 主题(带源码)

资源tailwind css：Tailwind CSS Templates - Tailwind UITailwind CSS Templates - Tailwind UITailwind CSS Templates - Tailwind UI 1、安装tailwindcss npm install -D tailwindcss postcss autoprefixer2、安装配置： npx tailwindcss init -p 运…
阅读更多...
商城项目【尚品汇】07分布式锁-2 Redisson篇

商城项目【尚品汇】07分布式锁-2 Redisson篇

文章目录 1 Redisson功能介绍2 Redisson在Springboot中快速入门（代码）2.1 导入依赖2.2 Redisson配置2.3 将自定义锁setnx换成Redisson实现（可重入锁） 3 可重入锁原理3.1 自定义分布式锁setnx为什么不可以重入3.2 redisson为什么可…
阅读更多...
perccli查看磁盘和Raid卡

perccli查看磁盘和Raid卡

1、安装 source /etc/profile chmod 755 /usr/sbin/perccli2、磁盘 perccli /c0 show all3、raid卡 cc perccli /c0 show cc 4、raid卡 pr perccli /c0 show patrolread
阅读更多...
【前端Vue】——初识Vue.js

【前端Vue】——初识Vue.js

💻博主现有专栏： C51单片机（STC89C516），c语言，c，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux&#xf…
阅读更多...
漏洞挖掘 | 记一次信息泄露到登入后台

漏洞挖掘 | 记一次信息泄露到登入后台

这次是项目上遇到的一个洞，打开页面是一个红红的登录页面 这里就不放图了，浓浓的红色气息~ 老样子抓登录包 虽然是明文传输但是爆破弱口令无果 f12大法，审计源代码，在其中一个js文件中发现了这个接口 拼接URL进行访问 感觉有点东…
阅读更多...
前端构建新玩法 Vite 上手与思考

前端构建新玩法 Vite 上手与思考

# Vite 的定义 Vite 是面向现代浏览器的一个更轻、更快的 Web 应用开发工具，核心基于 ECMAScript 标准原生模块系统（ES Modules）实现。 表象功能上看，Vite 可以取代基于 Webpack 的 vue-cli 或者 cra 的集成式开发工具&#xff0c…
阅读更多...
MAX7219（模拟SPI）驱动灯环的简单应用

MAX7219（模拟SPI）驱动灯环的简单应用

文章目录 一、MAX7219是什么？二、使用步骤1.硬件1.1 引脚说明1.2 应用电路1.2.1 驱动数码管1.2.2 驱动点阵 2.软件2.1 时序2.2 寄存器2.2.1 掉电寄存器2.2.2 译码模式寄存器2.2.3 亮度寄存器2.2.4 扫描寄存器2.2.5 显示测试寄存器 2.3 初始化2.4 控制左侧灯环特定位…
阅读更多...
支付平台界面感知评估

支付平台界面感知评估

目标： 了解本地用户在本地语言下对产品用户界面 (UI) 的感受和体验： 界面的目的是否对本地用户清晰，并且是否符合本地文化和国家标准；界面中的文本是否正确显示，是否存在语法、拼写或其他错误，包括品牌一致…
阅读更多...
Vue3【九】reactive 创建对象类型的响应式数据

Vue3【九】reactive 创建对象类型的响应式数据

Vue3【九】reactive 创建对象类型的响应式数据 reactive() 定义对象类型的响应式数据&#xff0c;可以任何类型的对象 默认开启对象的深度响应绑定 不能创建基本类型的响应式数据 案例截图 案例目录结构 案例代码 Person <template><div class"person">…
阅读更多...
IC-Light：图像打光控制和背景融合生产力工具，最全ComfyUI操作指南

IC-Light：图像打光控制和背景融合生产力工具，最全ComfyUI操作指南

IC-Light&#xff1a;图像打光控制和背景融合ComfyUI操作指南 IC-Ligh简介 IC-Light是一款由Controlnet作者lllyasviel创作的最新作品&#xff0c;用于实现操控图像光照效果的项目。当前该项目已经发布了两种类型的模型&#xff1a;文本条件模型和背景条件模型。这两款模型都…
阅读更多...
linux驱动学习（七）之混杂设备

linux驱动学习（七）之混杂设备

需要板子一起学习的可以这里购买&#xff08;含资料&#xff09;&#xff1a;点击跳转 一、混杂设备 混杂设备也叫杂项设备&#xff0c;是对普通的字符设备(struct cdev)的一种封装,设计目的就是为了简化字符设备驱动设计的流程。具有以下特点&#xff1a; 1) 主设备号为10&a…
阅读更多...
鸿蒙轻内核M核源码分析系列十七（2） 异常钩子函数的注册操作

鸿蒙轻内核M核源码分析系列十七（2） 异常钩子函数的注册操作

本文中所涉及的源码&#xff0c;以OpenHarmony LiteOS-M内核为例&#xff0c;均可以在开源站点https://gitee.com/openharmony/kernel_liteos_m 获取。鸿蒙轻内核异常钩子模块代码主要在components\exchook目录下。异常钩子函数的注册、解注册、异常钩子类型定义在utils\los_de…
阅读更多...
【Spring框架全系列】SpringBoot_3种配置文件_yml语法_多环境开发配置_配置文件分类（详细）

【Spring框架全系列】SpringBoot_3种配置文件_yml语法_多环境开发配置_配置文件分类（详细）

文章目录 1.三种配置文件2. yaml语法2.1 yaml语法规则2.2 yaml数组数据2.3 yaml数据读取 3. 多环境开发配置3.1 多环境启动配置3.2 多环境启动命令格式3.3 多环境开发控制 4. 配置文件分类 1.三种配置文件 问题导入 框架常见的配置文件有哪几种形式&#xff1f; 比如&#xf…
阅读更多...
Perfectly Clear WorkBench v4 解锁版安装教程 (图像修复增强工具)

Perfectly Clear WorkBench v4 解锁版安装教程 (图像修复增强工具)

前言 Perfectly Clear WorkBench 是一款图像修复工具&#xff0c;可以帮助用户对自己的图片素材进行修复&#xff0c;很多的照片因为拍摄问题&#xff0c;或者设备限制&#xff0c;会导致拍摄效果不好&#xff0c;使用这款软件可以进行一定程度的修复&#xff0c;当拍摄时亮度…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023