HarmonyOS 开发基础（八）Row和Column

HarmonyOS 开发基础（八）Row和Column

一、Column 容器

1、容器说明：
  • 纵向容器
  • 主轴方向：从上到下纵向
  • 交叉轴方向：从左到右横向
2、容器属性：
  1. justifyContent：设置子元素在主轴方向的对齐格式，参数 FlexAlign 枚举
  2. alignItems：设置子元素在交叉轴方向的对齐格式，参数 HorizontalAlign 枚举
3、参数说明：
  • space：内元素之间的间隔，对象值，如：{space: 20}，元素之间的间隔为20

二、Row 容器

1、容器说明：
  • 横向容器
  • 主轴方向：从左到右横向
  • 交叉轴方向：从上到下纵向
2、容器属性：
  1. justifyContent：设置子元素在主轴方向的对齐格式，参数 FlexAlign 枚举
  2. alignItems：设置子元素在交叉轴方向的对齐格式，参数 VerticalAlign 枚举
3、参数说明：
  • space：内元素之间的间隔，对象值，如：{space: 20}，元素之间的间隔为20

在这里插入图片描述

三、Column 和 Row 的 justifyContent 属性说明

1、Column：justifyContent 属性说明
  1. FlexAlign.Start：默认参数，主轴方向，从上依次排序往下
  2. FlexAlign.Center：主轴方向，居中依次排序往下
  3. FlexAlign.End：主轴方向，从下边位置排序保持不变
  4. FlexAlign.SpaceBetween：主轴方向，平均分配，上下顶格
  5. FlexAlign.SpaceAround：主轴方向，平均分配，距离上下平均分配的一半
  6. FlexAlign.SpaceEvenly：主轴方向，平均分配，距离上下平均分配
2、Row：justifyContent 属性说明
  1. FlexAlign.Start：默认参数，主轴方向，从左位置依次排序往右
  2. FlexAlign.Center：主轴方向，居中依次排序往右
  3. FlexAlign.End：主轴方向，从右边位置排序保持不变
  4. FlexAlign.SpaceBetween：主轴方向，平均分配，左右顶格
  5. FlexAlign.SpaceAround：主轴方向，平均分配，距离左右平均分配的一半
  6. FlexAlign.SpaceEvenly：主轴方向，平均分配，距离左右平均分配

在这里插入图片描述

四、Column 和 Row 的 alignItems 属性说明

1、Column：alignItems 属性说明
  1. HorizontalAlign.Start：默认参数，交叉轴方向，左边顶格
  2. HorizontalAlign.Center：交叉轴方向，居中
  3. HorizontalAlign.End：交叉轴方向，右边顶格
2、Row：alignItems 属性说明
  1. HorizontalAlign.Start：默认参数，交叉轴方向，上边顶格
  2. HorizontalAlign.Center：交叉轴方向，居中
  3. HorizontalAlign.End：交叉轴方向，下边顶格

在这里插入图片描述

五、基础使用

在这里插入图片描述

