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

news/2024/7/21 10:41:21 标签: harmonyos, 华为, 布局

介绍一下鸿蒙开发常用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)
  }
}

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

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


http://www.niftyadmin.cn/n/5434161.html

相关文章

【Docker】一文趣谈Docker

【Docker】一文趣谈Docker

🏡浩泽学编程：个人主页 🔥 推荐专栏：《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》《项目实战》 🛸学无止境，不骄不躁，知行合一 文章目录 …
阅读更多...
【C#图解教程】笔记

【C#图解教程】笔记

文章目录 1. C#和.NET框架.NET框架的组成.NET框架的特点CLRCLICLI的重要组成部分各种缩写 2. C#编程概括标识符命名规则： 多重标记和值格式化数字字符串对齐说明符格式字段标准数字格式说明符标准数字格式说明符 表 3. 类型、存储和变量数据成员和函数成员预定义类型…
阅读更多...
06.共享内存

06.共享内存

1.内存映射（mmap） 我们在单片机中首先接触到了映射的概念 将一个寄存器的地址映射到了另外的一个存储空间中 内存映射: 内存映射（Memory Mapping）是一种在计算机科学中使用的技术，它允许将文件或其他设备的内容映射…
阅读更多...
ubuntu编译rk3588异常

ubuntu编译rk3588异常

问题现象 在ubuntu上编译 rk3588 的kernel时，报如下错误： LZ4C arch/arm64/boot/Image.lz4 Incorrect parameters Usage : lz4 [arg] [input] [output] input : a filename with no FILE, or when FILE is - or stdin, read sta…
阅读更多...
【组合回溯】Leetcode 131. 分割回文串

【组合回溯】Leetcode 131. 分割回文串

【组合回溯】Leetcode 131. 分割回文串 解法 切割组合回溯 ---------------🎈🎈131. 分割回文串 题目链接🎈🎈------------------- 解法 切割组合回溯 全局变量：result存储所有path的集合，path用来记录切…
阅读更多...
Linux操作系统及进程（一）

Linux操作系统及进程（一）

一、操作系统的概念 概念 ：任何计算机系统都包含一个基本的程序集合，称为操作系统(OS)。笼统的理解，操作系统包括： 内核（进程管理，内存管理，文件管理，驱动管理） 其他程…
阅读更多...
Jupyter Notebook出错提示An error occurred while retrieving package information解决办法

Jupyter Notebook出错提示An error occurred while retrieving package information解决办法

出错日志信息： To access the notebook, open this file in a browser:file:///C:/Users/colda/AppData/Roaming/jupyter/runtime/nbserver-14564-open.htmlOr copy and paste one of these URLs:http://localhost:8888/?token3c0113e5da07c0b8b8c9de74ffb453c5047…
阅读更多...
办公DevOps：即时消息是其他系统的最后一公里

办公DevOps：即时消息是其他系统的最后一公里

DevOps的理念可以落实到办公领域。办公DevOps的关键点是: 即时消息成为其他系统的最后一公里。其他系统的条目可以作为卡片通过即时消息发送，也可以在即时消息系统中点开卡片进行后续处理，而不需要打开其他系统。 其他系统的条目在即时消息中以类似“小程…
阅读更多...
最新文章

Copyright @ 2022~2023