当前位置: 首页 > news >正文

鸿蒙学习笔记:用户登录界面

文章目录

  • 1. 提出任务
  • 2. 完成任务
    • 2.1 创建鸿蒙项目
    • 2.2 准备图片资源
    • 2.3 编写首页代码
    • 2.4 启动应用
  • 3. 实战小结

1. 提出任务

  • 本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素:一张图片增添视觉感,两个分别用于账号与密码的文本输入框,一个醒目的登录按钮助力用户登录操作,还有一个注册文本为新用户提供入口,以此构建简洁且实用的登录交互场景。

2. 完成任务

2.1 创建鸿蒙项目

  • 创建项目- ArkUILogin
    在这里插入图片描述

2.2 准备图片资源

  • bear.png拷贝到media目录
    在这里插入图片描述

2.3 编写首页代码

  • 首页 - Index.ets
    在这里插入图片描述
@Entry
@Component
struct Index {@State message: string = '用户登录';build() {Column() {// 图片Image($r('app.media.bear')).width(180).height(180).margin({top: 80, bottom: 80})// 账号TextInput({placeholder: '请输入账号'}).maxLength(80).type(InputType.Number).margin({left: 20, right: 20, bottom: 10})// 密码TextInput({placeholder: '请输入密码'}).maxLength(80).type(InputType.Password).margin({left: 20, right: 20})// 登录Button(('登录'), {type: ButtonType.Capsule}).width(200).fontSize(30).fontWeight(FontWeight.Medium).padding({top: 10, bottom: 10}).margin({top: 70, bottom: 20})// 注册Text('注册').fontColor(Color.Blue).fontSize(30).fontWeight(FontWeight.Medium)}.width('100%')}
}
  • 代码说明:这段代码是用ETS语言编写的,用于构建一个用户登录界面的UI组件,定义了一个名为Index的组件,其中包含状态message用于存储登录提示信息。build函数定义了界面布局,包括一个图片、账号和密码输入框、登录按钮以及注册文本链接。布局使用Column垂直排列,各控件通过链式调用来设置属性,如尺寸、边距和字体样式。登录按钮和注册文本具有不同的样式和间距设置。

2.4 启动应用

  • 查看用户登录界面
    在这里插入图片描述

3. 实战小结

