13-鸿蒙开发中的综合实战:华为登录界面

      大家好,欢迎来到鸿蒙开发系列教程!今天,我们将通过一个综合实战项目来实现一个华为登录界面。这个项目将涵盖输入框组件、按钮组件、文本组件和布局容器的使用,帮助你更好地理解和应用这些组件。无论你是初学者还是有一定经验的开发者,这个实战项目都将对你有所帮助。让我们开始吧!

1. 项目目标

我们将创建一个简单的登录界面,包含以下功能:

  1. 用户名输入框
  2. 密码输入框
  3. 登录按钮
  4. 忘记密码链接
  5. 注册链接

2.技术栈

  • 框架:鸿蒙开发框架(ArkUI)
  • 语言:TypeScript

3.项目结构

  1. 输入框组件TextField:用于接收用户的用户名和密码输入。
  2. 按钮组件Button:用于触发登录操作。
  3. 文本组件Text:用于显示提示信息和链接。
  4. 布局容器:使用 Column 和 Row 布局容器来组织界面元素。
步骤详解
  1. 创建项目

     

    首先,我们需要创建一个新的鸿蒙项目。你可以使用 DevEco Studio 创建一个新的 ArkUI 项目。

  2. 定义界面结构

     

    index.ets 文件中,定义登录界面的结构。

    import { Column, Row, Text, TextField, Button, Link, FlexAlign } from '@ohos/arkui';export default {data: {username: '',password: ''},build() {return (<Column width="100%" height="100%" alignItems="center" justifyContent="center"><Text style={{ fontSize: '24px', marginBottom: '20px' }}>华为登录</Text><TextFieldplaceholder="请输入用户名"type="text"value={this.data.username}style={{ width: '80%', marginBottom: '20px' }}onChange={(event) => this.updateUsername(event.value)}/><TextFieldplaceholder="请输入密码"type="password"value={this.data.password}style={{ width: '80%', marginBottom: '20px' }}onChange={(event) => this.updatePassword(event.value)}/><Buttontype="primary"style={{ width: '80%', marginBottom: '20px' }}onClick={() => this.handleLogin()}>登录</Button><Row width="80%" justifyContent="space-between"><Link href="#" style={{ color: '#007aff' }} onClick={() => this.handleForgotPassword()}>忘记密码?</Link><Link href="#" style={{ color: '#007aff' }} onClick={() => this.handleRegister()}>注册</Link></Row></Column>);},updateUsername(username) {this.data.username = username;},updatePassword(password) {this.data.password = password;},handleLogin() {console.log('用户名:', this.data.username);console.log('密码:', this.data.password);alert('登录成功!');},handleForgotPassword() {alert('忘记密码功能暂未实现');},handleRegister() {alert('注册功能暂未实现');}
    };
详细解释
  1. 布局容器

    • Column:作为最外层的容器,使用 Column 布局容器将所有控件垂直排列。
    • Row:用于水平排列“忘记密码”和“注册”链接。
  2. 文本组件

    • Text:用于显示登录标题。
    • Link:用于显示“忘记密码”和“注册”链接。
  3. 输入框组件

    • TextField:用于接收用户的用户名和密码输入。通过 onChange 事件更新数据模型中的值。
  4. 按钮组件

    • Button:用于触发登录操作。通过 onClick 事件处理登录逻辑。
  5. 数据模型

    • data:包含用户名和密码的初始值。
    • updateUsername 和 updatePassword:用于更新数据模型中的用户名和密码。
    • handleLogin:处理登录逻辑,打印用户名和密码,并显示登录成功的提示。
    • handleForgotPassword 和 handleRegister:处理忘记密码和注册链接的点击事件,目前只是显示提示信息。
样式说明
  • fontSize:设置文本的字体大小。
  • marginBottom:设置控件的下边距。
  • width:设置控件的宽度。
  • color:设置链接的颜色。
运行项目
  1. 打开 DevEco Studio。
  2. 选择你的项目并点击运行按钮。
  3. 在模拟器或真机上查看登录界面的效果。
总结

