【鸿蒙开发】系统组件Row

Row组件

Row沿水平方向布局容器

接口:

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

参数:

参数名

参数类型

必填

参数描述

space

string | number

横向布局元素间距。

从API version 9开始,space为负数或者justifyContent设置为FlexAlign.SpaceBetween、FlexAlign.SpaceAround、FlexAlign.SpaceEvenly时不生效。

默认值:0,单位vp

说明:

可选值为大于等于0的数字,或者可以转换为数字的字符串。

属性:

名称

参数类型

描述

alignItems

VerticalAlign

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

默认值:VerticalAlign.Center

从API version 9开始,该接口支持在ArkTS卡片中使用。

justifyContent8+

FlexAlign

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

默认值:FlexAlign.Start

从API version 9开始,该接口支持在ArkTS卡片中使用。

UI结构示例,1行里包含3行

@Entry
@Component
struct APage {
  build() {
    Row() {
      Row() {
        Text("左部")
          .width('100%')
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(Color.Red)
      .width(100)
      .height(100)

      Row() {
        Text("中间")
          .width('100%')
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(Color.Blue)
      .width(100)
      .height(100)

      Row() {
        Text("右部")
          .width('100%')
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }
      .backgroundColor(Color.Pink)
      .width(100)
      .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

水平方向对齐

FlexAlign.Start

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)
  }
}

FlexAlign.Center

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

FlexAlign.End

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.End)
  }
}

FlexAlign.SpaceBetween

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

FlexAlign.SpaceAround

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceAround)
  }
}

FlexAlign.SpaceEvenly

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

垂直方向对齐

VerticalAlign.Top

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .alignItems(VerticalAlign.Top)
  }
}

VerticalAlign.Center

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .alignItems(VerticalAlign.Center)
  }
}

VerticalAlign.Bottom

