鸿蒙开发之ArkUI 界面篇 十八 京东app登录界面实现

news2024/10/7 3:40:36

鸿蒙UI实现某东App登录界面,如下图鲜果,我们先分析整体架构是什么!

 我们整体架构分析,分为区域1、2、3、4、5、6、7、8、9区域,下图:

 

8个区域的整体方向是垂直的,容器使用的是Column,区域1使用的是子容器Row,左边是Image,右边是Text,区域2是Image,区域3第一感觉是Button,Button的话文字间距只能是空格隔开,这适配就出问题了,实现是子容器Row+背景圆角,左边是Text,最右边是Row+Text+Image,区域4是TextInput,区域5是Row+Checkbox+Text+Span,区域6是Button,区域7是Row+3个Text,取悦8是Text,区域9是Row+4个Image,取悦8和9之间使用了弹性控件Blank,这歌控件能是9始终在底部,先实现第一部分,效果如下:

代码如下:

@Entry


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

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

相关文章

欧姆龙(Omron)协议解析

1. 协议概述    欧姆龙(Omron)是来自日本的知名电子和自控设备制造商,其中、小型PLC在国内市场有较高的占有率,有CJ、CM等系列。PLC可以支持Fins、Host link等协议进行通信。 支持以太网的欧姆龙PLC CPU、以太网通信模块根据型号的不同,一般…

dockertop提示Failed to fetch extensions

解决办法:重装dockertop 第一步:卸载当前的dockertop 如果卸载过程中存在AlibabaProtect的相关软件关不掉,那么参考这篇文章:卸载AlibabaProtect 第二步:删除C:\Program Files路径下的Docker文件夹 第三步&#xff1…

代码随想录Day 62|Floyd 算法精讲、A \* 算法精讲 (A star算法),题目:97. 小明逛公园、127. 骑士的攻击

提示:DDU,供自己复习使用。欢迎大家前来讨论~ 文章目录 图论part11Floyd 算法精讲题目:97. 小明逛公园解题思路: A \* 算法精讲 (A star算法)题目:127. 骑士的攻击问题描述算法选择解题思路C代…

什么是重卡充电桩?

有什么广告?没有广告,纯纯的介绍。 在政策与市场双重驱动下,充电桩市场已经开启加速模式,行业的火苗越烧越旺。同时,随着新能源重卡的广泛普及,重卡充电桩也迎来了新的发展机遇。 此种背景下 &#xff0c…

Pikachu-敏感信息泄露

直接访问页面,查看页面源码 如:返回了测试账号信息; 例如:返回服务端的信息

仿RabbitMQ实现消息队列三种主题的调试及源码

文章目录 开源仓库和项目上线广播交换模式下的测试直接交换模式下的测试主题交换模式下的测试 开源仓库和项目上线 本项目已开源到下面链接下的仓库当中 仿RabbitMQ实现消息队列 广播交换模式下的测试 消费者客户端 在进行不同测试下,消费者客户端只需要改变交换机…

【Blender Python】4.获取场景对象的几种方式

概述 有时候我们需要获取场景中已经添加或存在的对象。本节就总结在Blender Python中获取场景中对象的一些方法。 通过名称获取 py.data的objects()方法返回一个对象集合,可以使用键名或者下标形式获取具体的对象。 在默认新建的场景中,存在三个对象…

初始Linux(二)基础命令

前言: 之前那一篇我们已经介绍了一部分的基础命令,当然那只不过是九牛一毛,本篇我们继续介绍一些比较重要且需要掌握的基础命令。 mv命令: 其实这个命令有两个功能,一个是移动(剪切)文件&#…

可查询全部快递api接口分析

使用三方平台该API接口需要先注册后申请此API接口。申请后可直接在线请求接口数据。 该api接口可自动识别单号信息。调用简单方便,性价比高,一条链接即可。 API接口地址为:https://www.tanshuapi.com/market/detail-68 其中,KEY…

