鸿蒙布局Column/Row/Stack

鸿蒙布局Column/Row/Stack

  • 简介
  • 我们以Column为例进行讲解
      • 1. Column({space: 10}) 这里的space: 10,表示Column里面每个元素之间的间距为10
      • 2. width('100%'),height('100%') 表示宽高占比
      • 3. backgroundColor(0xffeeeeee) 设置背景颜色
      • 4. padding({top: 50}) 设置顶部内边距
      • 5. border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10}) 设置容器的边框
      • 6. justifyContent(FlexAlign.Center)表述元素在主轴排列方式
      • 7. .alignItems(HorizontalAlign.Start)表述元素在副轴排列方式
  • Stack---堆叠布局方式
    • alignContent(Alignment.Center)排列方式介绍
    • zIndex的使用

简介

鸿蒙开发中,最常用的两种线性布局

Column:垂直布局方式
Row:水平布局方式

在这里插入图片描述
在这里插入图片描述

我们以Column为例进行讲解

请看一下下面代码

@Entry
@Component
struct ColumnTest {build() {Column({space: 10}){Text('Column垂直布局')Column({space:20}){Button('测试').width('50%').backgroundColor(Color.Green)Button('测试1').width('50%').backgroundColor(Color.Red)Button('测试2').width('50%').backgroundColor(Color.Blue)}.width('80%').height('50%').backgroundColor(Color.White).justifyContent(FlexAlign.Center)// .alignItems(HorizontalAlign.Start).border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10})}.width('100%').height('100%').backgroundColor(0xffeeeeee).padding({top: 50})}
}

1. Column({space: 10}) 这里的space: 10,表示Column里面每个元素之间的间距为10

2. width(‘100%’),height(‘100%’) 表示宽高占比

3. backgroundColor(0xffeeeeee) 设置背景颜色

4. padding({top: 50}) 设置顶部内边距

```
padding(50) 表示上下左右,内边距全部都是50
padding({top: 50,left: 30}) 表示顶部内边距50,左边内边距30
```
如果使用margin外边距,道理类似

5. border({width: 1,color: Color.Red,style: BorderStyle.Dotted,radius: 10}) 设置容器的边框

```
width: 1 边框宽1
color: Color.Red 边框颜色
style: BorderStyle.Dotted 边框线条方式Dotted 点Dashed 线段Solid 实线
radius: 10 设置容器圆角
```

6. justifyContent(FlexAlign.Center)表述元素在主轴排列方式

对于Column来说主轴就是Y(竖轴)

对于Row来说主轴就是X(横轴)

FlexAlign有以下几种排列方式:

FlexAlign.Start 头部对齐
FlexAlign.Center 中间对齐
FlexAlign.End 底部对齐
FlexAlign.SpaceAround 元素与元素之间,元素与顶部或底部之间距离一样
FlexAlign.SpaceBetween 元素与元素之间距离一样,元素与顶部或底部之间距离为0
FlexAlign.SpaceEvenly 元素与元素之间距离一样,元素与顶部或底部之间距离为元素相邻间距的一般

FlexAlign.Start 展示方式
在这里插入图片描述

FlexAlign.End 展示方式
在这里插入图片描述

FlexAlign.Center 展示方式
在这里插入图片描述

FlexAlign.SpaceAround 展示方式
在这里插入图片描述

FlexAlign.SpaceBetween 展示方式
在这里插入图片描述

FlexAlign.SpaceEvenly 展示方式
在这里插入图片描述

7. .alignItems(HorizontalAlign.Start)表述元素在副轴排列方式

对于Column来说副轴就是X(横轴)

对于Row来说副轴就是Y(竖轴)

HorizontalAlign有以下几种排列方式:

HorizontalAlign.Start
HorizontalAlign.Center
HorizontalAlign.End

HorizontalAlign.Start 展示方式
在这里插入图片描述

HorizontalAlign.Center 展示方式
在这里插入图片描述

HorizontalAlign.End 展示方式
在这里插入图片描述

Stack—堆叠布局方式

这是一种在屏幕Z轴方向上的一种布局方式,类似于将所有的元素堆叠在一起,最后加入的在最上层,除非有明确指明放在那一层。

Stack(){Column().width(300).height(300).backgroundColor(Color.Black)Column().width(250).height(250).backgroundColor(Color.Orange)Column().width(200).height(200).backgroundColor(Color.Red)}.width('100%').height('50%').backgroundColor(Color.White).alignContent(Alignment.Center)

在这里插入图片描述

上面我们定义了3个Column,以Stack的方式堆叠在一起。

这里面的宽高/背景色,就不再介绍。

alignContent(Alignment.Center)排列方式介绍

Alignment有以下几种形式

Alignment.TopStart  左上角
Alignment.Top 顶部中间
Alignment.TopEnd 右上角
Alignment.Start 中间左边
Alignment.Center 中间
Alignment.End 中间右边
Alignment.BottomTop 左下角
Alignment.Bottom 底部中间
Alignment.BottomEnd 右下角

在这里插入图片描述

zIndex的使用

除了按照顺序添加元素外,还可以使用zIndex手动调整添加元素在stack中的第几层。

Column().width(100).height(100).backgroundColor(Color.Red).zIndex(4)

zIndex的值越来,层级就越高,也就是在最上层,也最容易被看到。

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

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

相关文章

Vue报错:TypeError: Cannot read property ‘upgrade‘ of undefined

文章目录 Vue报错:TypeError: Cannot read property upgrade of undefined前言解决办法 Vue报错:TypeError: Cannot read property ‘upgrade’ of undefined 前言 最近打开一个很就之前的开发项目,因为扫描包,所以删除了部分代…

如何从未入库的gerrit中撤销一个文件

用一个例子说明 比如有一个提交里面的default.xml的修改没有必要,需要从未入库的gerrit中移除 步骤如下: 1.做reset操作 git reset HEAD^ packages/SettingsProvider/res/values/defaults.xml 2.做checkout操作 git checkout packages/SettingsProv…

【C++】STL-list的使用

目录 1、list的使用 1.1 list的构造 1.2 list的遍历 1.3 list capacity 1.4 list element access 1.5 容量相关 list是一个带头双向循环链表 1、list的使用 1.1 list的构造 1.2 list的遍历 list只有两种遍历方式,因为没有operator[] 因为list的双向链表&am…

13.跳跃游戏

文章目录 题目简介题目解答解法一:贪心算法+动态规划代码:复杂度分析: 题目链接 大家好,我是晓星航。今天为大家带来的是 跳跃游戏面试题 相关的讲解!😀 题目简介 题目解答 思路:这…

vscode打开esp-idf工程,找不到头文件,有波浪线

就像这样 多半是因为原始的工程不是用vscode的插件新建的,因此没有相关的路径。需要在工程文件夹下的.vscode文件夹中的c_cpp_properties.json文件中增加路径,可以参考插件自动新建的工程里面的写法 {"configurations": [{"name":…

LabVIEW二维码生成与识别

LabVIEW二维码生成与识别 随着数字化时代的快速发展,QR二维码作为一种高效的信息传递和识别手段,已广泛应用于各行各业。利用LabVIEW软件及其NI视觉开发模块(VDM)来实现一个高效的QR二维码生成与识别系统。该系统不仅能够快速生成带有自定义信息的二维码…

Linux网络编程】传输层中的TCP和UDP(UDP篇)

【Linux网络编程】传输层中的TCP和UDP(UDP篇) 目录 【Linux网络编程】传输层中的TCP和UDP(UDP篇)传输层再谈端口端口号范围划分认识知名端口号netstatiostatpidofxargs UDP协议UDP协议端格式UDP的特点面向数据报UDP的缓冲数据UDP使…

linux性能监控之free

free:linux系统自带命令,显示内存状态,命令查询来源于/proc/meminfo 文件 [rootk8s-master ~]# free --helpUsage:free [options]Options:-b, --bytes show output in bytes-k, --kilo show output in kilobytes-m, --mega…

小猫咪邮件在线发送系统源码v1.1,支持添加附件

小猫咪邮件在线发送系统源码v1.1,支持添加附件 一款免登录发送邮件,支持发送附件,后台可添加邮箱,前台可选择发送邮箱 网站数据采取本地保存,所以使用前请给网站修改权限,否则很多功能将无法使用 安装教程&#xff…

《软件方法(下)》8.3.3 泛化的一些重点讨论(202405更新)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 8.3 建模步骤C-2 识别类的关系 8.3.3 泛化的一些重点讨论 8.3.3.1 子集的不相交和完整 泛化是集合关系,在建模泛化关系时,我们对泛化关系中的子类&#xff0…

ACE框架学习4

目录 ACE Proactor框架 异步I/O工厂类 ACE_Handler类 前摄式Acceptor-Connector类 ACE_Proactor类 ACE Streams框架 ACE_Model类 ACE_Streams类 ACE Proactor框架 ACE Proactor框架实现了proactor模式,也就是异步网络模式,允许事件驱动…

47-Qt控件详解:Buttons Containers1

一 QPushButton (命令按钮) #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QPushButton>//引入QPushButton类对应的头文件class MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent nullptr);~MainWind…

基于YOLOV8复杂场景下船舶目标检测系统

1. 背景 海洋作为地球上70%的表面积&#xff0c;承载着人类生活、经济发展和生态系统的重要功能。船舶作为海洋活动的主要载体之一&#xff0c;在海上运输、资源开发、环境监测等方面发挥着重要作用。复杂海洋环境下的船舶目标检测成为了海事管理、海洋资源开发和环境保护等领…

C# winform 以modbus TCP方式读取数据

C# winform 以modbus TCP方式读取数据 一、modbus开发 //nmodbus4读取到的数据都是ushort类型TcpClient tcpClient new TcpClient();tcpClient.Connect("127.0.0.1", 502);//连接到主机ModbusIpMaster master ModbusIpMaster.CreateIp(tcpClient);//Ip 主站 byte …

【图解计算机网络】TCP 重传、滑动窗口、流量控制、拥塞控制

TCP 重传、滑动窗口、流量控制、拥塞控制 TCP 重传超时重传快速重传 滑动窗口流量控制拥塞控制慢启动拥塞避免拥塞发生快速恢复 TCP 重传 TCP重传是当发送的报文发生丢失的时候&#xff0c;重新发送丢失报文的一种机制&#xff0c;它是保证TCP协议可靠性的一种机制。 TCP重传…

Redis集群安装

将Redis安装包分别上传到3个文件夹&#xff0c;并解压缩 #编译并指定安装目录 cd /root/usr/local/redis-cluster/redis-7001/redis-6.2.6/ make make PREFIX/root/usr/local/redis-cluster/redis-7001 install # cd /root/usr/local/redis-cluster/redis-7002/redis-6.2.6/ m…

FANUC机器人初始化系统的基本方法和步骤

FANUC机器人初始化系统的基本方法和步骤 首先,在做系统初始化之前,必须做好系统的备份,这里做个镜像备份,更详细的镜像备份步骤可参考以下链接中的内容: FANUC机器人进行全部备份和镜像备份以及加载备份文件的具体操作(图文) 如下图所示,在示教器右边的USB接口上插个…

数据结构(一)绪论

2024年5月11日 一稿 数据元素+数据项 逻辑结构 集合 线性结构 树形结构 图结构

没有公网ip,如何实现外网访问内网?

目前拨号上网是最广泛的上网方式&#xff0c;这种方式优点是价格便宜&#xff0c;缺点是没有固定公网ip&#xff0c;每次重新您拨号ip地址都会变。如果有一台服务器&#xff0c;需要实现外网访问&#xff0c;在没有固定公网ip的环境下&#xff0c;该如何实现呢&#xff1f;使用…

认识卷积神经网络

我们现在开始了解卷积神经网络&#xff0c;卷积神经网络是深度学习在计算机视觉领域的突破性成果&#xff0c;在计算机视觉领域&#xff0c;往往我们输入的图像都很大&#xff0c;使用全连接网络的话&#xff0c;计算的代价较高&#xff0c;图像也很难保留原有的特征&#xff0…