@Entry
@Component
struct Index {
  build() {
    Column() {
      // Column：纵向
      // space 参数：内元素之间的间距
      Column({space: 20}) {
        // Column 里面的第一行内容
        Row() {
          // Text：单行文本组件
          Text('第一行')
            .fontColor('#ffffff')
        }
          // width：属性方法，设置 Row 宽度
          .width('90%')
          // height：属性方法，设置 Row 高度
          .height(40)
          // justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Row 的背景颜色
          .backgroundColor('#63c3ff')

        // Column 里面的第二行内容
        Row() {
          Text('第二行')
            .fontColor('#ffffff')
        }
          // width：属性方法，设置 Row 宽度
          .width('90%')
          // height：属性方法，设置 Row 高度
          .height(40)
          // justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Row 的背景颜色
          .backgroundColor('#63c3ff')

        // Column 里面的第三行内容
        Row() {
          Text('第三行')
            .fontColor('#ffffff')
        }
          // width：属性方法，设置 Row 宽度
          .width('90%')
          // height：属性方法，设置 Row 高度
          .height(40)
          // justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Row 的背景颜色
          .backgroundColor('#63c3ff')

        // Column 里面的第四行内容
        Row() {
          Text('第四行')
            .fontColor('#ffffff')
        }
          // width：属性方法，设置 Row 宽度
          .width('90%')
          // height：属性方法，设置 Row 高度
          .height(40)
          // justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Row 的背景颜色
          .backgroundColor('#63c3ff')
      }
        // width：属性方法，设置 Column 宽度
        .width('100%')
        // margin：属性方法，设置 Column 外边距
        .margin({top: 20})
        // alignItems：属性方法，设置子元素在交叉轴的对齐方式，HorizontalAlign.Center：居中对齐
        .alignItems(HorizontalAlign.Center)


      // Row容器：横向
      Row() {
        // Row 对面的第一列内容
        Column() {
          Text('第一列')
            .fontColor('#ffffff')
        }
          // height：属性方法，设置 Column 高度
          .height(180)
          // justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Column 的背景颜色
          .backgroundColor('#63c3ff')

        // Row 对面的第二列内容
        Column() {
          Text('第二列')
            .fontColor('#ffffff')
        }
          // height：属性方法，设置 Column 高度
          .height(180)
          // justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Column 的背景颜色
          .backgroundColor('#63c3ff')

        // Row 对面的第三列内容
        Column() {
          Text('第三列')
            .fontColor('#ffffff')
        }
          // height：属性方法，设置 Column 高度
          .height(180)
          // justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Column 的背景颜色
          .backgroundColor('#63c3ff')

        // Row 对面的第四列内容
        Column() {
          Text('第四列')
            .fontColor('#ffffff')
        }
          // height：属性方法，设置 Column 高度
          .height(180)
          // justifyContent：设置子元素在主轴的对齐方式，FlexAlign.Center：居中对齐
          .justifyContent(FlexAlign.Center)
          // backgroundColor：属性方法，设置 Column 的背景颜色
          .backgroundColor('#63c3ff')
      }
        // width：属性方法，设置 Column 宽度
        .width('90%')
        // margin：属性方法，设置 Column 外边距
        .margin({top: 80})
        // alignItems：属性方法，设置子元素在交叉轴的对齐方式，VerticalAlign.Center：居中对齐
        .alignItems(VerticalAlign.Center)
        // justifyContent：属性方法，设置子元素在主轴的对齐方式，FlexAlign.SpaceBetween：平均分配
        .justifyContent(FlexAlign.SpaceBetween)
    }
  }
}

六、高级使用

在这里插入图片描述

@Entry
@Component
struct Index {
  build() {
    Column() {
      // 名片管理
      Column() {
        // 第一行
        Row() {
          Row() {
            Image($r('app.media.icon1'))
              .width(20)
              .height(20)
              .margin({right: 5})
            Text('我的名片数据')
              .fontSize(14)
          }

          Row() {
            Text('我的访客')
              .fontSize(14)
            Image($r('app.media.icon2'))
              .width(9)
              .height(10)
              .margin({left: 3})
          }
        }
        .width('100%')
        .margin({bottom: 20})
        .justifyContent(FlexAlign.SpaceBetween)


        // 第二行
        Row() {
          Column() {
            Text('0')
              .fontWeight(600)
            Text('被访问(次)')
              .fontSize(10)
          }
          .alignItems(HorizontalAlign.Center)

          Column() {
            Text('0')
              .fontWeight(600)
            Text('今日被访问(次)')
              .fontSize(10)
          }
          .alignItems(HorizontalAlign.Center)

          Column() {
            Text('0')
              .fontWeight(600)
            Text('提交名片数(次)')
              .fontSize(10)
          }
          .alignItems(HorizontalAlign.Center)

          Column() {
            Text('0')
              .fontWeight(600)
            Text('收名片数(次)')
              .fontSize(10)
          }
          .alignItems(HorizontalAlign.Center)
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)


        // 第三行
        Row() {
          Column() {
            Image($r('app.media.icon3'))
              .width(28)
              .height(28)
            Text('分享名片')
              .fontSize(11)
          }

          Column() {
            Image($r('app.media.icon4'))
              .width(28)
              .height(28)
            Text('编辑名片')
              .fontSize(11)
          }

          Column() {
            Image($r('app.media.icon5'))
              .width(28)
              .height(28)
            Text('下载名片')
              .fontSize(11)
          }

          Column() {
            Image($r('app.media.icon6'))
              .width(28)
              .height(28)
            Text('名片夹')
              .fontSize(11)
          }
        }
          .width('100%')
          .margin({top: 20})
          .justifyContent(FlexAlign.SpaceBetween)
      }
        .width('90%')
        .margin({top: 20})
        .padding(20)
        .borderRadius(8)
        .backgroundColor('#dddddd')
    }
      .width('100%')
      .height('100%')
      .backgroundColor('#f2f3f4')
  }
}
     .width('100%')
          .margin({top: 20})
          .justifyContent(FlexAlign.SpaceBetween)
      }
        .width('90%')
        .margin({top: 20})
        .padding(20)
        .borderRadius(8)
        .backgroundColor('#dddddd')
    }
      .width('100%')
      .height('100%')
      .backgroundColor('#f2f3f4')
  }
}

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

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