掌握嵌套子查询:复杂 SQL 中 * 列的准确表列关系

在日常开发中,我们常常需要对复杂的 SQL 进行数据血缘分析。 本文重点讨论在具有 * 列的嵌套子查询中建立表和列之间正确关系的挑战。使用 Teradata SQL 代码示例来说明该过程。 本文聚焦于一个别名为 SUBSCRIBER_ 的子查询及其派生的列,这些列在外层查…

【Canvas与艺术】玻璃光小红灯

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>玻璃光红灯Draft1</title><style type"text/css"…

RFID学习

24.10.5学习目录 一.简介1.组成2.RFID协议3.RFID卡 一.简介 RFID被称为无线射频识别&#xff0c;其是一种通信技术&#xff0c;通过无线电讯号耦合识别特定目标并读写相关数据&#xff1b; RFID主要位于典型物联网架构中的感知层&#xff0c;其因为具有非接触式特性&#xff…

数据结构与算法篇(树 - 常见术语)

目录 一、什么是树&#xff1f; 二、相关术语 根结点 边 叶子结点 兄弟结点 祖先结点 结点的大小 树的层 结点的深度 结点的高度 树的高度 斜树 一、什么是树&#xff1f; 树是一种类似于链表的数据结构&#xff0c;不过链表的结点是以线性方式简单地指向其后继结…

STM32驱动直流电机

stm32通过PWM控制直流电机的方向和速度。 小直流电机需要几百毫安的电流&#xff0c;单片机只能提供几毫安的电流。电机内线圈转动时切割磁感线以及电机内转子线圈的电感效应都会产生反电动势&#xff0c;损坏芯片。 电机驱动芯片能够作为STM32驱动电机的帮手。 SLEEP暂停工作…

Linux环境下的日志文件的实现

目录 日志 相关函数 time函数 localtime函数 va_list类型 vsnprintf函数 宏支持可变参数 __FILE__和__LINE__ 完整代码 Log.hpp 标记黏合操作符##&#xff08;重点&#xff09; LockGuard.hpp 日志 基本概念&#xff1a;用于记录软件运行时的信息&#xff0c…

数据结构与算法——Java实现 30.合并多个有序链表 小顶堆实现

后来我们都走了很久&#xff0c;远到提及往事时&#xff0c; 总会加上once upon a time —— 24.10.6 23. 合并 K 个升序链表 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例 1&#xff1…

linux桌面软件(wps)内嵌到主窗口后的关闭问题

程序测试环境是&#xff1a;slackware系统&#xff0c;属于linux系统&#xff0c;有桌面&#xff08;Xface Session&#xff09;。系统镜像是&#xff1a;slackware64-15.0-install-dvd.iso。qt、c代码实现。 问题描述&#xff1a;延续上一篇文章&#xff0c;将wps软件窗口内嵌…

中断系统的原理

一、介绍 中断是为使单片机具有对外部或内部随机发生的事件实时处理而设置的。中断是指‌CPU在正常运行程序时&#xff0c;由于内部或外部事件的发生&#xff0c;导致CPU中断当前运行的程序&#xff0c;转而去执行其他程序的过程。‌ 中断可以是硬件产生的&#xff0c;也可以是…

神经网络激活函数列表大全及keras中的激活函数定义

一、概述 在机器学习中&#xff0c;激活函数是神经网络中的一种函数&#xff0c;用于在神经网络的每个神经元中引入非线性。没有激活函数&#xff0c;神经网络就无法学习复杂的模式&#xff0c;因为线性变换的组合仍然是线性的。 在神经网络的每层中&#xff0c;将该层所有输…

ElasticSearch备考 -- Multi match

一、题目 索引task有3个字段a、b、c&#xff0c;写一个查询去匹配这三个字段为mom&#xff0c;其中b的字段评分比a、c字段大一倍&#xff0c;将他们的分数相加作为最后的总分数 二、思考 通过题目要求对多个字段进行匹配查询&#xff0c;可以考虑multi match、bool query操作。…