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

鸿蒙HarmonyOS开发：常用布局及实用技巧

news 2025/9/18 17:11:55

文章目录

      • 一、概述
      • 二、盒子模型
      • 三、线性布局（Column/Row）
        • 1、space属性
        • 2、justifyContent属性
        • 3、alignItems属性
      • 四、实用技巧
        • 1、Blank组件的使用
        • 2、layoutWeight属性的使用

一、概述

布局是指对页面组件进行排列和定位的过程，其目的是有效地组织和展示页面内容，会涉及到组件的大小、位置以及它们之间的相互关系等等。
在这里插入图片描述

二、盒子模型

在鸿蒙应用中，页面上的每个组件都可以看做是一个矩形的盒子，这个盒子包含了内容区域（content）、边框（border）、内边距（padding）和外边距（margin），各部分内容如下图所示

在这里插入图片描述

三、线性布局（Column/Row）

线性布局（LinearLayout）是开发中最常用的布局，可通过容器组件Column和Row构建，其子组件会在垂直或者水平方向上进行线性排列，具体效果如下图所示

在这里插入图片描述

1、space属性

Column和Row容器的参数类型为{space?: string | number}，开发者可通过space属性调整子元素在主轴方向上的间距，效果如下
在这里插入图片描述

2、justifyContent属性

子元素沿主轴方向的排列方式可以通过justifyContent()方法进行设置，其参数类型为枚举类型FlexAlign，可选的枚举值有

在这里插入图片描述

3、alignItems属性

子元素沿交叉轴方向的对齐方式可以通过alignItems()方法进行设置，其参数类型，对于Column容器来讲是HorizontalAlign，对于Row容器来讲是VerticalAlign，两者都是枚举类型，可选择枚举值也都相同，具体内容如下

在这里插入图片描述

四、实用技巧

1、Blank组件的使用

Blank可作为Column和Row容器的子组件，该组件不显示任何内容，并且会始终充满容器主轴方向上的剩余空间，效果如下：

在这里插入图片描述

2、layoutWeight属性的使用

layoutWeight属性可用于Column和Row容器的子组件，其作用是配置子组件在主轴方向上的尺寸权重。配置该属性后，子组件沿主轴方向的尺寸设置（width或height）将失效，具体尺寸根据权重进行计算，计算规则如下图所示：

在这里插入图片描述

相关文章：

鸿蒙HarmonyOS开发：常用布局及实用技巧

文章目录 一、概述二、盒子模型三、线性布局（Column/Row）1、space属性2、justifyContent属性3、alignItems属性 四、实用技巧1、Blank组件的使用2、layoutWeight属性的使用 一、概述 布局是指对页面组件进行排列和定位的过程，其目的是有效地…...

编程日记 2024/8/12 17:45:12

【解答】洛必达法则的使用条件及常见错误，洛必达法则的适用条件，常见的易错点，2022数一第一题例题

目录 洛必达法则的使用条件及常见错误 洛必达法则的适用条件 常见的易错点 举例说明（见D选项） 总结 🌈 嗨，我是命运之光！ 🌌 2024，每日百字，记录时光，感谢有你&…...

编程日记 2024/8/12 17:44:11

使用Python下载飞书共享表格数据教程

写在前面 随着企业协作办公软件的流行，飞书以其高效的协作能力和便捷的共享功能，成为了许多公司必备的工具之一。在日常工作中，我们经常需要从飞书中下载共享的表格数据进行分析。本文将详细介绍如何使用Python下载飞书共享表格数据。 前置…...

编程日记 2024/8/12 17:43:09

【C++】protobuf的简单使用（通讯录例子）

protobuf的简单使用（通讯录例子） .proto文件的编写保留字段字段唯一编号protobuf的类型enum类型Any类型oneof类型map类型完整通讯录代码.proto文件write文件read文件运行结果 .proto文件的编写 syntax用于指定protobuf的语法；package当.prot…...

编程日记 2024/8/12 17:42:08

Apple 智能基础语言模型

Introducing Apple’s On-Device and Server Foundation Models technical details June 10, 2024 在2024年的全球开发者大会上，苹果推出了Apple Intelligence，这是一个深度集成到iOS 18、iPadOS 18和macOS Sequoia中的个人智能系统。Apple Intelligen…...

编程日记 2024/8/12 17:35:59

GreptimeDB融资数百万美元； Oracle提供免费长期MySQL； 谷歌大模型支持云数据库问题洞察

重要更新 1. 开源时序数据库 GreptimeDB宣布完成数百万美元的新一轮融资。GreptimeDB是一款Rust 语言编写的时序数据库，具有分布式，开源，云原生，兼容性强等特点，帮助企业实时读写、处理和分析时序数据的同时&#xff0…...

编程日记 2024/8/12 17:33:55

Java中的抽象类与接口

1. 抽象类 1.1 抽象类概念 在面向对象的概念中，所有的对象都是通过类来描绘的，但是反过来，并不是所有的类都是用来描绘对象的， 如果一个类中没有包含足够的信息来描绘一个具体的对象，这样的类就是抽象类。 比如&…...

编程日记 2024/8/12 17:31:53

云计算概念以及与云服务的区别

目录 1.云的概念 1.1 什么是云？ 1.2 云计算的类型 1.3 云计算的服务模式 1.4 云计算的优势 2.云计算和云服务的区别 2.1 定义 2.2 范围 2.3 角色 2.5 举例 2.6使用者 3.总结 1.云的概念 1.1 什么是云？ “云”在计算机科学和信息技术领域通常…...