相关文章

应用GIS进行生态敏感性评价

应用GIS进行生态敏感性评价

生态环境敏感性是指生态系统对区域内自然和人类活动干扰的敏感程度，它反映区域生态系统在遇到干扰时，发生生态环境问题的难易程度和可能性的大小，并用来表征外界干扰可能造成的后果。即在同样干扰强度或外力作用下，各类生态系统出…
阅读更多...
Qt中QGraphicsView总体架构学习

Qt中QGraphicsView总体架构学习

前沿 前段时间学习了下如何在QGraphicsView架构中绘制刻度尺，主要是与OnPainter中进行比较的，那么今天就来详细讲解下我对QGraphicsView框架的认知吧~ 最近一段时间想学习下，如果我有不正确的，欢迎留言探讨哟~ QGraphicsView架…
阅读更多...
页面无缘无故出现数字（Smarty的模板使用）

页面无缘无故出现数字（Smarty的模板使用）

出现的数字是定义的用户的每条数据的排序，就像这个页面的第一个用户有10条数据01234569 目的是为了合并用户的单元格 解决：
阅读更多...
多机TCP通讯之hello world(C++)

多机TCP通讯之hello world(C++)

文章目录 TCP是什么准备工作CMakeLists.txt服务端代码客户端代码参考 TCP是什么 TCP（传输控制协议）是一种在计算机网络中广泛使用的协议，它提供了可靠的、面向连接的数据传输服务。TCP 是 OSI 模型中的传输层协议，它确保了数据的…
阅读更多...
ChatGPT本地部署，学习记录

ChatGPT本地部署，学习记录

一、GPT4ALL模型 官网地址： Github：https://github.com/nomic-ai/gpt4all GPT4ALL项目部署简易，但是在运行体验上一般，并且是只调用CPU来进行运算。 看官方文档介绍在嵌入式上有比较大的优势，但是目前个人对嵌入式…
阅读更多...
解锁Python库中操作系统级别模块psutil

解锁Python库中操作系统级别模块psutil

目录 一、psutil库简介 二、安装psutil库 三、获取系统信息 1、获取CPU信息： 2、获取内存信息： 3、获取磁盘信息： 4、获取网络信息： 四、进程管理 五、系统信息和监控 六、总结 随着Python的普及，越来越多的…
阅读更多...
2024年美赛数学建模思路 - 复盘：光照强度计算的优化模型

2024年美赛数学建模思路 - 复盘：光照强度计算的优化模型

文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 建模资料 0 赛题思路 （赛题出来以后第一时间在CSDN分享） https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米，宽为12米&…
阅读更多...
13.若依代码自动生成功能详解

13.若依代码自动生成功能详解

文章目录 1.代码自动生成功能2.功能的使用3. 代码的导出和使用 1.代码自动生成功能 基于若依的目录结构，若依本身提供了代码生成功能，可以根据数据库表的内容，生成一些基本的CRUD的前后端的功能。本文将生成过程中的一些注意事项&#xff0c…
阅读更多...
OpenGL排坑指南—贴图纹理绑定和使用

OpenGL排坑指南—贴图纹理绑定和使用

一、前言 在OpenGL学习 的纹理这一章中讲述了纹理贴图的使用方式，主要步骤是先创建一个纹理的对象，和创建顶点VAO类似，然后就开始绑定这个纹理，最后在循环中使用，有时候可能还要用到激活纹理单元的函数。然而&#xff…
阅读更多...
了解Python中的requests.Session对象及其用途

了解Python中的requests.Session对象及其用途

前言 在Python的网络编程中，requests库是一个非常流行的HTTP客户端库，用于发送各种类型的HTTP请求。在requests库中，requests.Session对象提供了一种在多个请求之间保持状态的方法本文将探讨Python中的requests.Session对象及其用途&#xf…
阅读更多...
大语言模型面试问题

