【鸿蒙开发】系统组件Column

Column组件

Column沿垂直方向布局的容器。

接口:

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

参数:

参数名

参数类型

必填

参数描述

space

string | number

纵向布局元素垂直方向间距。

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

默认值:0

说明:

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

属性:

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

alignItems

HorizontalAlign

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

默认值:HorizontalAlign.Center

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

justifyContent8+

FlexAlign

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

默认值:FlexAlign.Start

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

UI结构示例,1列3行文本

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

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

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

  }
}

垂直方向对齐

FlexAlign.Start

@Entry
@Component
struct APage {
  build() {
    Column({ space: 30 }) {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Start)

  }
}

FlexAlign.Center

@Entry
@Component
struct APage {
  build() {
    Column({ space: 30 }) {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)

  }
}

FlexAlign.End

@Entry
@Component
struct APage {
  build() {
    Column({ space: 30 }) {
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.End)

  }
}

水平方向对齐

HorizontalAlign.Start

@Entry
@Component
struct APage {
  build() {
    Column({ space: 30 }) {
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)

  }
}

HorizontalAlign.Center

@Entry
@Component
struct APage {
  build() {
    Column({ space: 30 }) {
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)

  }
}

HorizontalAlign.End

@Entry
@Component
struct APage {
  build() {
    Column({ space: 30 }) {
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.End)

  }
}

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

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

相关文章

洪水预警:如何通过数据可视化提前应对灾害

数据可视化在应对洪涝灾害问题中发挥着重要作用。洪涝灾害是一种常见而严重的自然灾害,给人们的生命、财产和生活带来了巨大的威胁和损失。而数据可视化技术通过将海量的数据转化为直观、易懂的图表、图像或地图等形式,帮助人们更好地理解洪涝灾害的发生…

PostgreSQL入门到实战-第十三弹

PostgreSQL入门到实战 PostgreSQL数据过滤(六)官网地址PostgreSQL概述PostgreSQL中IN命令理论PostgreSQL中IN命令实战更新计划 PostgreSQL数据过滤(六) 使用PostgreSQL IN运算符来检查值是否与列表中的任何值匹配 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容…

宁波宠物展|2024中国(宁波)国际宠物用品博览会

中国(宁波)国际宠物用品博览会 地点:宁波国际会展中心 时间:2024年11月14-16日 主办单位:凤麟展览(宁波)有限公司 协办单位:浙江省宠物产业协会 宁波市跨境电子商务协会 宁波欧德国际商务咨询服务有限公司 宁波扬扬会议展览有限公司 20000方展览…

大模型的实践应用20-一种内存高效微调技术LISA,效果比LoRA有显著提升

大家好,我是微学AI,今天给大家介绍一下大模型的实践应用20-一种内存高效微调技术LISA,效果比LoRA有显著提升。LISA是一种新型的微调技术,全称为Layerwise Importance Sampled AdamW,由UIUC联合LMFlow团队提出。这项技术…

PUBG绝地求生29.1版本加速器推荐 免费低延迟不丢包加速器

绝地求生是一款多人大逃杀游戏,游戏有多张地图可供玩家选择,玩家空投跳伞至地图的各个角落,赤手空拳寻找武器,车辆以及物资,并在多种多样的地形中展开战斗,枪械角色身上可携带4种武器,分别是近战…

绝地求生29.1版本更新后进不去 绝地求生更新后进不去游戏怎么办

绝地求生游戏共有两种主要模式:第一人称模式和第三人称模式。在这两种模式下玩家可以分别进行单排,双排,四人组队或单人匹配四人团队模式。在进入游戏的时候,玩家可以在面板选择第一人称以及第三人称。在双排或四排等组队多人游戏…

为什么说无人机的发展是必然趋势???

随着科技的飞速发展,无人机已经逐渐从军事领域走进了普通人的生活,成为了我们探索天空、捕捉美好瞬间的新工具。今天,就让我带大家一起走进无人机的世界,感受它带来的无限魅力与可能性。 无人机,顾名思义,就…

C# 如何修改项目名称

目录 背景具体步骤1、Visual Studio中修改项目名和程序集名称以及命名空间2、修改项目文件夹名3、修改解决方案里项目的路径4、再次打开解决方案,问题解决步骤总结 名词解释解决方案(Solution)项目(Project)程序集&…