编程日记 2024/8/12 17:30:51

Netty技术全解析：LengthFieldBaseFrameDecoder类深度解析

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…...

编程日记 2024/8/12 17:28:49

深入InnoDB核心：揭秘B+树在数据库索引中的高效应用

目录 一、索引页与数据行的紧密关联 &#xff08;一&#xff09;数据页的双向链表结构 &#xff08;二&#xff09;记录行的单向链表结构 二、未创建索引情况 &#xff08;一&#xff09;无索引下的单页查找过程 以主键为搜索条件 以非主键列为搜索条件 &#xff08;二…...

编程日记 2024/8/12 17:27:47

c++（面向对象的性质：抽象，封装，继承，多态）

ctrla全选&#xff0c;ctrli对齐 ctrl/ 一起注释 ctrlz 退回上一步 一些基础的内容&#xff1a; cout&#xff1a;输出流对象 cin&#xff1a;输入流对象 输入一个i和一个j&#xff0c;然后输出ij的和&#xff1a; 值不变的原因&#xff1a; 值传递&#xff0c;a和i是…...

编程日记 2024/8/12 17:26:46

java基础学习笔记1

Java编程规范 命名风格 1. 【强制】代码中的命名均不能以下划线或美元符号开始&#xff0c;也不能以下划线或美元符号结束。 反例&#xff1a;_name / __name / $name / name_ / name$ / name__ 2. 【强制】代码中的命名严禁使用拼音与英文混合的方式&#xff0c;更不允许直…...

编程日记 2024/8/12 17:23:42

[VBA]使用VBA在Excel中 操作 形状shape 对象

excel已关闭地图插件，对于想做 地图可视化 的，用形状来操作是一种办法，就是要自行找到合适的 地图形状，修改形状颜色等就可以用于 可视化展示不同省市销量、人口等数据。 引言 在Excel中，通过VBA（Visual Basic for Applications）可以极大地增强数据可视化和报告自动化…...

编程日记 2024/8/12 17:22:40

Apache POI 实现 Excel 表格下载

这里以苍穹外卖中数据导出功能为例&#xff0c;记录下 Apache POI 导出 Excel 表格的过程。 首先在 pom.xml 中导入相关依赖 <!-- poi 用于操作 excel 表格--> <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId&…...

编程日记 2024/8/12 17:20:37

大华嵌入式面试题大全及参考答案（2万字长文）

目录 在C语言中，static 关键字有哪些主要用途？ static 修饰的全局变量与普通全局变量有什么区别？ 为什么要在嵌入式系统中使用 static 修饰函数？ 虚函数与纯虚函数了解么？ strcpy 给你加结束符吗，还是要自己加？ select 的作用是什么，它和 epoll 的区别？ map 与…...

编程日记 2024/8/12 17:19:36

C语言——查漏补缺

前言 本篇博客主要记录一些C语言的遗漏点&#xff0c;完成查漏补缺的工作&#xff0c;如果读者感兴趣&#xff0c;可以看看下面的内容。都是一些小点&#xff0c;下面进入正文部分。 1. 字符汇聚 编写代码&#xff0c;演示多个字符从两端移动&#xff0c;向中间汇聚 #inclu…...

编程日记 2024/8/12 17:18:35

Python | Leetcode Python题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; class Solution:def oddEvenList(self, head: ListNode) -> ListNode:if not head:return headevenHead head.nextodd, even head, evenHeadwhile even and even.next:odd.next even.nextodd odd.nexteven.next odd.nexteven even…...

编程日记 2024/8/12 17:17:33

吉瑞外卖笔记

1.项目整体搭建 这里用到的是springboot3mybatisplus 1.1数据库搭建 整体表搭建&#xff0c;这里我是直接用的老师给的数据库 1.2maven项目搭建 依赖 这两个jar包第一次用&#xff0c;记录一下 fastjson json处理&#xff0c;可将对象转化为json形式 可将对象中的属性…...

编程日记 2024/8/12 17:15:31

Perl套接字编程指南：构建网络通信应用

摘要 Perl是一种功能强大的脚本语言&#xff0c;广泛应用于系统管理、网络编程等多种场景。Perl的套接字编程能力允许开发者创建客户端和服务器端的网络应用。本文将详细介绍Perl中套接字的使用&#xff0c;包括基础概念、API的使用&#xff0c;以及构建简单客户端和服务器的示…...

编程日记 2024/8/12 17:14:30

达梦数据库(十) -------- mybatis-plus 整合达梦时，自动生成的 sql 语句报错

一丶【问题描述】&#xff1a; mybatis-plus 整合达梦时&#xff0c;应用系统项目的 sql 语句中包含数据库关键字&#xff0c;导致 mybatis-plus 自动生成的 sql 语句会报错&#xff0c;如下图所示&#xff1a; 二丶【问题解决】&#xff1a; 问题原因&#xff1a;mybatis-pl…...

编程日记 2024/8/12 17:13:28

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/9/17 14:03:14

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/8/29 10:31:59

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/9/12 1:12:23

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

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

编程新知 2025/8/7 7:06:16

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/9/18 12:51:58

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/9/8 1:23:00

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/9/3 23:35:33

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2025/9/3 20:37:55

图解JavaScript原型：原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

编程新知 2025/9/6 23:29:23