【鸿蒙学习笔记】页面布局

news2024/10/6 6:06:37

官方文档：布局概述

常见页面结构图

在这里插入图片描述

布局元素的组成

在这里插入图片描述

线性布局（Row、Column）

了解思路即可，更多样例去看官方文档

@Entry
@Component
struct PracExample {
  build() {
    Column() {
      Column({ space: 20 }) {
        Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
        Row().width('90%').height(50).backgroundColor(0xF5DEB3)
        Row().width('90%').height(50).backgroundColor(0xD2B48C)
        Row().width('90%').height(50).backgroundColor(0xF5DEB3)
      }.width('100%')

      Divider().height(20)

      Row({ space: 35 }) {
        Text('space: 35').fontSize(15).fontColor(Color.Gray)
        Row().width('10%').height(150).backgroundColor(0xF5DEB3)
        Row().width('10%').height(150).backgroundColor(0xD2B48C)
        Row().width('10%').height(150).backgroundColor(0xF5DEB3)
      }.width('90%')
    }
  }
}

在这里插入图片描述

层叠布局 (Stack)

了解思路即可，更多样例去看官方文档

@Entry
@Component
struct PracExample {
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Text('Stack').width('90%').height('100%').backgroundColor(Color.Yellow).align(Alignment.BottomStart)
      Text('Item 1').width('70%').height('80%').backgroundColor(Color.Green).align(Alignment.BottomStart)
      Text('Item 2').width('50%').height('60%').backgroundColor(Color.Pink).align(Alignment.BottomStart)
    }.width('100%').height(150).margin({ top: 5 })
  }
}

在这里插入图片描述

弹性布局（Flex）

了解思路即可，更多样例去看官方文档
在这里插入图片描述

布局方向

@Entry
@Component
struct PracExample {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Row }) {
        Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(Color.Orange)

      Flex({ direction: FlexDirection.RowReverse }) {
        Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(0xAFEEEE)

      Flex({ direction: FlexDirection.Column }) {
        Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(Color.Orange)

      Flex({ direction: FlexDirection.ColumnReverse }) {
        Text('1').width('100%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('100%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('100%').height(50).backgroundColor(0xF5DEB3)
      }.height(70).width('100%').padding(10).backgroundColor(0xAFEEEE)
    }
  }
}

在这里插入图片描述

布局换行

@Entry
@Component
struct PracExample {
  build() {
    Column() {
      Flex({ wrap: FlexWrap.NoWrap }) {
        Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
      }.width('100%').padding(10).backgroundColor(Color.Orange)

      Flex({ wrap: FlexWrap.Wrap }) {
        Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('50%').height(50).backgroundColor(0xD2B48C)
      }.width('100%').padding(10).backgroundColor(0xAFEEEE)

      Flex({ wrap: FlexWrap.WrapReverse}) {
        Text('1').width('50%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('50%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('50%').height(50).backgroundColor(0xF5DEB3)
      }.width('100%').padding(10).backgroundColor(Color.Orange)
    }
  }
}

在这里插入图片描述

主轴对齐方式

@Entry
@Component
struct PracExample {
  build() {
    Flex({ justifyContent: FlexAlign.Start }) {
        Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
        Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
        Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
      }
      .width('90%')
      .padding({ 'top': 10, 'bottom': 10 })
      .backgroundColor(0xAFEEEE)
  }
}

在这里插入图片描述

未完待续

相对布局 (RelativeContainer)

了解思路即可，更多样例去看官方文档

@Entry
@Component
struct PracExample {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100).backgroundColor(Color.Red)
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            left: { anchor: "__container__", align: HorizontalAlign.Start }
          }).id("row1")

        Row().width(100).backgroundColor(Color.Black)
          .alignRules({
            top: { anchor: "__container__", align: VerticalAlign.Top },
            right: { anchor: "__container__", align: HorizontalAlign.End },
            bottom: { anchor: "row1", align: VerticalAlign.Center },
          }).id("row2")

        Row().height(100).backgroundColor(Color.Blue)
          .alignRules({
            top: { anchor: "row1", align: VerticalAlign.Bottom },
            left: { anchor: "row1", align: HorizontalAlign.Start },
            right: { anchor: "row2", align: HorizontalAlign.Start }
          }).id("row3")

        Row().backgroundColor(Color.Green)
          .alignRules({
            top: { anchor: "row3", align: VerticalAlign.Bottom },
            left: { anchor: "row1", align: HorizontalAlign.Center },
            right: { anchor: "row2", align: HorizontalAlign.End },
            bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
          }).id("row4")
      }.width(300).height(300).margin({ left: 50 }).border({ width: 2, color: Color.Orange })
    }.height('100%')
  }
}

