HarmonyOS鸿蒙开发常用4种布局详细说明

介绍一下鸿蒙开发常用4种布局

1、线性布局
2、层叠布局
3、网格布局
4、列表布局

​1. 线性布局（Column/Row）

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row（行）和Column（列）构建，它是其他布局的基础，其子元素在线性方向上（水平或垂直）依次排列，基本形式如下：
Column（列）
子元素在排列方向上的间距，可以通过组件参数space参数进行控制

@Entry
@Component
struct Index {

  build() {
    Column({space:20}) {
      //一行
      Row() {

      }.width('80%').height(50).backgroundColor(Color.Green)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Orange)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Yellow)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Blue)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Red)

    }.width('100%').alignItems(HorizontalAlign.Center)
  }
}

效果：
在这里插入图片描述
Row（行）

@Entry
@Component
struct Index {

  build() {
    Row({space:20}) {
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Red);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Orange);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Red);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Blue);
      Column() {

      }.width('15%').height(50).backgroundColor(Color.Pink);

    }.width('100%').padding(20).backgroundColor('#ccc')
  }
}

在这里插入图片描述
子元素排列与对齐
● 主轴：线性布局容器在布局方向上的轴线，Row容器主轴为横向，Column容器主轴为纵向。
● 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。
子元素沿主轴方向的排列方式
可以通过justifyContent 属性进行控制，可选值如下：

@Entry
@Component
struct Index {

  build() {
    Column({space:20}) {
      //一行
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Green)
      Row() {
      }.width('80%').height(50).backgroundColor(Color.Red)

    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

.justifyContent(FlexAlign.Center)
在这里插入图片描述
.justifyContent(FlexAlign.Start)
在这里插入图片描述
.justifyContent(FlexAlign.End)
在这里插入图片描述
.justifyContent(FlexAlign.SpaceBetween)
在这里插入图片描述
.justifyContent(FlexAlign.SpaceAround)
在这里插入图片描述
.justifyContent(FlexAlign.SpaceEvenly)
在这里插入图片描述
子元素沿交叉轴方向的对齐方式
可以通过alignItems 属性进行控制，可选值如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {

      }.width('80%').height(50).backgroundColor(Color.Red)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Orange)

      Row() {

      }.width('80%').height(50).backgroundColor(Color.Yellow)
    }.width('100%').height('100%').alignItems(HorizontalAlign.Start)
  }
}

.alignItems(HorizontalAlign.Start)
在这里插入图片描述
.alignItems(HorizontalAlign.Center)
在这里插入图片描述
.alignItems(HorizontalAlign.End)
在这里插入图片描述
**

2、层叠布局（Stack）

Stack布局是一种常用的布局方式，它允许将子元素沿垂直于屏幕的方向堆叠在一起，类似于图层的叠加。子元素可以按照其添加顺序依次叠加在一起，后添加的子元素会覆盖之前添加的子元素，层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
Stack容器中的子组件可通过zIndex属性设置其所在的层级，zIndex值越大，层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方
Stack 布局通常会和 position绝对定位配合使用，设置元素左上角相对于父容器左上角偏移位置配合使用，position语法示例：.position({ x: 180, y: 130 })

@Entry
@Component
struct StackAlign {
  @State alignment: Alignment = Alignment.Center;

  build() {
    Column() {
      Stack() {
        Row() {
          Text('1')
        }
        .width(300).height(300).backgroundColor(Color.Yellow)

        Row() {
          Text('2')
        }
        .width(150).height(150).backgroundColor(Color.Red)

        Row() {
          Text('3')
        }
        .width(75).height(75).backgroundColor(Color.Green)

      }
    }
    .width('100%')
  }
}

在这里插入图片描述

.alignContent(Alignment.TopStart)

@Entry
@Component
struct StackAlign {
  @State alignment: Alignment = Alignment.Center;

  build() {
    Column() {
      Stack() {
        Row() {
          Text('1')
        }
        .width(300).height(300).backgroundColor(Color.Blue)

        Row() {
          Text('2')
        }
        .width(150).height(150).backgroundColor(Color.Red)

        Row() {
          Text('3')
        }
        .width(75).height(75).backgroundColor(Color.Yellow)
      }
      .width('100%').backgroundColor('#ccc').alignContent(Alignment.TopStart)    }
    .width('100%')
  }
}

