HarmonyOS 开发基础（八）Row和Column

news/2024/7/21 9:34:12 标签: HarmonyOS, 华为, typescript, 鸿蒙, ArkTS, ArkUI

HarmonyOS_RowColumn_0">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：交叉轴方向，下边顶格

在这里插入图片描述

五、基础使用

在这里插入图片描述

typescript">@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)
    }
  }
}

六、高级使用

在这里插入图片描述

typescript">@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.niftyadmin.cn/n/5318915.html

相关文章

快速搭建前端开发平台利器

快速搭建前端开发平台利器

JNPF是一款基于springboot、vue.js技术的企业级低代码平台，采用微服务、前后端分离等标准的原生架构，基于可视化业务建模、流程建模、表单建模、报表建模、大屏建模、移动端建模等工具，零代码快速构建业务应用。 官网地址：https:…
阅读更多...
GPT/GPT4科研应用与AI绘图技术及论文高效写作方法及教程

GPT/GPT4科研应用与AI绘图技术及论文高效写作方法及教程

详情点击链接：GPT/GPT4科研应用与AI绘图技术及论文高效写作 一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析，AI画图，图像识别，文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二…
阅读更多...
【代码复现系列】paper：CycleGAN and pix2pix in PyTorch

【代码复现系列】paper：CycleGAN and pix2pix in PyTorch

或许有冗余步骤、之后再优化。 1.桌面右键-git bash-输入命令如下【git clone https://github.com/junyanz/pytorch-CycleGAN-and-pix2pix】 2.打开anaconda的prompt，cd到pytorch-CycleGAN-and-pix2pix路径 3.在prompt里输入【conda env create -f environment.y…
阅读更多...
Python——python练习题

Python——python练习题

1.小明身高1.75，体重80.5kg。请根据BMI公式（体重除以身高的平方）帮小明计算他的BMI指数，并根据BMI指数： 低于18.5：过轻 18.5-25：正常 25-28：过重 28-32：肥胖 高于32&…
阅读更多...
cloudera-agent一键卸载脚本

cloudera-agent一键卸载脚本

#!/bin/bash # 停止 CDH Agent 服务 echo "停止 CDH Agent 服务..." sudo service cloudera-scm-agent stop sudo yum remove cloudera-manager-daemons cloudera-manager-agent # 删除 CDH Agent 相关文件和目录 echo "删除 CDH Agent 相关文件和目录...&quo…
阅读更多...
Ubuntu搭建OpenCV环境(C++)

Ubuntu搭建OpenCV环境(C++)

Ubuntu搭建OpenCV环境(C) 文章目录 Ubuntu搭建OpenCV环境(C)一、环境介绍二、依赖安装三、安装包下载四、opencv安装五、测试 一、环境介绍 虚拟机 ：VMware 15.5 OS ： Ubuntu 20.04 opencv 版本 ： 4.9.0 操作系统安装本文不再赘述&#x…
阅读更多...
JavaEE中的Controller的每一个Handler如何确定返回值与形参？

JavaEE中的Controller的每一个Handler如何确定返回值与形参？

在JavaEE中，特别是在基于Spring框架的JavaEE应用中，Controller是用来处理HTTP请求的组件。Controller中的每一个Handler方法都是负责处理特定的请求，并确定返回值与形参。以下是一般情况下的Handler方法的确定返回值与形参的详细说明&#xf…
阅读更多...
Visual Basic 6的安装与辅助插件 - 初学者系列 - 学习者系列文章

Visual Basic 6的安装与辅助插件 - 初学者系列 - 学习者系列文章

好久没玩VB6了，今天无聊，就把原来的VB6相关的代码翻了出来，然后上了VMWare虚拟机，把VB6安装上，然后把架构设计那个模板找出来完善了一下。看了一下，VB6这块需要记录一些内容，于是有了本文。 1、…
阅读更多...
最新文章

Copyright @ 2022~2023