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

news2024/11/24 6:03:04

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

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>
                    <TextField
                        placeholder="请输入用户名"
                        type="text"
                        value={this.data.username}
                        style={{ width: '80%', marginBottom: '20px' }}
                        onChange={(event) => this.updateUsername(event.value)}
                    />
                    <TextField
                        placeholder="请输入密码"
                        type="password"
                        value={this.data.password}
                        style={{ width: '80%', marginBottom: '20px' }}
                        onChange={(event) => this.updatePassword(event.value)}
                    />
                    <Button
                        type="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.coloradmin.cn/o/2234762.html

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

相关文章

LCL三相并网逆变器simulink仿真+说明文档

背景描述&#xff1a; 详细解析了LCL三相并网逆变器的工作原理&#xff0c;强调了准PR比例谐振控制的重要性&#xff0c;讨论了电感、电容参数选择及保护电路设计。通过仿真结果展示了逆变器性能优化的方法&#xff0c;以提升系统效率和稳定性。 模型介绍&#xff1a; 整体模…

突破1200°C高温性能极限!北京科技大学用机器学习合成24种耐火高熵合金,室温延展性极佳

在工程应用中&#xff0c;如燃气轮机、核反应堆和航空推进系统&#xff0c;对具备优异高温机械性能的金属合金需求十分旺盛。由于材料熔点的固有限制&#xff0c;传统镍基 (Ni) 高温合金的耐温能力已接近极限。为满足开发高温结构材料的需求&#xff0c;耐火高熵合金 (RHEAs) 于…

使用GPT-SoVITS训练语音模型

1.项目演示 阅读单句话 1725352713141 读古诗 1725353700203 2.项目环境 开发环境&#xff1a;linux 机器配置如下&#xff1a;实际使用率百分之二十几&#xff0c; 3.开发步骤 1.首先是准备数据集&#xff0c;要求是wav格式&#xff0c;一到两个小时即可&#xff0c; 2.…

react18中redux-promise搭配redux-thunk完美简化异步数据操作

用过redux-thunk的应该知道&#xff0c;操作相对繁琐一点&#xff0c;dispatch本只可以出发plain object。redux-thunk让dispatch可以返回一个函数。而redux-promise在此基础上大大简化了操作。 实现效果 关键逻辑代码 store/index.js import { createStore, applyMiddlewar…

【JS学习】10. web API-BOM

文章目录 Web APIs - 第5天笔记js组成window对象定时器-延迟函数location对象navigator对象histroy对象本地存储&#xff08;今日重点&#xff09;localStorage&#xff08;重点&#xff09;sessionStorage&#xff08;了解&#xff09;localStorage 存储复杂数据类型 综合案例…

The First项目报告:MANTRA如何实现世界金融区块链化?

RWA&#xff08;现实世界资产&#xff09;代币化被视为加密领域的下一个财富增长点&#xff0c;它作为桥梁连接传统金融与加密世界&#xff0c;潜力覆盖数十万亿美元资产市场。尽管面临技术、监管及市场挑战&#xff0c;RWA项目正逐步获得广泛关注。MANTRA是一个Cosmos SDK基L1…

DAY21|二叉树Part08|LeetCode: 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

目录 LeetCode: 669. 修剪二叉搜索树 基本思路 C代码 LeetCode: 108.将有序数组转换为二叉搜索树 基本思路 C代码 LeetCode: 538.把二叉搜索树转换为累加树 基本思路 C代码 LeetCode: 669. 修剪二叉搜索树 力扣代码链接 文字讲解&#xff1a;LeetCode: 669. 修剪二叉搜…

大模型LLama3!!!Ollama下载、部署和应用(保姆级详细教程)

首先呢&#xff0c;大家在网站先下载ollama软件 这就和anaconda和python是一样的 废话不多说 直接上链接&#xff1a;Download Ollama on Windows 三个系统都支持 注意&#xff1a; 这里的Models&#xff0c;就是在上面&#xff0c;大家点开之后&#xff0c;里面有很多模型…