通过本文,你已经学会了如何在鸿蒙开发中实现一个简单的登录界面,涵盖了输入框组件、按钮组件、文本组件和布局容器的使用。这个实战项目不仅帮助你巩固了基础知识,还提供了一个实际的应用场景。希望这篇文章对你有所帮助,如果有任何问题或建议,欢迎在评论区留言交流。期待在鸿蒙开发的道路上与你共同成长!


希望这篇文章对你有所帮助,如果有任何问题或建议,欢迎随时留言交流!再见!

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

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

相关文章

告别复杂协作:Adobe XD的简化替代方案

Adobe XD是一款集成UI/UX设计和原型创建功能的设计平台。它允许用户进行网页、移动应用的设计&#xff0c;以及原型的绘制&#xff0c;并且能够将静态设计转化为动态的交互原型。尽管Adobe XD提供了这些功能&#xff0c;但它依赖于第三方插件&#xff0c;且插件库有限&#xff…

ctfshow web文件上传 web166-170

1.web166 通过源码上传发现只能传zip&#xff0c;尝试一下图片上传也不行 把随便一张图片打包成zip文件&#xff0c;上传后发现有一个下载的地方,猜测是文件上传&#xff0c;尝试zip伪协议发现失败&#xff0c;打包php文件也失败了&#xff0c;不知为什么&#xff0c;&#x…

二开CS—上线流量特征shellcode生成修改模板修改反编译打包

前言 免杀几乎讲的差不多了&#xff0c;今天讲个CS的二次开发。我们原生态的CS特征肯定都是被提取完的了&#xff0c;包括它的流量特征&#xff0c;而我们要做的就是把它的流量特征给打乱&#xff0c;还可以修改生成的后门&#xff0c;使其生成即免杀。 实验环境 CS4.4&…

7.《双指针篇》---⑦三数之和(中等偏难)

题目传送门 方法一&#xff1a;双指针 1.新建一个顺序表用来返回结果。并排序数组。 2.for循环 i 从第一个数组元素遍历到倒数第三个数。 3.如果遍历过程中有值大于0的则break&#xff1b; 4.定义左右指针,以及target。int left i 1, right n - 1; int target -nums[i];…

Muse-Ant-Desgin-Vue 改造成 Vite+Vue3

后台地址&#xff1a;https://www.creative-tim.com/product/muse-vue-ant-design-dashboard?refantdv-official 一、配置 ViteAntDesginVue 配置ViteAntDesginVue ViteAntDesginVue配置&#xff1a;https://blog.csdn.net/qq_17523181/article/details/143241626 安装vue-ro…

实习作假:阿里健康实习做了RABC中台,还优化了短信发送流程

最近有二本同学说&#xff1a;“大拿老师&#xff0c;能帮忙看下简历吗&#xff1f;” 如果是从面试官的角度来看&#xff0c;这个同学的实习简历是很虚假的。 但是我们一直强调的是&#xff1a;校招的实习简历是不能出现明显的虚假。 首先&#xff0c;你去公司做事情&#…

疯狂Java讲义-Java基础类库

Java基础类库 本章思维导图 5-0Java基础类库.png 用户互动 使用Scanner获取键盘输入 Scanner主要提供了两个方法来扫描输入 hasNextXxx(); 是否还有下一个输入项&#xff0c;其中Xxx可以是int、long等代表基本数据类型的字符串。 nextXxx(); 获取下一个输入项。Xxx的含义与前一…

[前端] 为网站侧边栏添加搜索引擎模块

前言 最近想给我的个人网站侧边栏添加一个搜索引擎模块&#xff0c;可以引导用户帮助本站SEO优化&#xff08;让用户可以通过点击搜索按钮完成一次对本人网站的搜索&#xff0c;从而实现对网站的搜索引擎优化&#xff09;。 最开始&#xff0c;我只是想实现一个简单的百度搜索…

汇聚全球前沿科技产品,北京智能科技产业展览会·世亚智博会

在北京这座古老而又充满现代气息的城市中&#xff0c;一场科技与创新的盛宴正悄然上演——北京智能科技产业展览会&#xff08;简称&#xff1a;世亚智博会&#xff09;&#xff0c;作为全球前沿科技的汇聚地&#xff0c;不仅展示了人工智能、5G通信、虚拟现实等尖端技术的最新…

JAVA基础:数组 (习题笔记)