@Entry
@Component
struct APage {
  build() {
    Row() {
    }
    .width('100%')
    .height('100%')
    .alignItems(VerticalAlign.Bottom)
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

万界星空科技工时管理系统功能介绍

一、工时管理系统的功能 1、工时记录与统计 工时管理系统提供了便捷的工时记录和统计功能。员工可以通过系统记录每天的上班时间、下班时间以及休息时间,系统会自动计算工作时长并生成工时统计报表。这一功能不仅能够准确记录员工的工作时间,还能够帮助…

基于大数据的汽车信息可视化分析预测与推荐系统

温馨提示:文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 本项目通过集成网络爬虫技术,实时获取海量汽车数据;运用先进的ARIMA时序建模算法对数据进行深度挖掘和分析;结合flask web系统和echarts可视化工具,…

如何在Rust中操作JSON

❝ 越努力,越幸运 ❞ 大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 我们之前在Rust 赋能前端-开发一款属于你的前端脚手架中有过在Rust项目中如何操作JSON。 由于文章篇幅的原因,我们就没详细介绍…

QT 使用redis ,连接并使用

一.redis安装 链接:https://pan.baidu.com/s/17fXKOj5M4VIypR0y5_xtHw 提取码:1234 1.下载得到文件夹如图 course_redis为安装包。 2.启动Redis服务 把安装包解压到某个路径下即可。 打开cmd窗口,切换到Redis安装路径,输入 r…

微服务初始及Eureka注册中心

1,架构演变 单体架构:将所有业务功能集中在一个项目中开发,达成一个包部署 优点:架构简单,部署成本低 缺点:项目耦合度高 分布式架构:根据业务功能对系统进行拆分,每个业务作为独…

Codeforces Round 938 (Div. 3) A - F 题解

A. Yogurt Sale 题意:要购买n个酸奶,有两种买法,一种是一次买一个,价格a。一种是一次买两个,价格b,问买n个酸奶的最小价格。 题解:很容易想到用2a和b比较,判断输出即可。 代码&am…

小程序开发SSL证书下载和安装

在开发小程序时,确保数据的安全传输至关重要,而实现这一目标的关键在于正确获取与安装SSL证书。以下详细介绍了从获取到安装SSL证书的完整流程,以助您为小程序构建可靠的加密通信环境。 一、小程序SSL证书类型选择: 域名验证型D…

【PyTorch][chapter 25][李宏毅深度学习][Transfer Learning-1]

前言: 迁移学习是一种机器学习的方法,指的是一个预训练的模型被重新用在另一个任务中。 比如已经有个模型A 实现了猫狗分类 模型B 要实现大象和老虎分类,可以利用训练好的模型A 的一些参数特征,简化当前的训练 过程. 目录: 简介 Model Fine-Tuning (…

【C++】类和对象①(什么是面向对象 | 类的定义 | 类的访问限定符及封装 | 类的作用域和实例化 | 类对象的存储方式 | this指针)

目录 前言 什么是面向对象? 类的定义 类的访问限定符及封装 访问限定符 封装 类的作用域 类的实例化 类对象的存储方式 this指针 结语 前言 最早的C版本(C with classes)中,最先加上的就是类的机制,它构成…

Day3-HBase重要概念

HBase 结构 HRegion 概述 在HBase中,会从行键方向上对表来进行切分,切分出来的每一个结构称之为是一个HRegion 切分之后,每一个HRegion会交给某一个HRegionServer来进行管理。HRegionServer是HBase的从节点,每一个HRegionServ…

如何使用Java和RabbitMQ实现延迟队列(方式二)?

前言 昨天写了一篇关于Java和RabbitMQ使用插件实现延迟队列功能的文章,今天来讲下另外一种方式,不需要RabbitMQ的插件。 前期准备,需要安装好docker、docker-compose的运行环境。 需要安装RabbitMQ的可以看下面这篇文章。 如何使用PHP和R…

Spring Cloud微服务入门(四)

应用容错的概念 应用错误-雪崩效应 定义: 服务雪崩效应是一种因“服务提供者的不可用”(原因)导致“服务调用者不可用”(结果),并将不可用逐渐放大的现象。 服务雪崩的过程可以分为三个阶段: 服…

Excel全套213集教程

Excel全套213集教程 包含技术入门93集 图表17集 数据透视35集 公式函数68 基础入门 93节 https://www.alipan.com/s/cMxuPstkS1x 提取码: 77dd 点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视…

电商社交新零售:创新引领新趋势,变革新零售思维格局-亿发

新零售O2O模式是如何颠覆传统零售商业模式? 传统电商出现瓶颈: 传统电商在发展过程中逐渐出现了瓶颈,主要表现在市场竞争激烈、用户获取成本上升、用户黏性下降等问题。传统电商往往只能通过价格竞争或促销活动来吸引用户,而这种…

SSL、TLS和HTTPS:网络安全的重要基石

随着互联网的快速发展,网络安全问题日益凸显。为了保护数据在传输过程中的安全,各种加密协议和技术应运而生。SSL(安全套接层)、TLS(传输层安全)和HTTPS(超文本传输安全协议)是三个最…

超级agent的端语言模型Octopus v2: On-device language model for super agent

大型语言模型(LLMs)在函数调用方面展现出卓越的应用潜力,特别是针对Android API的定制应用。与那些需要详尽描述潜在函数参数、有时甚至涉及数万个输入标记的检索增强生成(RAG)方法相比,Octopus-V2-2B在训练…

uniapp引入微信小程序版本VantUI,使用VantUI的自定义tabbar,并解决自定义tabbar出现闪烁的情况

1.uniapp引入微信小程序版本VantUI 去vant官网下载源码,源码放在github,自行去下载下来 https://vant-contrib.gitee.io/vant-weapp/#/home 在pages.json的globalStyle里面注册组件 "globalStyle": {"navigationBarTextStyle": &qu…

gitlab使用

个人笔记(整理不易,有帮助点个赞) 笔记目录:学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔:工作总结随笔_8、以前工作中都接触过哪些类型的测试文档-CSDN博客 目录 一&#xff1a…

【xcode15.3 打包报错 Command SwiftCompile failed with a nonzero exit code】

升级Xcode15后 打包报错 xxx Command SwiftCompile failed with a nonzero exit code 解决办法: 选中pod 报错的库 Code Generation->Compilation Mode改成和debug一样的 Incremental。

智慧水库解决方案(打造水库智慧监测体系)

​作为一名水利自动化系统集成商,最近我司接手了一个智慧水库建设项目。这个项目位于一座山区的大型水库,目的是对其进行现代化、智能化改造,提升供水、防洪等管理水平。(key-iot.com.cn) 在方案设计之初,我们组织了现场勘测,全面了解水库的实际情况。这…