在这里插入图片描述

栅格布局 (GridRow/GridCol)

了解思路即可，更多样例去看官方文档

@Entry
@Component
struct PracExample {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];

  build() {
    Column() {
      GridRow({ columns: 10 }) {
        ForEach(this.bgColors, (color: Color, index?: number | undefined) => {
          GridCol({ span: 2 }) {
            Row() {Text(`${index}`)}.width('100%').height('50vp')
          }.backgroundColor(color)
        })
      }
    }
  }
}

在这里插入图片描述

媒体查询 (@ohos.mediaquery)

需要消化

创建列表 (List)

列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。

@Entry
@Component
struct PracExample {
  build() {
    Column({ space: 5 }) {
      List() {
        ListItem() {
          Row() {
            Image($r('app.media.icon')).width(40).height(40).margin(10)
            Text('小明').fontSize(20)
          }
        }

        ListItem() {
          Row() {
            Image($r('app.media.ic_main')).width(40).height(40).margin(10)
            Text('小红').fontSize(20)
          }
        }
      }
    }.width('100%').height('100%')
  }
}

在这里插入图片描述

创建网格 (Grid/GridItem)

网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

@Entry
@Component
struct PracExample {
  @State services: Array<string> = ['会议', '投票', '签到', '打印']

  build() {
    Column() {
      Grid() {
        ForEach(this.services, (service:string) => {
          GridItem() {Text(service)}
        }, (service:string):string => service)
      }
      .rowsTemplate(('1fr 1fr') as string)
      .columnsTemplate(('1fr 1fr') as string)
    }
  }
}

在这里插入图片描述

创建轮播 (Swiper)

Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

@Entry
@Component
struct PracExample {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        Text('0').width(250).height(250).backgroundColor(Color.Gray).textAlign(TextAlign.Center).fontSize(30)
        Text('1').width(250).height(250).backgroundColor(Color.Green).textAlign(TextAlign.Center).fontSize(30)
        Text('2').width(250).height(250).backgroundColor(Color.Pink).textAlign(TextAlign.Center).fontSize(30)
      }.indicator(true)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext(); // 通过controller切换到后一页
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious(); // 通过controller切换到前一页
          })
      }.margin(5)
    }.width('100%').margin({ top: 5 })
  }
}

在这里插入图片描述

选项卡 (Tabs)

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。

