首页 > 其他分享 >鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件

时间:2023-12-27 20:31:56浏览次数:27  
标签:width 50 height HarmonyOS backgroundColor ArkUI 30% Row

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件


一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Row组件

沿水平方向布局容器。

子组件

可以包含子组件。

接口

Row(value?:{space?: string | number})

参数

参数名

参数类型

必填

默认值

参数描述

space

string | number

0

横向布局元素间距。

属性

名称

参数类型

默认值

描述

alignItems

VerticalAlign

VerticalAlign.Center

在垂直方向上子组件的对齐格式。

justifyContent8+

FlexAlign

FlexAlign.Start

设置子组件在水平方向上的对齐格式。

三、示例

代码

// xxx.ets
@Entry
@Component
struct RowExample {
  build() {
    Column({ space: 5 }) {
      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 5 }) {
        Row().width('30%').height(50).backgroundColor("#FF1493")
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').height(107).border({ width: 1 })

      Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor("#FF1493")
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 })

      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor("#FF1493")
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })

      Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor("#FF1493")
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)

      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row() {
        Row().width('30%').height(50).backgroundColor("#FF1493")
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件_参数类型

图片

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件_默认值_02

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件_参数类型_03编辑


鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件_默认值_04

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Row组件_默认值_05编辑

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,
大军纵横驰奔,

谁敢横刀立马?
惟有点赞加关注大军。

标签:width,50,height,HarmonyOS,backgroundColor,ArkUI,30%,Row
From: https://blog.51cto.com/u_16269709/9003892

相关文章

  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Column组件
    鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之线性布局容器Column组件一、操作环境操作系统: Windows10专业版、IDE:DevEcoStudio3.1、SDK:HarmonyOS3.1二、Column组件沿垂直方向布局的容器。子组件可以包含子组件。接口Column(value?:{space?:string|number})参数参数名参数类型必......
  • HarmonyOS实践之应用状态变量共享
     平时在开发的过程中,我们会在应用中共享数据,在不同的页面间共享信息。虽然常用的共享信息,也可以通过不同页面中组件间信息共享的方式,但有时使用应用级别的状态管理会让开发工作变得简单。根据不同的使用场景,ArkTS提供了以下几种应用状态管理的能力:○ LocalStorage:使用范围......
  • HarmonyOS应用兼容稳定性云测试
    HarmonyOS应用兼容稳定性云测试兼容性测试兼容性测试主要验证HarmonyOS应用在华为真机设备上运行的兼容性问题,包括首次安装、再次安装、启动、卸载、崩溃、黑白屏、闪退、运行错误、无法回退、无响应、设计约束场景。具体兼容性测试项的详细说明请参考兼容性测试标准。兼容性测试支......
  • HarmonyOS应用性能与功耗云测试
     性能测试性能测试主要验证HarmonyOS应用在华为真机设备上运行的性能问题,包括启动时长、界面显示、CPU占用和内存占用。具体性能测试项的详细说明请参考性能测试标准。性能测试支持Phone和TV设备,包格式包括Hap/App。前提条件● 已注册华为开发者帐号,并完成实名认证,具体......
  • 扫描全能王启动鸿蒙原生应用开发,系HarmonyOS NEXT智能扫描领域首批
    近期,“鸿蒙合作签约暨扫描全能王鸿蒙原生应用开发启动仪式”(简称“签约仪式”)正式举行。合合信息与华为达成鸿蒙合作,旗下扫描全能王将基于HarmonyOSNEXT正式启动鸿蒙原生应用开发。据悉,扫描全能王是鸿蒙在智能扫描领域内签约原生应用开发的头部产品,双方拟在以OpenHarmony为底座......
  • ArkUI组件公共属性
    一、公共样式类属性ArkUI框架提供的基础组件直接或者间接的继承自 CommonMethod , CommonMethod 中定义的属性样式属于公共样式。下面就来学习这些样式1.1.尺寸设置宽高设置设置组件的宽高,缺省时使用组件自身内容的宽高,比如充满父布局可以使用 string 值:"100%",当组件同时设置......
  • ArkUI容器类组件
    容器组件指的是它可以包含一个或多个子组件的组件,除了前边介绍过的公共属性外。一、线性布局容器(Row、Column)线性容器类表示按照水平方向或者竖直方向排列子组件的容器,ArkUI开发框架通过 Row 和 Colum 来实现线性布局。1.1.主轴和纵轴概念什么是主轴和纵轴?对于线性容器来说,有主......
  •  鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toast组件
     鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toast组件编辑一、操作环境操作系统: Windows10专业版、IDE:DevEcoStudio3.1、SDK:HarmonyOS3.1二、Toast组件Toast 的应用场景也非常广泛,比如网络请求出错了可以弹一个 Toast 提示等。@ohos.prompt 模块里提供显示一个 Toast 的A......
  • #星计划#浅谈ArkUI之Web组件的基础用法
    最近研究了ArkUI中的一些常用组件,其中Web组件是很常用且相对独立的一种组件。本文总结了Web组件的常用函数,以及基本用法。先来一个AI画的Web组件助助兴(好吧,不能说毫无关系,只能说一点也不像):在ArkUI中,Web组件用于显示Web网页,可以理解为一个嵌入式的小型浏览器,用于展示Web内容,实现We......
  •  鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toggle开关组件
     鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toggle开关组件编辑一、操作环境操作系统: Windows10专业版、IDE:DevEcoStudio3.1、SDK:HarmonyOS3.1二、Toggle开关组件接口Toggle(options:{type:ToggleType,isOn?:boolean})参数参数名参数类型必填默认值参数描述typeToggleType......