鸿蒙UI开发与部分布局

UI开发

1. 布局概述

1.1 开发流程

1.先确定开发流程 -> 2.分析页面元素构成 ->3.选用合适的布局容器组件

image-20241121081642623

1.3 布局元素组成：盒模型

image-20241121082444491

image-20241121083235114

2.1 布局分类

2.1 线性布局

线性布局是开发中最常用·、最基础的布局，通过线性容器Row和Column构建

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.1.1 线性布局子元素排列方向：主轴

image-20241121090407452

布局子元素在排列方向上的间距

在布局容器内，可以通过space属性设置排列方向上子元素的间距

线性布局容器在布局方向的轴线，子元素默认沿主轴排列

.justifyContent(FlexAlign.End)//主轴对齐
.alignItems(HorizontalAlign.Center)//交叉轴对齐

2.1.2 设置主轴对齐方式

 .justifyContent(FlexAlign.End)//主轴对齐
    .alignItems(HorizontalAlign.Center)//交叉轴对齐

image-20241121090911564

不管容器是Coloum还是Row,它们默认的排列方式都是主轴为始端，交叉轴为居中对齐

  1. 设置主轴对齐的方式：JustifyContent(FlexAlign.Center)
  2. 设置交叉轴的对齐方式：alignItems()

自适应拉伸：Blank组件

线性布局下，常用空白填充组件Blank,在容器主轴方向自动填充空白空间，达到自适应的拉伸效果

打个比方，就是你竖屏在看小说，然后你横屏了，小说的内容会跟着横屏的屏幕去调整

image-20241121093045568

2.2 层叠布局

层叠布局用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局

  • 层叠布局通过Stack容器组件实现位置的固定定位与层叠
  • 容器中的子元素（子组件）一次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可设置元素

image-20241121093711961

2.1.1 层叠布局的对齐方式

Stack组件通过alignContent参数实现位置的相对移动

image-20241121095941931

在层叠布局中，如果后面子元素尺寸大于前面子元素的尺寸，则前面子元素完全隐藏

2.1.2 层叠布局的层级控制：Z控制

如何显示前面的元素呢？

  • Stack容器中兄弟组件显示层级关系可以通过Z序控制ZIndex属性改变
  • zIndex值越大，显示的层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方

2.1.3 层叠布局的应用场景

使用层叠布局快速搭建手机页面显示模型

image-20241121134023838

2.3 弹性布局

2.3.1 弹性布局的概念

弹性布局提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间

  • 容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉尺寸
  • 弹性布局常用在以下场景：如页面头部均匀分布的导航栏、页面框架的搭建、多行数据的排列image-20241121134936895

2.3.2 弹性布局的元素排列方向：direction

弹性布局中，容器的子元素可以按照任意方向排列，通过设置参数direction,可以决定主轴的反向，从而控制子组件的排列方向

image-20241121101155517

2.3.3 案例解析

通过参数FlexDirection.Row和FlexDirection.RowReverse来控制容器主轴为水平方向

image-20241121135300259

通过参数FlexDirection.Column和FlexDirection.ColumnReverse来控制容器主轴为垂直方向

image-20241121135442101

2.4 相对布局

2.4.1 概念

布局容器内子元素支持指定锚点，可以为兄弟元素或者父元素，基于锚点做相应位置布局

  • RelativeContainer为采用相对布局的容器。支持容器内部的子元素设置相对未知关系

image-20241121123948980

2.4.2 相对布局的依赖关系： 锚点设置

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系

  • 水平方向上，可以设置left、middle、right的锚点
  • 在竖值方向上，可以设置top、center、bottom的锚点
  • 为了明确定义锚点，必须为RelativeContainer及其子元素设置ID,用于指定锚点信息
  • RelativeConrainer的ID默认为“container”,其余子元素的ID通过这只id属性。未设置ID的子元素在RelativeContainer中不会显示
  • 在使用锚点时要注意子元素的相对位置关系，避免出现错位或者遮挡的情况

2.4.3 相对布局的依赖关系：以容器为锚点

RelativeContainer父组件为锚点，__container__代表父容器的id

2.4.4 相对布局的依赖关系：以子元素为锚点

只要在RelativeContainer容器内，均可以通过alignRules进行相应的位置移动

代码案例

@Entry
@Component
struct RelativeContainer1{
  build() {
    RelativeContainer() {//父容器组件
        Text("1111")
          .width(80)
          .height(80)
          .backgroundColor(Color.Gray)
          .alignRules({
      top:{anchor:"__container__",align:VerticalAlign.Top},
      left:{anchor:'__container__',align:HorizontalAlign.Start}
          }).id('Text')

        Text("2222")
          .width(80)
          .height(80)
          .backgroundColor(Color.Pink)
          .alignRules({
            top:{anchor:"Text",align:VerticalAlign.Bottom},
            left:{anchor:"Text",align:HorizontalAlign.End}
          })
          .id("Text1")



    }
  }
}

