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

官方文档：布局概述

常见页面结构图

在这里插入图片描述

布局元素的组成

在这里插入图片描述

线性布局（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 })
  }
}

在这里插入图片描述

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

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

相关文章

10岁女孩儿童编程规划

10岁女孩儿童编程规划

目录 1. 背景2. 为什么让她学儿童编程&#xff1f;3. 学习方法&目标4. 整体规划4.1 Python 入门与基础4.1.1 目标4.1.2 学习内容 4.2 C 入门与基础4.2.1 目标4.2.2 学习内容 4.3 算法进阶4.3.1 目标4.3.2 学习内容 4.4 高级编程4.4.1 目标4.4.2 学习内容 4.5 参与编程赛事4…
阅读更多...
Java套红：指定位置合并文档-NiceXWPFDocument

Java套红：指定位置合并文档-NiceXWPFDocument

需求&#xff1a;做个公文系统&#xff0c;需要将正文文档在某个节点点击套红按钮&#xff0c;实现文档套红 试了很多方法&#xff0c;大多数网上能查到但是实际代码不能找到关键方法&#xff0c;可能是跟包的版本有关系&#xff0c;下面记录能用的这个。 一&#xff1a;添加依…
阅读更多...
深入源码，探究#、$号替换符的区别

深入源码，探究#、$号替换符的区别

在Mybatis的日常使用过程中以及在一些技术论坛上我们都能常常听到&#xff0c;不要使用$符号来进行SQL的编写&#xff0c;要使用#符号&#xff0c;否则会有SQL注入的风险。那么&#xff0c;为什么在使用$符号时会有注入的风险呢&#xff0c;以及#号为什么不会有风险呢&#xff…
阅读更多...
spark任务，使用 repartition 对数据进行了重新分区，但任务输入数据大小仍存在不均衡

spark任务，使用 repartition 对数据进行了重新分区，但任务输入数据大小仍存在不均衡

目录 目录 确认 Spark 任务重新分区后的数据不均衡 1. 检查分区大小 2. 使用 DataFrame API 检查分区 3. 使用 Spark UI 查看分区情况 4. 使用日志记录分区信息 可能原因 1. 数据分布不均衡 2. 分区策略 3. 数据预处理 解决方案 1. 检查数据分布 2. 使用 coalesce…
阅读更多...
Java反射与Fastjson的危险反序列化

Java反射与Fastjson的危险反序列化

什么是Java反射&#xff1f; 在前文中&#xff0c;我们有一行代码 Computer macBookPro JSON.parseObject(preReceive,Computer.class); 这行代码是什么意思呢&#xff1f;看起来好像就是我们声明了一个名为 macBookPro 的 Computer 类&#xff0c;它由 fastjson 的 parseObje…
阅读更多...
工程仪器振弦采集仪的设计与研发进展

工程仪器振弦采集仪的设计与研发进展

工程仪器振弦采集仪的设计与研发进展 工程仪器振弦采集仪是一种用于测量和记录物体振动参数的仪器。它能够实时采集物体的振动信号&#xff0c;并通过内部的传感器将振动信号转化为电信号&#xff0c;然后进行信号放大和处理&#xff0c;最终以数字形式显示或存储。 河北稳控科…
阅读更多...
2024图纸加密软件TOP8排行丨企业保护数据安全最佳选择

2024图纸加密软件TOP8排行丨企业保护数据安全最佳选择

图纸往往包含了设计人员的创意和智慧&#xff0c;是企业的重要资产。加密可以防止未经授权的复制、分发或使用&#xff0c;保护设计的原创性和独特性不被侵犯。 许多图纸可能含有公司的商业秘密&#xff0c;比如特定的技术参数、生产流程或是产品设计等。这些信息若泄露给竞争…
阅读更多...
股票数据分析（K线图、均值图、MACD图、RSI图）--股票日数据

股票数据分析（K线图、均值图、MACD图、RSI图）--股票日数据

数据 数据是上证指数日行情数据&#xff0c;股票代码000002.sz&#xff0c;原始数据shdata示例如下&#xff1a; 读取数据&#xff1a; import numpy as np import pandas as pd import mplfinance as mpf import matplotlib.pyplot as plt from datetime import datetime imp…
阅读更多...
JVM原理（二十）：JVM虚拟机内存的三特性详解

JVM原理（二十）：JVM虚拟机内存的三特性详解

1. 原子性、可进行、有序性 1.1. 原子性 Java内存模型围绕着在并发过程中如何处理原子性、可见性和有序性这三个特征来建立的。 Java内存模型来直接保证的原子性变量操作包括read、load、assign、use、store和write这六个。我们大致可以认为&#xff0c;基本数据类型的访问、…
阅读更多...
vllm技术分享

vllm技术分享

vLLM Question&#xff1a; 推理所生成的序列长度大小是无法事先预知的&#xff0c;大部分框架会按照(batch_size, max_seq_len)这样的固定尺寸&#xff0c;在gpu显存上预先为一条请求开辟一块连续的矩形存储空间。这样的分配方法很容易引起“gpu显存利用不足”的问题&#xff…
阅读更多...
ICE启动AI：人工智能高频交易平台测试进入尾段

