HarmonyOS 开发基础(八)Row和Column

这篇具有很好参考价值的文章主要介绍了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

harmonyos开发主轴、交叉轴,HarmonyOS,HarmonyOS,华为,typescript,鸿蒙,ArkTS,ArkUI

三、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:主轴方向,平均分配,距离左右平均分配

harmonyos开发主轴、交叉轴,HarmonyOS,HarmonyOS,华为,typescript,鸿蒙,ArkTS,ArkUI

四、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:交叉轴方向,下边顶格

harmonyos开发主轴、交叉轴,HarmonyOS,HarmonyOS,华为,typescript,鸿蒙,ArkTS,ArkUI

五、基础使用

harmonyos开发主轴、交叉轴,HarmonyOS,HarmonyOS,华为,typescript,鸿蒙,ArkTS,ArkUI

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

六、高级使用

harmonyos开发主轴、交叉轴,HarmonyOS,HarmonyOS,华为,typescript,鸿蒙,ArkTS,ArkUI文章来源地址https://www.toymoban.com/news/detail-815480.html

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

到了这里,关于HarmonyOS 开发基础(八)Row和Column的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇

    ​ 🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言: \\\"没有罗马,那就自己创造罗马~\\\" 目录 HarmonyOS 4.0 技术介绍: HarmonyOS三大特征:     1.实现硬件互助,资源共享。      2. 面向开发者,实现一次开发,多端部署。  3.一套操

    2024年02月05日
    浏览(41)
  • 基于HarmonyOS的华为智能手表APP开发实战——Fitness

    本文针对华为HarmonyOS智能穿戴产品(即 HUAWEI WATCH 3) 开发了一款运动健康类的游戏化APP——Fitness,旨在通过游戏化的方式,提升用户运动动机。 开发环境: 客户端UI是基于HarmonyOS进行开发的,所以IDE使用的是华为的DevEco-Studio。 语言: 采用的编程语言是JavaScript,基于JS扩展

    2024年02月08日
    浏览(56)
  • 华为鸿蒙HarmonyOS应用开发者高级认证试题及答案

    判断 1只要使用端云一体化的云端资源就需要支付费用(错) 2所有使用@Component修饰的自定义组件都支持onPageShow,onBackPress和onPageHide生命周期函数。(错) 3 HarmonyOS应用可以兼容OpenHarmony生态(对) 4 使用端云一体化开发,无需自己搭建服务器,并进行运维了。(对) 5基于端

    2024年02月04日
    浏览(71)
  • HarmonyOS/OpenHarmony原生应用开发-华为Serverless云端服务支持说明(一)

    云端服务的实现是 HarmonyOS/OpenHarmony原生应用开发的一个重要的环节,如果用户端是鸿蒙原生应用,但是服务端即云端还是基于传统的各种WEB网络框架、数据库与云服务器,那么所谓的原生应用开发实现的数据即后端服务是和以前、现在的互联网、移动互联网应用是一样的,等

    2024年02月07日
    浏览(56)
  • 音视频开发之旅——音频基础概念、交叉编译原理和实践(LAME的交叉编译)(Android)

    本文章已授权微信公众号郭霖(guolin_blog)转载。 本文主要讲解的是 音频基础概念 、 交叉编译原理和实践(LAME的交叉编译) ,是基于 Android平台 ,示例代码如下所示: AndroidAudioDemo 另外, iOS平台 也有相关的文章,如下所示: 音视频开发之旅——音频基础概念、交叉编译

    2024年04月25日
    浏览(82)
  • 华为鸿蒙开发(HarmonyOs开发):超详细的:DevEco Studio 的安装和配置 、华为第三方包依赖:SDK软件包的安装、Nodejs的导入配置

    2023年11月28日20:00:00 ⚠️⚠️HarmonyOs 开发工具 ⚠️⚠️ ⚠️⚠️DevEco Studio 的安装和配置⚠️⚠️ ⚠️⚠️⚠️❤️❤️ 关注了解更多 一、打开鸿蒙开发工具官网 下面是安装DevEco Studio 的详细步骤:希望大家给个关注,祝大家:踏上HarmonyOs 之旅,步步高升! 下载地址:官

    2024年02月03日
    浏览(62)
  • HarmonyOS云开发基础认证

      单选 答案 Cloud DB的数据同步模式包括缓存模式和本地模式。应用可以仅使用缓存模式 或者本地模式,也可以同时使用缓存模式和本地模式。 正确(True) Cloud DB服务在通过OnSnapshotListener类中的onSnapshot()实现快照回调 函数时,不需要显式地释放资源,Cloud DB服务会自动释放 错误

    2024年02月07日
    浏览(63)
  • 【HarmonyOS云开发】基础认证

    1.【判断题】 业界认为Serverless=Iaas+Paas。 错误(False) 2.【判断题】 认证服务不同站点的数据是独立的。 正确(True) 3.【判断题】 认证服务提供了端侧脸证token的。 正确(True) 4.【判断题】 云函数可以根据函数的实际流量对函数进行弹性伸缩,开发者无需对服务器资源进行管理。

    2024年02月05日
    浏览(43)
  • 【鸿蒙开发】HarmonyOS应用开发者基础认证题库

    华为开发者学堂   1、考试需实名认证,请在考前于个人主页→个人信息→基本信息→进行实名认证,否则考试通过无法获取专业证书; 2、每个帐号每月有3次考试机会,次月重置考试次数。做题过程中请认真对待,避免考试次数浪费; 3、考试时长为1小时,请合理分配做题

    2024年03月09日
    浏览(107)
  • HarmonyOS应用开发者基础认证

    快速获得HarmonyOS开发者基础认证 学习考试连接 一、判断题 1. 【判断题】  正确(True) 错误(False) 2. 【判断题】  正确(True) 错误(False) 3. 【判断题】  正确(True) 错误(False) 4. 【判断题】 正确(True) 错误(False) 5. 【判断题】  正确(True) 错误(False) 6. 【判断题】  正确(True) 错误(Fal

    2024年02月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包