在这里插入图片描述
.alignContent(Alignment.TopEnd）
在这里插入图片描述
.alignContent(Alignment.Top）
在这里插入图片描述
.alignContent(Alignment.Start）
在这里插入图片描述
.alignContent(Alignment.Center）
在这里插入图片描述
.alignContent(Alignment.End）
在这里插入图片描述
.alignContent(Alignment.BottomStart）
在这里插入图片描述
.alignContent(Alignment.BottomEnd）
在这里插入图片描述
.alignContent(Alignment.Bottom）
在这里插入图片描述
**

3、网格布局（Grid）

**
网格布局（Grid）是一种强大的页面排版方式，通过将页面划分为行和列组成的网格，使得子组件可以在这个二维网格中自由定位。网格布局的容器组件为Grid，子组件为GridItem，如下图所示。
用1fr来表示占1个’单位‘

@Entry
@Component
struct Index {
  build() {

    Grid(){
      GridItem(){}.backgroundColor(Color.Red)
      GridItem(){}.backgroundColor(Color.Green)
      GridItem(){}.backgroundColor(Color.Yellow)
      GridItem(){}.backgroundColor(Color.Brown)
      GridItem(){}.backgroundColor(Color.Orange)
      GridItem(){}.backgroundColor(Color.Black)
      GridItem(){}.backgroundColor(Color.Orange)
      GridItem(){}.backgroundColor(Color.Gray)
      GridItem(){}.backgroundColor(Color.Pink)
    }.width('100%').height(400).rowsTemplate('1fr 2fr 1fr').columnsTemplate('1fr 1fr 1fr').rowsGap(10).columnsGap(10)
  }
}

.rowsTemplate(‘1fr 2fr 1fr’)
在这里插入图片描述
.columnsTemplate(‘1fr 2fr 1fr’)
在这里插入图片描述
.rowStart(1).rowEnd(2)
在这里插入图片描述
.rowsGap(10).columnsGap(30)
在这里插入图片描述
当显示内容超出显示区域时，有滚动效果

4、列表布局（List）

列表（List）是一种复杂的容器组件，使用列表可以轻松高效地显示结构化、可滚动的列表信息。列表布局的容器组件为List，子组件为ListItem或者ListItemGroup，其中，ListItem表示单个列表项，ListItemGroup用于列表数据的分组展示，其子组件也是ListItem，如下图所示
.listDirection(Axis.Vertical)

@Entry
@Component
struct Index {
  build() {
    List({space:10}) {
      ListItem() {
        Text('list1')
      }.width('100%').backgroundColor(Color.Red)

      ListItemGroup() {
        ListItem() {
          Text('list2')
        }.width('100%')

        ListItem() {
          Text('list3')
        }.width('100%')

      }.width('100%').backgroundColor(Color.Yellow)
    }.width('100%').listDirection(Axis.Vertical)
  }
}

在这里插入图片描述
.listDirection(Axis.Horizontal)
在这里插入图片描述
.alignListItem(ListItemAlign.End)
在这里插入图片描述
.alignListItem(ListItemAlign.Start)
在这里插入图片描述
.alignListItem(ListItemAlign.Center)
在这里插入图片描述
scrollBar属性可控制滚动条样式

@Entry
@Component
struct Index {
  @State contactsGroups: object[] = [
    {
      title: 'A',
      contacts: [
        '赵云',
        '李白',
        '王思'
      ],
    },
    {
      title: 'B',
      contacts: [
        '白叶',
        '伯乐'
      ],
    },
    {
      title: 'C',
      contacts: [
        '王大',
        '张三'
      ],
    },
    {
      title: 'D',
      contacts: [
        '白龙',
        '小明'
      ],
    },
    {
      title: 'E',
      contacts: [
        '盖伦',
        '石头',
        '光辉'
      ],
    }
  ]

  @Builder Header(item){
    Text(item.title).fontSize(30).backgroundColor('#ccc').width('100%')
  }

  build() {

    List(){
      ForEach(this.contactsGroups,(item)=>{
        ListItemGroup({header:this.Header(item)}){
          ForEach(item.contacts,(user)=>{
            ListItem(){
              Text(user)
            }.width('100%').height(50)
          })
        }
      },item=>JSON.stringify(item));
    }.width('100%').height(300).scrollBar(BarState.On)
  }
}

在这里插入图片描述
以上就是常用布局

关注’猿来编码‘，微信订阅号，回复 ’布局‘，获取

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

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

相关文章

linux驱动开发面试题

linux驱动开发面试题

1.linux中内核空间及用户空间的区别？ 记住“22”，两级分段两级权限。 例如是32位的机器，从内存空间看：顶层1G是内核的，底3G是应用的；从权限看：内核是0级特权，应用是3级特权。 2.用…
阅读更多...
关于Ubuntu虚拟机突然上不了网的问题

关于Ubuntu虚拟机突然上不了网的问题

今天刚重新把Ubuntu虚拟机下回来准备大干一场，结果去吃饭回来虚拟机就上不去网了，具体体现为右上角没有网络的图标，下图是有网络的情况，废话不多说，直接给出解决方案：博客在此 我就是运行了这三行代码就成功…
阅读更多...
记一些有关Element Plus的样式修改

记一些有关Element Plus的样式修改

先记一个放着，后续慢慢补充。。。 一个 Vue 3 UI 框架 | Element Plus Radio 单选框 1、去除radio的圆圈 .box-radio {/deep/ .el-radio__input {display: none;} }
阅读更多...
jupyter notebook 突然莫名奇妙的白屏

jupyter notebook 突然莫名奇妙的白屏

jupyter notebook 突然莫名奇妙的白屏 事件背景： 最近在折腾openai，哎，一言难尽，使用的是conda管理python版本的切换，使用jupyter notebook来运行python程序，其实PyCharm也行，但是，…
阅读更多...
python二级备考（2）-简单应用题

python二级备考（2）-简单应用题

第1套 使用turtle库的turtle. right()函数和turtle.fd()函数绘制一个菱形，边长为200像素，4个内角度数为2个60度和2个120度 键盘输入一组人员的姓名、性别、年龄等信息，信息间采用空格分隔，每人一行，空行回车结束录入&a…
阅读更多...
【基于HTML5的网页设计及应用】——改变文字和背景颜色

【基于HTML5的网页设计及应用】——改变文字和背景颜色

🎃个人专栏： 🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客 🐳Java基础：Java基础_IT闫的博客-CSDN博客 🐋c语言：c语言_IT闫的博客-CSDN博客 🐟MySQL&#xff1a…
阅读更多...
如何通过蓝牙获取手机时间同步时钟RTC万年历走ble或者edr经典蓝牙

如何通过蓝牙获取手机时间同步时钟RTC万年历走ble或者edr经典蓝牙

一、功能简介 KT6368A支持连接手机获取手机的时间信息，可以同步时钟 无需安装任何app，直接使用系统蓝牙即可实现 走的就是edr的经典蓝牙 同时它不影响音频蓝牙，还能保持低功耗的运行 实现的方式就是手机连接好蓝牙芯片KT6368A&#xff0…
阅读更多...
Jz32从上往下打印二叉树

Jz32从上往下打印二叉树

//add()和remove()方法在失败的时候会抛出异常(不推荐) // 用offer 和poll 替代 import java.util.ArrayList; import java.util.*; /** public class TreeNode {int val 0;TreeNode left null;TreeNode right null;public TreeNode(int val) {this.val val;}} */ public …
阅读更多...
NSSCTF 403,444,2145,3845,404,445

NSSCTF 403,444,2145,3845,404,445

[SWPUCTF 2021 新生赛]简简单单的逻辑 py文件，使用pycharm打开进行分析 其中，hex()[2:]：将十进制转化为十六进制 zfill(2)：位数不足2，前补0 这里即将flag的ASCII码与key进行异或，再将每位转化为十六进制…
阅读更多...
大数据 - Spark系列《十四》- spark集群部署模式

大数据 - Spark系列《十四》- spark集群部署模式

Spark系列文章： 大数据 - Spark系列《一》- 从Hadoop到Spark：大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 大数据 - Spark系列《三》- 加载各种数据源创建RDD-CSDN博客 大数据 - Spark系列《…
阅读更多...
kubernetes学习总结

kubernetes学习总结

kubernetes学习大纲 kubernetes的发展历程 Kubernetes的组件和架构 Kubernetes API对象基本组成 Kubernetes中的yml详解1 Kubernetes中的yml详解2 Deployment与Service
阅读更多...
【GIS系列】GeoTools简介及工具类分享

【GIS系列】GeoTools简介及工具类分享

本文将对GeoTools相关概念进行介绍，同时会给大家分享我工作中用到的工具类及使用方法。 作者：后端小肥肠 目录 1.前言 2. GeoTools简介 3. Geotools使用示例 3.1. 开发环境搭建 3.1.1. 所需版本和工具 3.1.2. pom依赖 3.1.3. 示例代码 4. 工具类…
阅读更多...
[VCTF2024纳新赛]-PWN:ezhp_code解析

[VCTF2024纳新赛]-PWN:ezhp_code解析

查看保护 查看ida 简单来说就是创建堆块和删除堆块而已，创建堆块的函数附带有写入函数。 但这里要注意一个程序里面的特殊的地方 在我们创建堆块时，程序会先创建一个0xa0大小堆块，并且这个地方还有个特殊的check_handle函数，如果…
阅读更多...
SpringBoot（整合MyBatis + MyBatis-Plus + MyBatisX插件使用）

SpringBoot（整合MyBatis + MyBatis-Plus + MyBatisX插件使用）

文章目录 1.整合MyBatis1.需求分析2.数据库表设计3.数据库环境配置1.新建maven项目2.pom.xml 引入依赖3.application.yml 配置数据源4.Application.java 编写启动类5.测试6.配置类切换druid数据源7.测试数据源是否成功切换 4.Mybatis基础配置1.编写映射表的bean2.MonsterMapper…
阅读更多...
✅技术社区—通过Canal框架实现MySQL与ElasticSearch的数据同步

✅技术社区—通过Canal框架实现MySQL与ElasticSearch的数据同步

Canal 是一个由阿里巴巴开源的，基于 Java 的数据库变更日志解析的中间件，其原理是基于Binlog订阅的方式实现，模拟一个MySQL Slave 订阅Binlog日志，从而实现CDC，主要用于实现 MySQL 数据库的增量数据同步。它主要的使用…
阅读更多...
理解计算属性等

理解计算属性等

计算属性 计算属性的作用是将写在computed内的写了对应的属性名，属性值都是函数，将这属性值的函数调用之后的返回值赋给属性名的变量。因此其实计算属性内的是值，不是方法，因此写插值等语句是只是写变量，而不是调用。且…
阅读更多...
第三篇 - 概述- IAB受众和技术标准 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第三篇 - 概述- IAB受众和技术标准 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第三篇 - 概述- IAB受众和技术标准​​​​​​​ - 我为什么要翻译介绍美国人工智能科技公司IAB技术标准系列（2） 本文目录 一、IAB技术实验室简介 二、概述及IAB受众 三、资源- IAB倡导的相关视频广告技术标准 四、案例分享-介绍一家数字化营销服务…
阅读更多...
STM32F407_多点电容触摸(GT911)驱动

STM32F407_多点电容触摸(GT911)驱动

目录标题 前言1、简单介绍2、触摸芯片与主机的硬件连接3、内部寄存器3.1、控制寄存器（0X8040）3.2、配置寄存器组（0X8047~0X8100）3.3、状态寄存器(0x814E)3.4、坐标寄存器(0x8150-0x8177) 4、初始化流程4.1、IIC地址选择4.2、更新G…
阅读更多...
OpenHarmony—应用UX设计原则

OpenHarmony—应用UX设计原则

设计原则 当为多种不同的设备开发应用时，有如下设计原则： 差异性 充分了解所要支持的设备，包括屏幕尺寸、交互方式、使用场景、用户人群等，对设备的特性进行针对性的设计。 一致性 除了要考虑每个设备的特性外，还…
阅读更多...
修复 error Delete `␍` prettier/prettier 错误

修复 error Delete `␍` prettier/prettier 错误

修复 error Delete ␍ prettier/prettier 错误 问题背景报错信息报错原因解决办法修改CRLF----针对单个文件yarn run lint --fix 一键修复（官方提供） 问题背景 今天在使用 openapi 自动生成前端接口代码的时候，爆了一个类似 eslint 规范的错…
阅读更多...
最新文章

Copyright @ 2022~2023