HarmonyOS 开发基础（八）Row和Column

news2024/12/26 11:05:45

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')
  }
}

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

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

相关文章

30道JVM综合面试题详解含答案（值得珍藏）

30道JVM综合面试题详解含答案（值得珍藏）

1. 描述一下JVM加载Class文件的原理机制? Java中的所有类，都需要由类加载器装载到JVM中才能运行。类加载器本身也是一个类，而它的工作就是把class文件从硬盘读取到内存中。在写程序的时候，我们几乎不需要关心类的加载，因为这些都…
阅读更多...
流程控制详解

流程控制详解

1、Java流程控制 主要涉及三大流程控制：顺序、分支、循环 如下图： 1）流程2 存在对用户名和密码的校验，是否为空，存在分支控制 2）流程3 用户名和密码在数据库是否存在，存在分支控制 3&#xf…
阅读更多...
ant design vue Tree组件叶子节点横向排列

ant design vue Tree组件叶子节点横向排列

antdesignvue的树形组件要实现组件叶子节点横向排列有点坑，没有 配置属性，需要自己想办法。 要实现的效果 看tree组件的dom结构，父元素flex竖向布局，子项不论节点层级都在同一层！！！ 难点在于想…
阅读更多...
中级Python面试问题

中级Python面试问题

文章目录 专栏导读1、xrange 和 range 函数有什么区别？2、什么是字典理解？举个例子3、元组理解吗？如果是，怎么做，如果不是，为什么？4、 列表和元组的区别？5、浅拷贝和深拷贝有什么区别…
阅读更多...
SV-298XT IP网络广播板 SV-298XT-共公广播音频模块IP网络广播板

SV-298XT IP网络广播板 SV-298XT-共公广播音频模块IP网络广播板

SV-298XT IP网络广播板 SV-298XT-共公广播音频模块IP网络广播板 SV-298XT网络广播模块是一款全数字网络型广播模组，核心部分采用了成熟的私有协议解决方案，性能稳定可靠。支持TCP、UDP、组播协议能针对当前服务器中不同的广播任务设置不同的广播传输方式…
阅读更多...
DLT：dlt-daemon示例解析2

DLT：dlt-daemon示例解析2

DLT：dlt-daemon示例解析 回顾一下上期第一个示例打印DLT日志的流程。 这次来分析第二个示例。 目录dlt-daemon/examples/example2/下有以下文件 CMakeLists.txt dlt_id.h example2.c example2.xml 其中example2.xml编译用不到，里面描述了一些程序的…
阅读更多...
Elasticsearch聚合优化 | 聚合速度提升5倍！

Elasticsearch聚合优化 | 聚合速度提升5倍！

1、聚合为什么慢？ 大多数时候对单个字段的聚合查询还是非常快的， 但是当需要同时聚合多个字段时，就可能会产生大量的分组，最终结果就是占用 Elasticsearch大量内存，从而导致 OOM 的情况发生。 实践应用发现&#xff0…
阅读更多...
git入门之本地操作

git入门之本地操作

1、启动git命令输入 在想要建立仓库，建议的方式是在文件夹中右键单击，选择git bash here 2、初始化仓库命令：git init 3、查看仓库状态：git status 4、更新仓库特定文件：git add xxx 5、更新仓库所有文件&#xff1…
阅读更多...
【机器学习】聚类算法（二）

【机器学习】聚类算法（二）

五、基于密度的算法 5.1 DBSCAN 算法 import sys # 导入 sys 模块，用于访问系统相关的参数和功能 import os # 导入 os 模块，用于处理文件和目录 import math # 导入 math 模块，用于进行数学运算 import random # 导入 random 模块&#xff0…
阅读更多...
JVM基础（5）——JVM垃圾回收算法

JVM基础（5）——JVM垃圾回收算法

作者简介：大家好，我是smart哥，前中兴通讯、美团架构师，现某互联网公司CTO 联系qq：184480602，加我进群，大家一起学习，一起进步，一起对抗互联网寒冬 学习必须往深处挖&…
阅读更多...
【机器学习】模型调参工具：Hyperopt 使用指南