一&#xff0c;编码题 1&#xff0c;数组查找操作&#xff1a;定义一个长度为10 的一维字符串数组&#xff0c;在每一个元素存放一个单词&#xff1b;然后运行时从命令行输入一个单词&#xff0c;程序判断数组是否包含有这个单词&#xff0c;包含这个单词就打印出“Yes”&…

猎板PCB2到10层数的科技进阶与应用解析

1. 单层板&#xff08;Single-sided PCB&#xff09; 定义&#xff1a;单层板是最基本的PCB类型&#xff0c;导线只出现在其中一面&#xff0c;因此被称为单面板。限制&#xff1a;由于只有一面可以布线&#xff0c;设计线路上有许多限制&#xff0c;不适合复杂电路。应用&…

2025年山东省考报名流程图解

2025年山东公务员考试备考开始 为大家整理了从笔试到录用的全部流程&#xff0c;希望可以帮助到你们&#xff01;参考2024年山东省考公告整理&#xff0c;请以最新公告为准&#xff01; 一、阅读公告和职位表 二、职位查询 三、网上报名 四、确认缴费 五、网上打印准考证 六、参…

修改elementUI等UI组件样式的5种方法总结,哪些情况需要使用/deep/, :deep()等方式来穿透方法大全

文章目录 方法 1:全局修改样式示例:修改 `ElMessage` 的背景色和字体颜色方法 2:修改特定类型的 `ElMessage` 样式-全局-不需要穿透示例:修改 `ElMessage` 成功类型的样式方法 3:通过 Scoped CSS 在组件内部修改-局部-不需要穿透方法 4:使用 JavaScript 动态修改样式-不需…

pandas——对齐运算+函数应用

引言&#xff1a;对齐运算是数据清洗的重要过程&#xff0c;可以按索引对齐进行运算&#xff0c;如果没对齐的位置则补NaN&#xff0c;最后也可以填充NaN 一、Series的对齐运算 1.Series 按行、索引对齐 import pandas as pds1 pd.Series(range(10, 20), indexrange(10)) s2…

# Ubuntu 达人九步养成记(1)

Ubuntu 达人九步养成记&#xff08;1&#xff09; 目录&#xff1a; 一、ubuntu基本安装 二、设置语言环境 三、设置服务器镜像源 四、在启动栏添加终端图标 五、使用apt更新和升级系统软件 六、使用apt安装软件 七、使用apt删除软件以及apt-get 八、deb格式及谷歌浏览…

优选算法第五讲:位运算模块

优选算法第五讲&#xff1a;位运算模块 1.常见的位运算总结2.判断字符是否唯一3.丢失的数字4.两整数之和5.只出现一次的数字II6.消失的两个数字 1.常见的位运算总结 2.判断字符是否唯一 链接: link class Solution { public:bool isUnique(string astr) {if(astr.size() >…

计算机视觉算法真的难学吗?这些技巧让你轻松掌握

在当今这个数字化迅猛发展的时代&#xff0c;计算机视觉作为人工智能的重要分支&#xff0c;正在逐渐改变我们的生活和工作方式。很多人可能会觉得计算机视觉算法难以掌握&#xff0c;尤其是在面对复杂的数学和编程时&#xff0c;常常会感到无从下手。不过&#xff0c;实际上&a…

基于YOLO11/v10/v8/v5深度学习的老鼠智能检测系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…

机器学习—前向传播的一般实现

可以写一个函数来实现一个密集的层&#xff0c;那是神经网络的单层&#xff0c;所以定义稠密函数&#xff0c;它将上一层的激活作为输入以及给定层神经元的参数w和b。看下边图片所展示的例子&#xff0c;把所有这些权重向量堆叠成一个矩阵&#xff0c;wnp.array([[1,-3,5][2,4,…

高清烟花视频素材下载网站推荐

无论是庆祝节日、婚礼&#xff0c;还是各种欢庆活动&#xff0c;烟花总能瞬间点燃气氛&#xff0c;带来视觉上的震撼。在视频作品中加入绚丽的烟花瞬间&#xff0c;能够立刻提升画面的冲击力和节庆氛围。那么&#xff0c;高清烟花视频素材去哪下载呢&#xff1f;今天&#xff0…