C++转义序列

\b \b是一个退格符&#xff08;backspace character&#xff09;&#xff0c;它的作用是将光标向左移动一个位置&#xff0c;但并不会删除光标位置上的字符。这个行为在某些情况下可能会导致视觉上的字符“消失”&#xff0c;但实际上这些字符仍然存在于输出缓冲区中&#xf…

[渲染层网络层错误] net::ERR_CONTENT_LENGTH_MISMATCH 问题解决

问题描述 问题背景 微信小程序访问后端img资源的时候&#xff0c;偶尔出现这个感叹号&#xff0c;图片加载不出来&#xff0c;但是对应的url贴出来在浏览器中访问&#xff0c;或者重新加载是可以访问的。 错误描述 经查询前端报错 [渲染层网络层错误] net::ERR_CONTENT_LE…

初始JavaEE篇 —— 网络编程(1):基础的网络知识

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 前言&#xff1a; 网络的发展历程 网络通信基础 IP地址 端口号 网络协议 网络通信的流程 前言&#xff1a; 我们现在所…

基于SSM+小程序的高校寻物平台管理系统(失物1)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 本基于微信小程序的高校寻物平台有管理员&#xff0c;用户以及失主三个角色。 1、管理员功能有个人中心&#xff0c;用户管理&#xff0c;失主管理&#xff0c;寻物启示管理&#xff0c;拾…

leetcode21:合并两个有序列表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[]示…

【c++丨STL】vector的使用

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C、STL 目录 前言 vector简要介绍 一、vector的默认成员函数 构造函数(constructor) 析构函数(destructor) 赋值运算符重载operator 二、vector的容量接口…

【数据分享】2024年我国省市县三级的生活服务设施数量(46类设施/Excel/Shp格式)

人才市场、售票处、旅行社等生活服务设施的配置情况是一个城市公共基础设施完善程度的重要体现&#xff0c;一个城市生活服务设施种类越丰富&#xff0c;数量越多&#xff0c;通常能表示这个城市的公共服务水平越高&#xff01; 本次我们为大家带来的是我国各省份、各地级市、…

自定义SpringBoot的Start应用场景及常见错误

开发背景 为了将环信(即使通讯)的模块独立出来实现复用&#xff0c;提供给多个模块使用。 实现方式 1.目录结构 2.添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> &l…

gdb和make工具

gdb工具&#xff1a; GDB的主要功能 断点设置&#xff1a;允许开发者在特定的代码行设置断点&#xff0c;当程序执行到该行时会自动暂停&#xff0c;方便开发者进行调试和分析。 变量查看与修改&#xff1a;在程序运行过程中&#xff0c;可以查看和修改变量的值&#xff0c;以…

Ceisum无人机巡检视频投放

公司投标内容有个视频投放的功能动画&#xff0c;原本想实现这么一个效果&#xff1a; 案例效果来自别人的展示作品&#xff0c;Leader一眼就相中了这个效果&#xff0c;可惜别人的终究是别人的&#xff0c;又不会白白给你&#xff0c;终究是要自己动手尝试。 动画方面的展示…

Spring:Bean(创建方式,抽象继承,工厂Bean,生命周期)

1&#xff0c;Bean的创建 1.1&#xff0c;调用构造器创建Bean 调用Bean类的无参构造函数来创造对象&#xff0c;因此要求提供无参构造函数。在这种情况下class元素是必须的&#xff0c;值就是Bean对象的实现类。 如果采用设值注入&#xff0c;Spring容器将使用默认的构造器来创…

ViT面试知识点

文章目录 VITCLIPBlipSAMLSegFast TransformerYOLO系列问题 BatchNorm是对一个batch-size样本内的每个特征做归一化&#xff0c;LayerNorm是对每个样本的所有特征做归一化。 Layer Normalization&#xff08;层归一化&#xff0c;简称LayerNorm&#xff09;是一种在深度学习中…