Android视角看鸿蒙第十课-鸿蒙的布局之线性布局

Android视角看鸿蒙第十课-鸿蒙的布局之线性布局

导读

这篇文章开始，依次学习鸿蒙的八大布局，这是第一篇，所以顺带也会聊聊通用属性。

文档地址

文档地址

如何定义一个线性布局

Android中是使用LinearLayout来构建线性布局的，通过**orientation的取值(vertical或horizontal)**来控制排列方向
鸿蒙线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列
在这里插入图片描述

如何设置组件的宽度和高度

在这里插入图片描述
在page默认生成的代码中可以看到是由width()和height()来控制的。
默认中使用的都是100%，是通过比例来控制的，
那么width和height只能使用百分比来控制的吗？显然不是。

点击方法查看，描述太少了。
在这里插入图片描述

我找了找文档，首先找到了这个
在这里插入图片描述
这个描述证明了，不仅仅可以使用百分比来控制宽高，还可以使用固定数字。

那么这个纯数字的单位是什么呢？
我之前的文章

之前在了解designWidth时，顺带了解了鸿蒙中的单位
在这里插入图片描述
默认使用的是vp等同于dp，
fp是文字大小单位等同于sp，
lpx我们在之前的文章中研究过，需要和designWidth配合使用,类似于autosize，
px就是屏幕像素。

所以以上的都可以的。
给大家看看使用案例
在这里插入图片描述
designWidth配置的100，实际使用就是设计图的宽度。
在这里插入图片描述
通过官方文档发现，还可以通过==size()==函数设置宽高，看到的时候要知道。在这里插入图片描述

对齐方式

在这里插入图片描述
在当前看来，若不指定宽高默认均为wrap，且子空间默认都是中心对齐的。
那么如何修改对其方式，类似于LinearLayout的gravity

看文档
在这里插入图片描述
这个描述的很清楚，有alignItems和alignSelf两个
alignItems类似LinearLayout的Gravity属性，控制子控件的排列方式
alignSelf类似于LinearLayout中的子控件的layout_gravity属性，控制当前子控件在Linear Layout中的排列方式，优先级高于alignItems。

alignItems

alignItems类似LinearLayout的Gravity属性，控制子控件的排列方式
在这里插入图片描述
在这里插入图片描述
看看代码使用
在这里插入图片描述

alignSelf

alignSelf类似于LinearLayout中的子控件的layout_gravity属性，控制当前子控件在Linear Layout中的排列方式，优先级高于alignItems。

文档没有像alignItems一样给出图片示例，理论上是一样的。
直接上代码
在这里插入图片描述
alignSelf的取值只有ItemAlign一种，不需要根据父布局的不同而变化。

线性布局设置Item间距

这个Android上是没有的，只能每个item自己设置
看看文档
在这里插入图片描述
在这里插入图片描述
设置方式一致，相当简单。我想起来在RecyclerView中设置分割线时，最后的item往往不需要还需要单独处理。

justifyContent布局子元素在主轴上的排列方式

官方文档
喜欢看最权威的同学，可以点这个链接。
先上个效果图
在这里插入图片描述
前面三个我们在Android中使用的也比较多，
后面也是属于创新功能，主要是平分规则不一致。
这个字段共有6个取值:
FlexAlign.Star元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐。
FlexAlign.Center元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
FlexAlign.End元素在垂直方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
FlexAlign.Spacebetween
垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
FlexAlign.SpaceAround
垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
FlexAlign.SpaceEvenly
垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

最后上个代码
在这里插入图片描述

Blank自适应拉伸

依然新东西，看看文档
在这里插入图片描述
感觉略微多于一点，在Android中我一般直接给TextView设置权重weight，或者中间写一个View设置权重。
看个人习惯了。

layoutWeight

在这里插入图片描述
使用和Android一致，但是鸿蒙只支持String或number,而Android是float
android中设置权重时，width是0还是其他是有去别的，鸿蒙设置权重时直接忽略宽度
虽然可以设置为String，但是不建议。实测‘a’不行‘1’可以,，意义不大，只是单纯的输入类型兼容
在这里插入图片描述

滑动Scroll

在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。
垂直方向布局中使用Scroll组件：

@Entry
@Component
struct ScrollExample {scroller: Scroller = new Scroller();private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];build() {Scroll(this.scroller) {Column() {ForEach(this.arr, (item) => {Text(item.toString()).width('90%').height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({ top: 10 })}, item => item)}.width('100%')}.backgroundColor(0xDCDCDC).scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向.scrollBar(BarState.On) // 滚动条常驻显示.scrollBarColor(Color.Gray) // 滚动条颜色.scrollBarWidth(10) // 滚动条宽度.edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹}
}

官方代码,请参考。