  • 本次实战通过 ArkUI 成功构建了一个用户登录界面。从创建鸿蒙项目“ArkUILogin”开始,精心准备图片资源并放置于指定目录。在编写首页代码时,合理布局一个图片、两个文本输入框、一个登录按钮与一个注册文本,利用组件属性精准设置样式与功能。最终成功启动应用,呈现出预期的登录界面。此过程不仅熟悉了 ArkUI 的基本操作,还掌握了鸿蒙应用界面搭建的关键步骤,为后续开发更复杂的鸿蒙应用奠定了坚实基础,积累了宝贵的实践经验。

相关文章:

鸿蒙学习笔记:用户登录界面

文章目录 1. 提出任务2. 完成任务2.1 创建鸿蒙项目2.2 准备图片资源2.3 编写首页代码2.4 启动应用 3. 实战小结 1. 提出任务 本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素:一张图片增添视觉感,两个分别用于账号与密码的文本输入框&#…...

无人机航测系统技术特点!

一、无人机航测系统的设计逻辑 无人机航测系统的设计逻辑主要围绕实现高效、准确、安全的航空摄影测量展开。其设计目标是通过无人机搭载相机和传感器,利用先进的飞行控制系统和数据处理技术,实现对地表信息的全方位、高精度获取。 需求分析&#xff1…...

《算法ZUC》题目

判断题 ZUC算法LFSR部分产生的二元序列具有很低的线性复杂度。 A.正确 B.错误 正确答案A 单项选择题 ZUC算法驱动部分LFSR的抽头位置不包括( )。 A.s15 B.s10 C.s7 D.s0 正确答案C 单项选择题 ZUC算法比特重组BR层主要使用了软件实现友好的…...

配置flutter 解决andriod studio报错 no device selected

flutter配置好后 明明下载好了模拟器 但是在andriod studio 找不到设备 显示no devices 这个时候需要我们配置一下flutter关联的android sdk的路径和文件夹 就可以解决了 flutter config --android-sdk 自己android studio的路径 这样配置就可以解决了~...

docker搭建Redis集群及哨兵(windows10环境,OSS Cluster)

一、基本概念 Redis:即 "Remote DIctionary Server" ,翻译为“远程字典服务器”。从字面意义上讲,它指的是一个远程的字典服务,意味着它是一个可以远程访问的服务,主要用于存储键值对(key-value pairs&…...

信息化基础知识——数字政府(山东省大数据职称考试)

大数据分析应用-初级 第一部分 基础知识 一、大数据法律法规、政策文件、相关标准 二、计算机基础知识 三、信息化基础知识 四、密码学 五、大数据安全 六、数据库系统 七、数据仓库. 第二部分 专业知识 一、大数据技术与应用 二、大数据分析模型 三、数据科学 数字政府 大数…...

信息安全实训室网络攻防靶场实战核心平台解决方案

一、引言 网络安全靶场,作为一种融合了虚拟与现实环境的综合性平台,专为基础设施、应用程序及物理系统等目标设计,旨在向系统用户提供全方位的安全服务,涵盖教学、研究、训练及测试等多个维度。随着网络空间对抗态势的日益复杂化…...

Nginx主要知识点总结

1下载nginx 到nginx官网nginx: download下载nginx,然后解压压缩包 然后双击nginx.exe就可以启动nginx 2启动nginx 然后在浏览器的网址处输入localhost,进入如下页面说明nginx启动成功 3了解nginx的配置文件 4熟悉nginx的基本配置和常用操作 Nginx 常…...

PySide6程序框架设计

pyside6有一个优点自动适配高分辨ui pyqt5需要自己写这部分逻辑 1、主程序代码 DINGSHI01Main.py # -*- coding: utf-8 -*- import sys,time,copy from PySide6.QtWidgets import QWidget,QApplication from PySide6.QtCore import Qt from PySide6 import QtCore, QtGui, Q…...

「九」HarmonyOS 5 端云一体化实战项目——「M.U.」应用云侧开发云数据库

1 立意背景 M. 代表 “我”,U. 代表 “你”,这是一款用于记录情侣从相识、相知、相恋、见家长、订婚直至结婚等各个阶段美好记忆留存的应用程序。它旨在为情侣们提供一个专属的空间,让他们能够将一路走来的点点滴滴,如初次相遇时…...

记录:virt-manager配置Ubuntu arm虚拟机

virt-manager(Virtual Machine Manager)是一个图形用户界面应用程序,通过libvirt管理虚拟机(即作为libvirt的图形前端) 因为要在Linux arm环境做测试,记录下virt-manager配置arm虚拟机的过程 先在VMWare中…...

clickhouse-介绍、安装、数据类型、sql

1、介绍 ClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库(DBMS),使用C语言编写,主要用于在线分析处理查询(OLAP),能够使用SQL查询实时生成分析数据报告。 OLAP(On-Line A…...

【shell】常用100个shell命令使用讲解

【shell】常用100个shell命令使用讲解 【一】文件操作命令【二】搜索命令【三】目录操作命令【四】权限操作命令【五】网络操作命令【六】进程和系统控制命令【七】文本操作命令【八】压缩与解压命令【九】磁盘使用管理命令【十】包管理命令【十一】进程管理命令【十二】环境变…...

Git-分支(branch)常用命令

分支 我们在做项目开发的时候,无论是软件项目还是其他机械工程项目,我们为了提高效率以及合理的节省时间等等原因,现在都不再是线性进行,而是将一个项目抽离出诸进行线,每一条线在git中我们就叫做分支,bran…...

谈谈es6 Map 函数

发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。 Map 是 ES6 中引入的一种新的数据结构,它类似于对象(Object),但与对象相比&#…...

微信小程序:实现节点进度条的效果;正在完成的节点有动态循环效果;横向,纵向排列

参考说明 微信小程序实现流程进度功能 - 知乎 上面的为一个节点进度条的例子&#xff0c;但并不完整&#xff0c;根据上述代码&#xff0c;进行修改完善&#xff0c;实现其效果 横向效果 代码 wxml <view classorder_process><view classprocess_wrap wx:for&quo…...

【Unity3D】无限循环列表(扩展版)

基础版&#xff1a;【Unity技术分享】UGUI之ScrollRect优化_ugui scrollrect 优化-CSDN博客 using UnityEngine; using UnityEngine.UI; using System.Collections.Generic;public delegate void OnBaseLoopListItemCallback(GameObject cell, int index); public class BaseLo…...

MacOS 命令行详解使用教程

本章讲述MacOs命令行详解的使用教程&#xff0c;感谢大家观看。 本人博客:如烟花般绚烂却又稍纵即逝的主页 MacOs命令行前言&#xff1a; 在 macOS 上,Terminal&#xff08;终端) 是一个功能强大的工具&#xff0c;它允许用户通过命令行直接与系统交互。本教程将详细介绍 macOS…...

redis集群安装部署 redis三主三从集群

redis集群安装部署 redis三主三从集群 1、下载redis2、安装redis集群 三主三从3、配置redis开机自启动3.1、建立启动脚本3.2、复制多份redis启动脚本给集群使用3.3、添加可执行权限3.4、配置开机自启动 1、下载redis 本次redis安装部署选择当前最新的稳定版本7.4.1 下载链接: …...

第十二课 Unity 内存优化_内存工具篇(Memory)详解

内存&#xff08;Memory&#xff09; unity 内存部分也是优化过程中非常重要的一个环节&#xff0c;也会影像渲染过程中的同步等待与带宽问题。因此内存的优化也可能会给我们渲染开销带来精简&#xff0c;今天我们先来了解unity中的内存与使用到的内存工具。 Unity中的内存 托…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...

WinUI3开发_使用mica效果

简介 Mica(云母)是Windows10/11上的一种现代化效果&#xff0c;是Windows10/11上所使用的Fluent Design(设计语言)里的一个效果&#xff0c;Windows10/11上所使用的Fluent Design皆旨在于打造一个人类、通用和真正感觉与 Windows 一样的设计。 WinUI3就是Windows10/11上的一个…...

Python编码格式化之PEP8编码规范

文章目录 概要PEP8编码风格py文本组织规范命名规范编码风格 PEP8编码检查工具pylintflake8PyCharm中配置检查工具 PEP8编码格式化工具blackautopep8PyCharm配置格式化工具本地git配置hook 总结 概要 在Python项目开发过程中&#xff0c;代码的可读性和一致性对于项目的长期维护…...