ICE启动AI：人工智能高频交易平台测试进入尾段

Intercontinental Exchange, Inc.(ICE)宣布,其革命性AI高频交易平台ICE.AI已经完成搭建,目前已全面进入测试最终阶段,该平台利用先进的人工智能技术,主旨在提升交易效率和市场分析的精确度,即将为全球交易者带来前所未有的交易体验。 性能验证: ICE.AI平台在测试阶段主要进行性…
阅读更多...
【QT中堆栈布局的实现】

【QT中堆栈布局的实现】

学习分享 1、环境设置&#xff0c;头文件2、.h文件2.1、主界面.h文件2.2、对话界面1.h文件2.3、对话界面2.h文件 3、.cpp文件3.1、对话界面1.cpp3.2、对话界面2.cpp3.3、主界面.cpp3.4、main.cpp 1、环境设置&#xff0c;头文件 该示例使用C14实现&#xff0c;因此在QT项目pro文…
阅读更多...
【银河麒麟】系统内存使用异常现象分析及建议

【银河麒麟】系统内存使用异常现象分析及建议

1.现象描述 问题机器系统内存占用长时间90%以上&#xff0c;同时伴随着高iowait&#xff0c;在故障时无法ssh登录&#xff0c;同时也影响生产业务。但之后系统内存占用会突然掉下来&#xff0c;在内存自己掉下来后能ssh登录。 2.显示分析 2.1 sa日志分析 查看问题机器3月15日…
阅读更多...
什么是企业服务总线？它包含哪些技术组件？

什么是企业服务总线？它包含哪些技术组件？

我们每个人都会去医院&#xff0c;您描述下我们去医院的场景&#xff0c;然后引出这个挂号流程&#xff0c;通过挂号流程中的一个问题或者什么东西来吸引他的好奇心&#xff0c;这样呢&#xff1f;会比现在的预设场景好一些。我举个例子&#xff0c;人工智能怎么帮人看病。如果…
阅读更多...
关于put提交不了参数的解决办法

关于put提交不了参数的解决办法

html中form表单只支持GET与POST请求&#xff0c;而DELETE、PUT等method并不支持&#xff0c; 如图所示 参数请求改成RequestBody&#xff0c;用json格式传参即可解决问题
阅读更多...
AI直播手机APP震撼发布！3大场景直播，60秒一键开播！

AI直播手机APP震撼发布！3大场景直播，60秒一键开播！

无需繁琐准备&#xff0c;无需复杂操作&#xff0c;60 秒在抖音及其他平台一键开播&#xff0c;青否数字人AI直播APP正式发布&#xff01; 3大AI直播类型&#xff0c;6大核心 AIGC 技术&#xff0c;让新手小白也能轻松搞定数字人在全平台直播&#xff0c;并且有效规避违规风险&…
阅读更多...
数据跨境法案：美国篇上

数据跨境法案：美国篇上

近年来随着全球数字化的加速发展&#xff0c;数据已成为国家竞争力的重要基石。在这样的背景下&#xff0c;中国软件和技术出海的场景日益丰富。本系列邀请到在跨境数据方面的研究人员针对海外的数据跨境政策进行解读。 本期将针对美国对数据跨境流动的态度和政策进行阐释。过…
阅读更多...
代码随想录算法训练营Day62|冗余连接、冗余连接II

代码随想录算法训练营Day62|冗余连接、冗余连接II

冗余连接 108. 冗余连接 (kamacoder.com) 考虑使用并查集&#xff0c;逐次将s、t加入并查集中&#xff0c;当发现并查集中find(u)和find(v)相同时&#xff0c;输出u和v&#xff0c;表示删除的边即可。 #include <iostream> #include <vector> using namespace s…
阅读更多...
游戏开黑语音-使用云服务器部署teamspeak服务（系统Ubuntu 20.04 LTS)

游戏开黑语音-使用云服务器部署teamspeak服务（系统Ubuntu 20.04 LTS)

目录 前置物品服务器调整及部署1.重装系统2.换源3.下载teamspeak服务端并部署 连接服务器参考 前置物品 一台云服务器&#xff08;系统&#xff1a;Ubuntu 20.04 LTS) 服务器调整及部署 1.重装系统 在腾讯云官网的主机控制台内&#xff0c;选择重装系统 (由于之前为了快速和…
阅读更多...
【收藏】欧盟CE、美国FDA法规及标准查询常用网站

【收藏】欧盟CE、美国FDA法规及标准查询常用网站

01 CE法规&标准查询网站 医疗器械主管部门的网站 网址: https://www.camd-europe.eu/ 简介: CAMD的全称是Competent authorities for medical devices&#xff0c;翻译成中文叫做医疗器械监管机构&#xff0c;实际上它指的是欧盟成员国医疗器械监管机构的联盟&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023