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日
    浏览(47)
  • 华为鸿蒙HarmonyOS应用开发者高级认证试题及答案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2024年03月09日
    浏览(114)
  • HarmonyOS应用开发者基础笔记

    HOS认证基础笔记 HarmonyOS应用开发者高级认证笔记 华子鸿蒙开发认证(认证链接),粗略看了看感觉还行,遂1h22min速通 首选项preferences是以Key-Value形式存储数据,其中Key是可以重复。(错) 使用http模块发起网络请求时,必须要使用on(‘headersReceive’)订阅请求头,请求才会成

    2024年02月02日
    浏览(65)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包