image-20241121132722692

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python中Tushare（金融数据库）入门详解

Python中Tushare（金融数据库）入门详解

文章目录 Python中Tushare（金融数据库）入门详解一、引言二、安装与注册1、安装Tushare2、注册与获取Token 三、Tushare基本使用1、设置Token2、获取数据2.1、获取股票基础信息2.2、获取交易日历2.3、获取A股日线行情2.4、获取沪股通和深股通成份股2.5、获…
阅读更多...
性能优化（二）：ANR

性能优化（二）：ANR

介绍 ANR全称Application Not Responding，意思就是程序未响应。如果一个应用无法响应用户的输入，系统就会弹出一个ANR对话框，用户可以自行选择继续等待亦或者是停止当前程序。 Android系统会监控程序的响应状况，一旦出现下面情况…
阅读更多...
神经网络问题之：梯度不稳定

神经网络问题之：梯度不稳定

梯度不稳定是深度学习中，特别是在训练深度神经网络时常见的一个问题，其本质涉及多个方面。 一、根本原因 梯度不稳定问题的根本原因在于深度神经网络的结构和训练过程中的一些固有特性。随着网络层数的增加，梯度在反向传播过程中会逐层累积变…
阅读更多...
弹幕发送功能‘简单’实现

弹幕发送功能‘简单’实现

导入依赖 <!-- websocket弹幕依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>后端代码 package com.by.danmaku;import org.springfra…
阅读更多...
RPC-健康检测机制

RPC-健康检测机制

什么是健康检测&#xff1f; 在真实环境中服务提供方是以一个集群的方式提供服务&#xff0c;这对于服务调用方来说&#xff0c;就是一个接口会有多个服务提供方同时提供服务&#xff0c;调用方在每次发起请求的时候都可以拿到一个可用的连接。 健康检测&#xff0c;能帮助从连…
阅读更多...
奶龙IP联名异军突起：如何携手品牌营销共创双赢？

奶龙IP联名异军突起：如何携手品牌营销共创双赢？

在快节奏的互联网消费时代&#xff0c;年轻消费群体对产品和品牌的要求越来越挑剔。因此在品牌年轻化的当下&#xff0c;一方面需要品牌自身形象也要不断追求时代感&#xff0c;另一方面品牌也需要不断引领消费者需求&#xff0c;提升竞争力和产品力。 奶龙作为近年来异军突起…
阅读更多...
Flutter：photo_view图片预览功能

Flutter：photo_view图片预览功能

导入SDK photo_view: ^0.15.0单张图片预览&#xff0c;支持放大缩小 import package:flutter/material.dart; import package:photo_view/photo_view.dart;... ...class _MyHomePageState extends State<MyHomePage>{overrideWidget build(BuildContext context) {return…
阅读更多...
第二课 Model模型资源导入设置检查与优化

第二课 Model模型资源导入设置检查与优化

上期我们学习了最简单的audio音效的优化&#xff0c;接下来我们继续model模型资源的优化&#xff0c;我将汇总各路大神关于模型优化的思路和方法供你和我学习。 首先我们还是要把我们优化的目标重申一遍&#xff1a; 优化的目标 1.文件体积尽可能小 2.内存占用尽可能小 3.…
阅读更多...
RabbitMQ实现异步下单与退单

RabbitMQ实现异步下单与退单

前言&#xff1a; 在电商项目中的支付模块也是一个很重要的模块&#xff0c;其中下订操作以及退订操作就是主要的操作。其次的下单是同步下单&#xff0c;也就是第三方支付、数据库扣减、积分增加、等等其他业务操作&#xff0c;等待全部执行完毕后向用户返回成功响应请求。对…
阅读更多...
macOS 无法安装第三方app，启用任何来源的方法

macOS 无法安装第三方app，启用任何来源的方法

升级新版本 MacOS 后&#xff0c;安装下载的软件时&#xff0c;不能在 ”安全性与隐私” 中找不到 ”任何来源” 选项。 1. 允许展示任何来源 点击 启动器 (Launchpad) – 其他 (Other) – 终端 (Terminal)&#xff1a; 打开终端后&#xff0c;输入以下代码回车&#xff1a; …
阅读更多...
微服务即时通讯系统的实现（服务端）----（1）