@Entry
@Component
struct PracExample {
  build() {
    Column({ space: 5 }) {
      Tabs() {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }.width('100%').margin({ top: 5 })
  }
}

在这里插入图片描述

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

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

相关文章

C语言 指针和数组——指针和二维数组之间的关系

C语言 指针和数组——指针和二维数组之间的关系

目录 换个角度看二维数组 指向二维数组的行指针 按行指针访问二维数组元素 再换一个角度看二维数组 按列指针访问二维数组元素 二维数组作函数参数 指向二维数组的行指针作函数参数 指向二维数组的列指针作函数参数​编辑 用const保护你传给函数的数据 小结 换个角度看…
阅读更多...
Mysql explain语句详解与实例展示

Mysql explain语句详解与实例展示

首先简单介绍sql&#xff1a; SQL语言共分为四大类&#xff1a;数据查询语言DQL&#xff0c;数据操纵语言DML&#xff0c;数据定义语言DDL&#xff0c;数据控制语言DCL。 1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句&#xff0c;FROM子句&#xff0c;WHERE子句…
阅读更多...
Kafka（一）基础介绍

Kafka（一）基础介绍

一&#xff0c;Kafka集群 一个典型的 Kafka 体系架构包括若Producer、Broker、Consumer&#xff0c;以及一个ZooKeeper集群&#xff0c;如图所示。 ZooKeeper&#xff1a;Kafka负责集群元数据的管理、控制器的选举等操作的&#xff1b; Producer&#xff1a;将消息发送到Broker…
阅读更多...
k8s学习之cobra命令库学习

k8s学习之cobra命令库学习

1.前言 打开k8s代码的时候&#xff0c;我发现基本上那几个核心服务都是使用cobra库作为命令行处理的能力。因此&#xff0c;为了对代码之后的代码学习的有比较深入的理解&#xff0c;因此先基于这个库写个demo&#xff0c;加深对这个库的一些理解吧 2.cobra库的基本简介 Git…
阅读更多...
《昇思 25 天学习打卡营第 11 天 | ResNet50 图像分类 》

《昇思 25 天学习打卡营第 11 天 | ResNet50 图像分类 》

《昇思 25 天学习打卡营第 11 天 | ResNet50 图像分类 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 计算机视觉-图像分类&#xff0c;很感兴趣 且今日精神颇佳&#xff0c;一个字&#xff0c;学啊 上一节&…
阅读更多...
张量分解(1)——初探张量

张量分解(1)——初探张量

&#x1f345; 写在前面 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;这里是hyk写算法了吗&#xff0c;一枚致力于学习算法和人工智能领域的小菜鸟。 &#x1f50e;个人主页&#xff1a;主页链接&#xff08;欢迎各位大佬光临指导&#xff09; ⭐️近…
阅读更多...
MybatisPlus实现插入/修改数据自动设置时间

MybatisPlus实现插入/修改数据自动设置时间

引言 插入数据时自动设置当前时间&#xff0c;更新数据时自动修改日期为修改时的日期。 使用MybatisPlus的扩展接口MetaObjectHandler 步骤 实现接口 实体类加注解 实现接口 package com.example.vueelementson.common;import com.baomidou.mybatisplus.core.handlers.M…
阅读更多...
GraalVM上的多语言混合开发

GraalVM上的多语言混合开发

上篇文件我们介绍了GraalVM强大的静态编译功能，能够让Java应用程序摆脱虚拟机的束缚，像其它本地编译的应用一样直接运行。那么GraalVM的神奇之处仅限于此吗？今天我们再来看看它的另一个重要特性—多语言混合开发 多语言平台 Java并不是唯一运行在JVM上的语言，这个我们都应…
阅读更多...
Qt/C++音视频开发78-获取本地摄像头支持的分辨率/帧率/格式等信息/mjpeg/yuyv/h264

Qt/C++音视频开发78-获取本地摄像头支持的分辨率/帧率/格式等信息/mjpeg/yuyv/h264

一、前言 上一篇文章讲到用ffmpeg命令方式执行打印到日志输出&#xff0c;可以拿到本地摄像头设备信息&#xff0c;顺藤摸瓜&#xff0c;发现可以通过执行 ffmpeg -f dshow -list_options true -i video“Webcam” 命令获取指定摄像头设备的分辨率帧率格式等信息&#xff0c;会…
阅读更多...
ts-01.泛型(函数和接口)

ts-01.泛型(函数和接口)

泛型 泛的意思是:漂浮, 比如泛舟; 泛型: 类型漂浮未定 > 动态类型. 用于: 函数 接口 类 T extends string | number 泛型约束 function a<T any, K> (: number, value: T) { // 泛型参数设置默认值anyconst arr Array<T>(l).fill(value) // [foo, foo, foo] }…
阅读更多...
IntelliJ IDEA菜单不见了设置找回方法

IntelliJ IDEA菜单不见了设置找回方法

通过CtrAltS键按出设置 找到View,然后自定义一个快捷键,然后保存 使用自定义快捷键弹出改界面,点击Main Menu即可
阅读更多...
树莓派4B_OpenCv学习笔记19：OpenCV舵机云台物体追踪

树莓派4B_OpenCv学习笔记19：OpenCV舵机云台物体追踪

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; Python 版本3.7.3&#xff1a; ​​ 今日学习&#xff1…
阅读更多...
# 三 JS的流程控制和函数

# 三 JS的流程控制和函数

三 JS的流程控制和函数 3.1 JS分支结构 if结构 这里的if结构几乎和JAVA中的一样,需要注意的是 if()中的非空字符串会被认为是trueif()中的非零数字会被认为是true 代码 if(false){// 非空字符串 if判断为trueconsole.log(true) }else{console.log(false) } if(){// 长度为0…
阅读更多...
Linux系统(Centos)下MySQL数据库中文乱码问题解决

Linux系统(Centos)下MySQL数据库中文乱码问题解决

问题描述&#xff1a;在进行数据库使用过程中&#xff0c;数据库里的数据中文都显示乱码。操作数据库的时候&#xff0c;会出现中文乱码问题。 解决方法如下&#xff1a; 第一步&#xff1a;打开虚拟机进入系统&#xff0c;启动MySQL。 第二步&#xff1a;连接登录MySQL输入…
阅读更多...
排序 -- 万能测试oj

排序 -- 万能测试oj

. - 力扣&#xff08;LeetCode&#xff09; 这道题我们可以使用我们学过的那些常见的排序方法来进行解答 //插入排序 void InsertSort(int* nums, int n) {for (int i 0; i < n-1; i){int end i;int tmp nums[end 1];while (end > 0){if (tmp < nums[end]){nums[…
阅读更多...
GuitarPro2024音乐软件#创作神器#音乐梦想

GuitarPro2024音乐软件#创作神器#音乐梦想

嘿&#xff0c;亲爱的朋友们&#xff01;&#x1f44b;&#x1f44b;&#x1f44b;今天我要给你们安利一款超赞的软件——Guitar Pro。这款软件简直是吉他手的福音啊&#xff01;&#x1f389;&#x1f389;&#x1f389; Guitar Pro免费绿色永久安装包下载&#xff1a;&#…
阅读更多...
数据结构（其一）--基础知识篇

数据结构（其一）--基础知识篇

1. 数据结构三要素 1.1 数据结构的运算 即&#xff0c;增删改查 1.2 数据结构的存储结构 2. 数据类型&#xff0c;抽象数据类型 数据类型&#xff1a; &#xff08;1&#xff09;. 原子类型&#xff1a;bool、int... &#xff08;2&#xff09;. 结构类型&#xff1a;类、…
阅读更多...
赤壁之战的烽火台 - 观察者模式

赤壁之战的烽火台 - 观察者模式

“当烽火连三月&#xff0c;家书抵万金&#xff1b;设计模式得其法&#xff0c;千军如一心。” 在波澜壮阔的三国历史长河中&#xff0c;赤壁之战无疑是一场改变乾坤的重要战役。而在这场战役中&#xff0c;一个看似简单却至关重要的系统发挥了巨大作用——烽火台。这个古老的…
阅读更多...
LeetCode 算法：二叉树中的最大路径和 c++

LeetCode 算法：二叉树中的最大路径和 c++

原题链接&#x1f517;&#xff1a;二叉树中的最大路径和 难度&#xff1a;困难⭐️⭐️⭐️ 题目 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;…
阅读更多...
赋值运算符重载和const成员函数和 const函数

赋值运算符重载和const成员函数和 const函数

文章目录 1.运算符重载(1)(2)运算符重载的语法&#xff1a;(3)运算符重载的注意事项&#xff1a;(4)前置和后置重载区别 2.const成员函数3.取地址及const取地址操作符重载4.总结 1.运算符重载 (1) 我们知道内置类型(整形&#xff0c;字符型&#xff0c;浮点型…)可以进行一系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023