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

文章目录

      • 一、概述
      • 二、盒子模型
      • 三、线性布局(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)将失效,具体尺寸根据权重进行计算,计算规则如下图所示:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【分隔链表】python刷题记录

R3-双指针&#xff08;快慢指针&#xff09; 新建两个链表 一个链表记录<x的值 一个链表记录>x的值 拼接即可 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next ne…

智能驾驶学习笔记,第一天

智能驾驶是智能汽车的核心&#xff0c;指基于先进的传感器和计算平台&#xff0c;通过人工智能技术,让汽车具备自主行驶的能力&#xff0c;旨在辅助驾驶员安全、便捷、高效地完成驾驶任务。智能驾驶有助于减少交通事故、改善交通拥堵&#xff0c;并提高行驶安全性和驾乘舒适性。…

Photoshop的下载和安装教程

找到Adobe 的官网 https://www.adobe.com/cn/ 创建一个新的账户,如果你没有账户的话 后面安装步骤来注册 下载和安装 登录之后 点击 点击 点击 然后进行下载和安装 然后就是漫长的等待 安装完成 点击 这只是一个安装Photoshop的教程,也可以根据别人的安装包来进行安装

C语言指针(2)

今天我们接着前两天的内容继续讲解 一、数组名的理解 1、&arr[0]与arr 有时候我们需要获取数组首元素&#xff0c;有两种方法可以获取。 使用这两种方法都可以获得数组首元素&arr[0]&#xff0c;arr。 int main() {int arr[10] { 1,2,3,4,5,6,7,8,9,10};printf(&…

物理笔记-八年级上册

0.梦开始的地方 物理研究什么&#xff1f; 电学&#xff0c;力学&#xff0c;声学&#xff0c;光学&#xff0c;热学。 1.1.1长度的单位 国际基本单位制 单位转换 魔法记忆&#xff1a;千米-米-毫米-微米-纳米&#xff08;进率都是1000&#xff09; 单位换算计算方法 用科学…

web高可用群集架构部署----超详细

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

Leaf分布式ID

文章目录 系统对Id号的要求UUIDsnowflakeLeafLeaf-snowflakeLeaf-segmentMySQL自增主键segment双buffer 系统对Id号的要求 1、业务 1&#xff09;全局唯一性&#xff1a;不能出现重复的ID号&#xff0c;既然是唯一标识&#xff0c;这是最基本的要求 2&#xff09;趋势递增&a…

贪心系列专题篇四

​​​​​​​ 目录 整数替换 解法一 解法二 俄罗斯套娃信封问题 堆箱子 可被三整除的最大和 距离相等的条形码 重构字符串 声明&#xff1a;接下来主要使用贪心法来解决问题&#xff01;&#xff01;&#xff01; 整数替换 题目 思路 下面将使用两种方法来解决这…

【数据结构】算法的时间复杂度与空间复杂度

计算机考研408-数据结构笔记本之——第一章 绪论 1.2 算法和算法评价 1.2.2 算法效率的度量 算法效率的度量是通过时间复杂度和空间复杂度来描述的。 1.时间复杂度 时间复杂度T(n)是事前预估算法时间开销T(n)与问题规模 n 的关系&#xff08;T 表示 “time”&#xff09;&a…

眼在手外-机器人坐标系与相机坐标系标定方法

1 眼在手外坐标系概述 实现机械臂和相机的手眼标定&#xff0c;就是要通过双目相机坐标系、机械臂坐标系和机械臂 末端执行器三者的坐标系转换&#xff0c;求出手眼转换矩阵。设双目相机坐标系为 Oc&#xff0c;标定板坐标 系为 Ow&#xff0c;末端执行器坐标系为 Oe&#xff0…

【C++】二维数组定义方式

二维数组有四种定义方式 1、数据类型 数组名[行数 ][ 列数 ]; 2、数据类型 数组名[ 行数 ][ 列数 ]{{数据1&#xff0c;数据2}&#xff0c;{数据3&#xff0c;数据4 }}; 3、数据类型 数组名[ 行数 ][ 列数 ]{数据1&#xff0c;数据2&#xff0c;数据3&#xff…

Java | Leetcode Java题解之第321题拼接最大数

题目&#xff1a; 题解&#xff1a; class Solution {public int[] maxNumber(int[] nums1, int[] nums2, int k) {int m nums1.length, n nums2.length;int[] maxSubsequence new int[k];int start Math.max(0, k - n), end Math.min(k, m);for (int i start; i < e…

04 表的操作

目录 创建查看修改删除 1. 创建 语法&#xff1a; CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储殷勤; 说明&#xff1a; field&#xff0c;表示列名 datatype&#xff0c;表示列的类型…

C++ 继承 派生类的拷贝构造

继承 派生类的拷贝构造构造顺序拷贝构造 引例1: 当子类,不自实现拷贝构造时,默认调用父类的拷贝构造引例2: 子类自实现拷贝构造,不做特殊处理时,只会调用父类的构造器.引例3: 显示的调用父类的拷贝构造器。案例: 内嵌函数的拷贝构造 引例1 :当内嵌子对象,子类不自实现拷贝构造时…

【java】单行注释(//)与多选注释(/* */)

文章目录 单行注释多行注释注意事项 在Java中&#xff0c;注释是用来给代码添加说明的&#xff0c;它不会被编译器执行。Java提供了两种主要的注释方式&#xff1a;单行注释和多行注释&#xff08;有时也称为块注释或块级注释&#xff09;。 单行注释 单行注释以两个正斜杠&…

数模评价决策类—熵权法

目录 文章目录 前言 一、熵权法是什么&#xff1f; 二、基本步骤 计算样本权重及熵权 总结 前言 前面我们学习了层次分析法和Topsis法&#xff0c;这两个方法都是偏主观的方法&#xff0c;这篇我们将运用较为客观的方法——熵权法&#xff0c;做出决策 一、熵权法是什么…

JavaWeb-HTML

一、HTML&CSS&JavaSript的作用: 1.HTML主要用于网页为主体结构的搭建&#xff1b; 2.CSS主要用于页面元素的美化 3.JavaScript主要用于页面元素的动态处理; 二、HTML HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构&…

2024死磕小红书,一定能赚到钱!

​2024死磕小红书&#xff0c;一定能赚到钱&#xff01;在文末领取小红书运营完全指南电子书 从2023年起&#xff0c;小红书这股热乎劲儿就像开了挂&#xff0c;突然间就成了人人想蹭的“显学”。大伙儿都想趁着平台红利期&#xff0c;分一杯羹。说来惭愧&#xff0c;我从2020年…

牛顿插值法代替泰勒公式

引入 例题 近似函数&#xff1a; 通过这个近似函数可以看出&#xff0c;若要证的函数超过二阶可导&#xff0c;那么就不适合用牛顿插值法代替泰勒公式 因为&#xff0c;后面的操作非常复杂&#xff0c;不划算了… 总结 我们可以通过牛顿插值法生成一个逼近曲线的直线&#xf…

使用Python库开发Markdown编辑器并将内容导出为图片

简介 在本文中&#xff0c;我们将探索如何使用Python的wxPython库开发一个Markdown编辑器应用程序。这个应用程序不仅能浏览和编辑Markdown文件&#xff0c;还可以将编辑的内容导出为PNG图片。 C:\pythoncode\new\markdowneditor.py 完整代码 import wx import markdown2 im…