微服务即时通讯系统的实现（服务端）----（1）

目录 1. 项目介绍和服务器功能设计2. 基础工具安装3. gflags的安装与使用3.1 gflags的介绍3.2 gflags的安装3.3 gflags的认识3.4 gflags的使用 4. gtest的安装与使用4.1 gtest的介绍4.2 gtest的安装4.3 gtest的使用 5 Spdlog日志组件的安装与使用5.1 Spdlog的介绍5.2 Spdlog的安…
阅读更多...
欧洲新车安全评鉴协会（Euro NCAP）2026 年规程的 5 项关键更新

欧洲新车安全评鉴协会（Euro NCAP）2026 年规程的 5 项关键更新

数十年来，欧洲新车安全评鉴协会为全球车辆安全评级树立了黄金标准。该协会向来以引领潮流著称，常常在法规强制要求之前数年就采用新的安全技术。 随着 2026 年欧洲新车安全评鉴协会的更新即将到来，汽车行业急切地想知道需要格外密切关注哪些特性和技术。 尽管欧洲新车安全…
阅读更多...
Jenkins迁移数据目录

Jenkins迁移数据目录

查看当前容器挂载的目录 [roottest-server01 ~]# docker inspect -f "{{.Mounts}}" jenkins [{bind /etc/localtime /etc/localtime true rprivate} {bind /opt/jenkins_data /var/jenkins_home true rprivate}]复制数据目录到数据盘 [roottest-server01 opt…
阅读更多...
利用 TensorFlow Profiler：在 AMD GPU 上优化 TensorFlow 模型

利用 TensorFlow Profiler：在 AMD GPU 上优化 TensorFlow 模型

TensorFlow Profiler in practice: Optimizing TensorFlow models on AMD GPUs — ROCm Blogs 简介 TensorFlow Profiler 是一组旨在衡量 TensorFlow 模型执行期间资源利用率和性能的工具。它提供了关于模型如何与硬件资源交互的深入见解&#xff0c;包括执行时间和内存使用情…
阅读更多...
二叉树——输出叶子到根节点的路径

二叉树——输出叶子到根节点的路径

目录 代码 算法思想 例子 思维拓展 代码 int LeaveBit(Bitree T,int flag,int g) {if (!T) {return 0;}if (T->rchild NULL && T->lchild NULL) {//cout << "empty:" << T->data << endl;s.push(T->data);while (!s.emp…
阅读更多...
PIL学习---彩色RGB图像按通道输出

PIL学习---彩色RGB图像按通道输出

要将 RGB 图像拆分为单独的 R、G、B 通道并分别展示&#xff0c;可以通过 PIL 中的 split() 方法将图像的三个通道分开&#xff0c;并使用 matplotlib 来显示每个通道的图像。效果如下图所示&#xff1a; 代码部分&#xff1a; from PIL import Image import matplotlib.pypl…
阅读更多...
CSS实现实现当文本内容过长时，中间显示省略号...,两端正常展示

CSS实现实现当文本内容过长时，中间显示省略号...,两端正常展示

HTML 结构解析 文档结构: <ul class"con">: 一个无序列表&#xff0c;包含多个列表项。 每个 <li class"wrap"> 表示一个列表项&#xff0c;内部有两个 <span> 元素&#xff1a; <span class"txt">: 显示文本内容。<…
阅读更多...
ROS VRRP软路由双线组网方式

ROS VRRP软路由双线组网方式

虚拟路由冗余协议 Virtual Router Redundancy Protocol (VRRP)&#xff0c;MikroTik RouteROS VRRP 协议遵循 RFC 2338。 VRRP 协议是保证访问一些资源不会中断&#xff0c;即通过多台路由器组成一个网关集合&#xff0c;如果其中一台路由器出现故障&#xff0c;会自动启用另外…
阅读更多...
设计编程网站集：简述可扩展性系统设计(笔记)

设计编程网站集：简述可扩展性系统设计(笔记)

视频连接&#xff1a;简述可扩展性系统设计 三个关键原则 无状态 松散耦合 异步处理 扩展 负载均衡 缓存 分片
阅读更多...
openCV与eigen两种方法---旋转向量转旋转矩阵

openCV与eigen两种方法---旋转向量转旋转矩阵

#include <Eigen/Dense> #include <opencv2/core/eigen.hpp> #include <opencv2/opencv.hpp> using namespace cv; using namespace std; int main() {// opencv 旋转向量cv::Vec3d rvec(1.0, 2.0, 3.0);cv::Mat rotation_matrix;cv::Rodrigues(rvec, rotati…
阅读更多...
最新文章

Copyright @ 2022~2023