大语言模型面试问题

自己在看面经中遇到的一些面试题，结合自己和理解进行了一下整理。 transformer中求和与归一化中“求和”是什么意思？ 求和的意思就是残差层求和，原本的等式为y H(x)转化为y x H(x)，这样做的目的是防止网络层数的加深而造成的梯…
阅读更多...
微信小程序Burp抓包

微信小程序Burp抓包

方法有很多，工具也各有差异，主要是学代理流量的思路 Burp流量代理工具小程序 一、Burp证书导入 1、开启代理 开启浏览器的代理，火狐推荐FoxyProxy，Google推荐SwitchyOmega，设置代理为127.0.0.1:8080。 2、下载证书…
阅读更多...
【Web】CTFSHOW PHP命令执行刷题记录(全)

【Web】CTFSHOW PHP命令执行刷题记录(全)

目录 web29 web30 web31 web32 web33 web34 web35 web36 web37-39 web40 web41 （y4✌脚本） web42 -44 web45 web46 -49 web50 web51 web52 web53 web54 web55-56 web57 web58 web59 web60 web61 web62 web63-65 web66-67 w…
阅读更多...
免 费 搭 建 多模式商城：b2b2c、o2o、直播带货一网打尽

免 费 搭 建 多模式商城：b2b2c、o2o、直播带货一网打尽

鸿鹄云商 b2b2c产品概述 【b2b2c平台】，以传统电商行业为基石，鸿鹄云商支持“商家入驻平台自营”多运营模式，积极打造“全新市场，全新 模式”企业级b2b2c电商平台，致力干助力各行/互联网创业腾飞并获取更多的收益。从消…
阅读更多...
c++学习笔记-STL案例-演讲比赛管理系统2

c++学习笔记-STL案例-演讲比赛管理系统2

目录 功能介绍 代码结构部分 查看一下类图 1.Speaker.h 2.speechManager.h 3.speechManager.cpp 4.演讲比赛流程关系系统.cpp 功能介绍 speechManager.h函数包含演讲比赛流程的所有功能如下： 开始演讲比赛：完成整届比赛的流程，每…
阅读更多...
图形化编程：未来的编程范式

图形化编程：未来的编程范式

在科技飞速发展的今天，编程已经成为了我们生活中不可或缺的一部分。从手机应用开发，到人工智能，再到物联网，无一不涉及到编程。然而，传统的文本编程方式对于初学者来说，往往显得复杂且难以理解。这就使得图…
阅读更多...
uniapp日期加减切换，点击切换

uniapp日期加减切换，点击切换

先上完成后的页面&#xff1a;当前年年份不显示&#xff0c;不然完整显示。 可以切换和自定义选择。 html:样式和图片自定义。 <view class"image-text_30"><image click"delMonth" :src"require(/static/home/zuo.png)" class"…
阅读更多...
STL标准库与泛型编程（侯捷）笔记5

STL标准库与泛型编程（侯捷）笔记5

STL标准库与泛型编程&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youbute: 侯捷-STL标准库与泛型编程 B站: 侯捷 - STL Github:STL源码剖析中源码 https://github.com/SilverMaple/STLSourceCo…
阅读更多...
【JVM 基础】类字节码详解

【JVM 基础】类字节码详解

JVM 基础 - 类字节码详解 多语言编译为字节码在JVM运行Java字节码文件Class文件的结构属性从一个例子开始反编译字节码文件字节码文件信息常量池方法表集合类名 再看两个示例分析try-catch-finallykotlin 函数扩展的实现 源代码通过编译器编译为字节码&#xff0c;再通过类加载…
阅读更多...
安谋科技“周易”NPU与飞桨完成II级兼容性测试，助力实现多样化AI部署

安谋科技“周易”NPU与飞桨完成II级兼容性测试，助力实现多样化AI部署

近日&#xff0c;安谋科技&#xff08;中国&#xff09;有限公司&#xff08;以下简称“安谋科技”&#xff09;“周易”NPU系列IP与飞桨已完成II级兼容性测试&#xff0c;测试结果显示&#xff0c;双方兼容性表现良好&#xff0c;整体运行稳定。这是安谋科技加入“硬件生态共创…
阅读更多...
最新文章

Copyright @ 2022~2023