【千帆平台】百度智能云千帆AppBuilder应用探索益智游戏之猜物小游戏

欢迎来到《小5讲堂》 这是《千帆平台》系列文章,每篇文章将以博主理解的角度展开讲解。 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 目录 背景AppBuilder控制台创建应用设置应用自动配置随机生成AI生成应…

线程池(详解)

目录 前言 线程池的好处 使用Executors 创建常见的线程池 工厂模式: 往线程池当中添加任务 常见线程类 ​编辑 线程池的参数介绍 线程池的工作流程 补充 前言 如果我们需要频繁的创建销毁线程,此时创建销毁线程的成本,不能忽视了 因此就可以使用线程池.提前创建好一波…

Vue - 4( 8000 字 Vue 入门级教程)

一: Vue 初阶 1.1 关于不同版本的 Vue Vue.js 有不同版本,如 vue.js 与 vue.runtime.xxx.js,这些版本主要针对不同的使用场景和需求进行了优化,区别主要体现在以下几个方面: 完整版 vs 运行时版: vue.js&…

标注平台工作流:如何提高训练数据质量与管理效率

世界发展日益依托数据的驱动,企业发现,管理不断增长的数据集却愈发困难。数据标注是诸多行业的一个关键过程,其中包括机器学习、计算机视觉和自然语言处理。对于大型语言模型(LLM)来说尤是如此,大型语言模型…

代码随想录阅读笔记-回溯【组合总和III】

题目 找出所有相加之和为 n 的 k 个数的组合。组合中只允许含有 1 - 9 的正整数,并且每种组合中不存在重复的数字。 示例 1: 输入: k 3, n 7 输出: [[1,2,4]] 示例 2: 输入: k 3, n 9 输出: [[1,2,6], [1,3,5], [2,3,4]] 说明: 所有数字都是正整数。…

Day30 回溯 LeedCode 332.重新安排行程 51. N皇后 37. 解数独 蓝桥杯 与或异或

332. 重新安排行程 给你一份航线列表 tickets ,其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK(肯尼迪国际机场)出发的先生,所以该行程必须从 JFK…

【小程序】常用方法、知识点汇总1

欢迎来到《小5讲堂》 这是《小程序》系列文章,每篇文章将以博主理解的角度展开讲解, 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 目录 前言请求超时Markdown解析逐行显示效果文本变动事件转发…

C语言—每日选择题—Day65

前言 我们的刷题专栏又又又开始了,本专栏总结了作者做题过程中的好题和易错题。每道题都会有相应解析和配图,一方面可以使作者加深理解,一方面可以给大家提供思路,希望大家多多支持哦~ 第一题 1、如下代码输出的是什么…

LINUX系统触摸工业显示器芯片应用方案--Model4(简称M4芯片)

背景介绍: 触摸工业显示器传统的还是以WINDOWS为主,但近年来,安卓紧随其后,但一直市场应用情况不够理想,反而是LINUX系统的触摸工业显示器大受追捧呢? 触摸工业显示器传统是以Windows系统为主&#xff0c…

无线游戏手柄的测试(Windows11系统手柄调试方法)

实物 1、把游戏手柄的无线接收器插入到电脑usb接口中 2、【控制面板】----【查看设备和打印机】 3、【蓝牙和其它设备】--【更多设备和打印机设置】 4、鼠标右键【游戏控制器设置】 5、【属性】 6、【测试】(每个按键是否正常) 7、【校准】(…

学习笔记:解决拖延

1 解决拖延,减轻压力的关键心态和方法 1.1 要点梳理 拖延是因为自己一直在逃避,重点是要有效突破逃避圈,进入学习圈,扩展成长圈。 毒蛇曲线(见思维导图)中越是临近截止期限,拖延的焦虑越上升…

【项目实战经验】DataKit迁移MySQL到openGauss(下)

上一篇我们分享了安装、设置、链接、启动等步骤,本篇我们将继续分享迁移、启动~ 目录 9. 离线迁移 9.1. 迁移插件安装 中断安装,比如 kill 掉java进程(安装失败也要等待300s) 下载安装包准备上传 缺少mysqlclient lib包 mysq…