如何控制显示与隐藏

在这里插入图片描述

// xxx.ets
@Entry
@Component
struct VisibilityExample {build() {Column() {Column() {// 隐藏不参与占位Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)// 隐藏参与占位Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)// 正常显示，组件默认的显示模式Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)}.width('90%').border({ width: 1 })}.width('100%').margin({ top: 5 })}
}

Android有的也都有。None=Gone,Hidden=InVisible,Visible还是Visible。

pading和margin

在这里插入图片描述
使用案例
在这里插入图片描述
padding({ top: 5, left: 10, bottom: 15, right: 20 })
四边不一致时的设置方式。

constraintSize 最大最小尺寸

等同于Android的maxWidth,maxHeight，这里聚合了
在这里插入图片描述
使用案例:

Text('this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text.this is a Text').width('90%').constraintSize({ maxWidth: 200 })

结束

上面所述，就是我们常用的字段了。最后附上官方的通用属性文档，有其他需要的同学请自行查阅。
通用属性

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

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

相关文章

ChatGPT chrome扩展下载与安装

ChatGPT chrome扩展下载与安装

官方下载地址 https://chromewebstore.google.com/detail/lpbhmlbicmgjpacbofijdfpcplfhakeo 截图 安装 离线安装 下载地址 https://static.xutongbao.top/app/chatgpt-chrome-crx-v0.0.7.zip 打开链接 chrome://extensions/ 人工智能学习网站 https://chat.xutongbao.to…
阅读更多...
谷粒商城——RabbitMQ

谷粒商城——RabbitMQ

0. 消息中间件 1.RabbitMQ的核心概念 2. 工作流程 整体架构： 相关细节： 上述要注意的是： 路由键包含在message的头中，其作用是用于指定该消息存储与哪个消息队列中。 信道是客户端（包括生产者和消费者）用…
阅读更多...
Vue 组件化编程

Vue 组件化编程

Vue 组件化编程 非单文件组件 定义组件 使用Vue.extend(options）创建 不要写eldata要写成函数，避免组件被复用时，数据存在引用关系 注册组件 局部注册：new Vue()的时候，options传入components全局注册：V…
阅读更多...
回收站删除以后还能撤销吗 回收站删除以后怎么找回 回收站清空了怎么恢复 easyrecovery数据恢复软件

回收站删除以后还能撤销吗 回收站删除以后怎么找回 回收站清空了怎么恢复 easyrecovery数据恢复软件

回收站删除以后能撤销吗？有不少网友前一秒清空回收站，后一秒就开始在网上疯狂搜寻如何撤销删除回收站的办法。实际上，清空回收站并不可怕，被删除的数据仍然保存在我们的电脑硬盘中。今天我为大家介绍回收站删除以后怎么找回数据的…
阅读更多...
HTTP 常见面试题（计算机网络）

HTTP 常见面试题（计算机网络）

HTTP 基本概念 一、HTTP 是什么？ HTTP(HyperText Transfer Protocol) ：超文本传输协议。 HTTP 是一个在计算机世界里专门在「两点」之间「传输」文字、图片、音频、视频等「超文本」数据的「约定和规范」。 「HTTP 是用于从互联网服务器传输超文本到本…
阅读更多...
苍穹外卖04 (新增内表的外键id获取，多表分页查询，多表批量删除，修改先查在改内表外键id用主表的，起售时包含了“停售”状态的外关联表)

苍穹外卖04 (新增内表的外键id获取，多表分页查询，多表批量删除，修改先查在改内表外键id用主表的，起售时包含了“停售”状态的外关联表)

1. 新增套餐 1 需求分析和设计 业务规则： 套餐名称唯一 套餐必须属于某个分类 套餐必须包含菜品 名称、分类、价格、图片为必填项 添加菜品窗口需要根据分类类型来展示菜品 新增的套餐默认为停售状态 2 代码实现 1 根据分类id查询菜品 DishControllerGetMa…
阅读更多...
【C语言环境】Sublime中运行C语言时MinGW环境的安装

【C语言环境】Sublime中运行C语言时MinGW环境的安装

要知道，GCC 官网提供的 GCC 编译器是无法直接安装到 Windows 平台上的，如果我们想在 Windows 平台使用 GCC 编译器，可以安装 GCC 的移植版本。 目前适用于 Windows 平台、受欢迎的 GCC 移植版主要有 2 种，分别为 MinGW 和 Cygwin…
阅读更多...
数据分析之POWER BI Desktop可视化应用案列

数据分析之POWER BI Desktop可视化应用案列

在power bi中导入数据 导入前期建好的模型 简单介绍（power bi desktop） 将右边字段全部展开 各类数据 所作的模型 在excel中是单向的，power bi 中可以是双向的 右键单击----点击属性 选择两个---在两个方向上应用安全筛选器 变为双向的…
阅读更多...
每日面经分享（pytest入门）

每日面经分享（pytest入门）

1. pytest具有什么功能 a. 自动发现和执行测试用例：pytest可以自动发现项目中的测试文件和测试函数，无需手动编写测试套件或测试运行器。 b. 丰富的断言函数：pytest提供了丰富的断言函数，方便地验证测试结果是否符合预期。断言函…
阅读更多...
flask的使用学习笔记1

flask的使用学习笔记1

跟着b站学的1-06 用户编辑示例_哔哩哔哩_bilibili flask是一个轻量级，短小精悍，django大而全 创建： manage.py和一个和项目名称相同的目录（static（前端生成的dist）、templates（html文件&…
阅读更多...
【吴恩达机器学习笔记】神经网络初探

【吴恩达机器学习笔记】神经网络初探

前言 传统机器学习不足 【例】预测房价，不同的房子有上百个特征 如果要包含所有的二次项（即使只是二次），最终也有很多项， 每个参数都有 n 个变量，那二次项数量将会是 n^2 /2 级别的量级，模型…
阅读更多...
并查集

并查集

本文用于个人算法竞赛学习，仅供参考 目录 一.什么是并查集 二.并查集实现 三.路径优化 四.时间复杂度 五.并查集路径压缩 模板 五.题目 一.什么是并查集 并查集（Disjoint Set）是一种数据结构，用于处理一系列不相交的集合的合…
阅读更多...
一文了解JAVA的常用API

一文了解JAVA的常用API

目录 常用kpimathSystemRuntimeObjectObjectsBigIntegerBigDecima正则表达式包装类 常用kpi 学习目的： 了解类名和类的作用养成查阅api文档的习惯 math 工具类。因为是工具类，因此直接通过类名.方法名(形参)即可直接调用 abs：获取参数绝对…
阅读更多...
Linux学习：进程（4）程序地址空间（笔记）

Linux学习：进程（4）程序地址空间（笔记）

目录 1. Linux下各种资源的内存分布2. 物理地址与虚拟(线性)地址3. 程序地址空间的区域划分4. 地址映射与页表5. 缺页中断 1. Linux下各种资源的内存分布 2. 物理地址与虚拟(线性)地址 在有关进程创建的初步学习中，我们了解了fork函数创建子进程的方式。此种进程的创…
阅读更多...
Spring Boot 一.基础和项目搭建（上）

Spring Boot 一.基础和项目搭建（上）

之前也自学过SSM框架，Spring Boot框架，也动手写过几个项目，但是这是第一次完整的记录。从0开始，把一些细节整理了一下。 大概会分为十几小节，这是一个学习的过程，更是一个思考的过程，废话不多说…
阅读更多...
金融汽车科技LLM

金融汽车科技LLM

汇丰银行 众安保险 1. AIGC重塑保险价值链 小额高频 2.构建智能应用的技术方案演进 增加微服务 长记忆：向量库短记忆：对话历史，思考路径，执行历史 中台架构设计 蔚来汽车在大模型的应用实践 公司介绍 应用架构 应用实践 4.大…
阅读更多...
Django框架之DRF（武沛齐全）

Django框架之DRF（武沛齐全）

一、FBV和CBV FBV，function base views，其实就是编写函数来处理业务请求。 from django.contrib import admin from django.urls import path from app01 import views urlpatterns [path(users/, views.users), ] from django.http import JsonResp…
阅读更多...
快速排序---算法

快速排序---算法

1、算法概念 快速排序：通过一趟排序将待排记录分隔成独立的两部分，其中一部分记录的数据均比另一部分的数据小，则可分别对这两部分记录继续进行排序，以达到震哥哥序列有序。 快速排序的最坏运行情况是O()，比如说顺序数…
阅读更多...
网络基础二补充——json与http协议

网络基础二补充——json与http协议

五、市面上常用序列化和反序列化工具 ​ 常用的有：json、protobuf、xml三种方案； 5.1json的使用 1.安装jsoncpp库，是一个第三方的开发库文件； sudo yum install -y jsoncpp-devel2.使用json ​ 经常使用的头文件是json.h&…
阅读更多...
【uC/OS-III篇】uC/OS-III 创建第一个任务（For STM32）

【uC/OS-III篇】uC/OS-III 创建第一个任务（For STM32）

uC/OS-III 创建第一个任务（For STM32） 日期：2024-3-30 23:55，结尾总结了今天学习的一些小收获 本博客对应的项目源码工程 源码项目工程 1. 首先定义错误码变量 // 用于使用uC/OS函数时返回错误码 OS_ERR err; 2. 定义任务控制…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023