【机器学习】模型调参工具：Hyperopt 使用指南

机器学习| 模型调参工具：Hyperopt 使用指南 前言1. Hyperopt是什么？2. Hyperopt的优缺点3. 如何使用 Hyperopt 进行调参3.1 安装 Hyperopt3.2 构建超参数空间3.3 定义目标函数3.4 运行 Hyperopt 优化3.5 获取最优超参数 4. XGB调参代码示例参考资料 前言…
阅读更多...
Java Http各个请求类型详细介绍

Java Http各个请求类型详细介绍

1. 前言 在Spring Boot框架中，HTTP请求类型是构建Web应用程序的重要组成部分。常见的请求类型包括GET、POST、PUT和DELETE，每种类型都有其特定的用途和特点。本文将详细比较这四种请求类型，帮助您在开发过程中做出明智的选择。 2. GET请求…
阅读更多...
12.扩展字典（ExtensionDictionary）

12.扩展字典（ExtensionDictionary）

愿你出走半生,归来仍是少年！ 环境：.NET FrameWork4.5、ObjectArx 2016 64bit、Entity Framework 6. 在10.扩展数据(XData)中我们讲到每个DbObject有一个XData对象可以存储数据，除此之外每个DbObject对象还有一个ExtensionDictionary（扩展字典）可以进行数据存储。…
阅读更多...
vue3+ts+vite中封装axios,使用方法从0到1

vue3+ts+vite中封装axios,使用方法从0到1

一、安装axios npm install axios types/axios --save二、配置代理vite.config.ts，如果没有需要新建该文件 module.exports {server: {proxy: {/api: {target: http://localhost:5000, // 设置代理目标changeOrigin: true, // 是否改变请求源地址rewrite: (path)…
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的大病保险管理系统

【开源】基于JAVA+Vue+SpringBoot的大病保险管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统配置维护2.2 系统参保管理2.3 大病保险管理2.4 大病登记管理2.5 保险审核管理 三、系统详细设计3.1 系统整体配置功能设计3.2 大病人员模块设计3.3 大病保险模块设计3.4 大病登记模块设计3.5 保险审核模块设计 四、…
阅读更多...
写点东西《Docker入门（上）》

写点东西《Docker入门（上）》

写点东西《Docker入门（上）》 环境变量 Docker 镜像 Docker CMD 与 ENTRYPOINT 有什么区别 Docker 中的网络： Docker 存储： Docker 是一个工具，允许开发人员将他们的应用程序及其所有依赖项打包到一个容器中。然后&…
阅读更多...
SQL--case语句

SQL--case语句

case语句，按从上到下的书写顺序计算每个WHEN子句的布尔表达式。返回第一个取值为TRUE的布尔表达式所对应的结果表达式的值。如果没有取值为TRUE的布尔表达式，则当指定了ELSE子句时,返回ELSE子句中指定的结果；如果没有指定ELSE子句&#xff0c…
阅读更多...
【Docker】快速入门之Docker的安装及使用

【Docker】快速入门之Docker的安装及使用

一、引言 1、什么是Docker Docker是一个开源的应用容器引擎，它让开发者可以将他们的应用及其依赖打包到一个可移植的镜像中，然后发布到任何流行的Linux或Windows操作系统的机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之…
阅读更多...
1688采购工厂货源对接API

1688采购工厂货源对接API

1688现有API列表 item_get 获得1688商品详情item_search 按关键字搜索商品item_search_img 按图搜索1688商品（拍立淘）item_search_suggest 获得搜索词推荐item_fee 获得商品快递费用seller_info 获得店铺详情item_search_shop 获得店铺的所有商品item_p…
阅读更多...
解决python画图无法显示中文的问题

解决python画图无法显示中文的问题

python画图遇到的问题： 中文不显示： 解决方法：把字体设置为支持中文的字体，比如黑体 黑体下载链接： 链接：https://pan.baidu.com/s/1BD7zQEBUfcIs6mC2CPYy6A?pwdv120 提取码：v120 pyhon…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023