news 2026/4/18 6:40:03

compose verticalAlignment ,horizontalAlignment,contentAlignment和Arrangement区别

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
compose verticalAlignment ,horizontalAlignment,contentAlignment和Arrangement区别

1. Alignment 是一个通用概念,但具体形式不同

容器类型属性名称作用范围是否可单个覆盖
RowverticalAlignment所有子元素的垂直对齐❌ 不可
ColumnhorizontalAlignment所有子元素的水平对齐❌ 不可
BoxcontentAlignment默认影响所有❌ 不可
BoxModifier.align()可单个覆盖✅ 可以

Modifier.align()是单独覆盖,Modifier.align()中使用的是 Arrangement

2. 正确的分类描述

Row 容器:
  • 主轴(水平)horizontalArrangement- 控制所有子元素的水平分布
  • 交叉轴(垂直)verticalAlignment- 控制所有子元素的垂直对齐(全局设置)
Column 容器:
  • 主轴(垂直)verticalArrangement- 控制所有子元素的垂直分布
  • 交叉轴(水平)horizontalAlignment- 控制所有子元素的水平对齐(全局设置)
Box 容器:
  • 整体对齐contentAlignment- 设置所有子元素的默认位置
  • 单个对齐Modifier.align()- 控制单个子元素的位置(可覆盖 contentAlignment)

3. 关键澄清:Alignment这个术语的三种用法

这是最易混淆的地方:

  1. Alignment接口/类:基础的坐标定位系统
  2. horizontalAlignment/verticalAlignment:Row/Column 的属性,全局影响所有子元素
  3. Modifier.align(alignment: Alignment):BoxScope 的扩展函数,针对单个元素
// 示例:这三个"Alignment"是不同的东西Row(verticalAlignment=Alignment.CenterVertically// 这是 Row 的属性,全局设置){// 这里不能使用 Modifier.align()}Box{// 这里可以使用 Modifier.align()Box(modifier=Modifier.align(Alignment.Center)// 这是 BoxScope 的扩展函数)}

总结

  • Arrangement:在 Row/Column 中,控制主轴方向所有子元素的分布
  • horizontalAlignment / verticalAlignment:在 Row/Column 中,控制交叉轴方向所有子元素的对齐(全局)
  • Box 的特殊机制:Box 使用contentAlignment(全局默认)和Modifier.align()(单个覆盖)
  • 重要区别:Row/Column 的 Alignment 是容器属性,影响所有子元素;Box 的Modifier.align()元素修饰符,可单独设置
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/18 6:38:16

终端里的秘密图书馆:Agent Skills如何点亮AI代理的灵魂

想象一下,你推开一扇隐秘的木门,走进一个尘封已久的图书馆。书架上摆满了泛黄的卷轴,每一卷都封存着某种专属智慧:有的教你如何优雅地书写代码,有的指引你审计安全的隐秘路径,还有的描绘出一场多幕剧般的自动化流程。你随意抽出一卷,展开阅读,瞬间,一位隐形的学者出现…

作者头像 李华
网站建设 2026/4/18 6:35:37

基于STM32N6+BES2700Y光波导智能眼镜系统设计

基于STM32N6BES2700Y光波导智能眼镜系统设计基于STM32N6微控制器与BES2700Y蓝牙音频芯片的光波导眼镜系统,是面向全天候佩戴、轻量化AR(增强现实)体验的前沿设计方案。此设计的核心在于通过高度集成的芯片与先进光学技术,在保障超…

作者头像 李华
网站建设 2026/4/16 2:41:25

汽车行业如何通过CKEDITOR实现Word技术文档的跨平台发布?

Word图片转存功能开发全记录 技术选型与架构设计 作为项目技术负责人,针对政府文档系统的特殊需求,设计以下技术方案: #mermaid-svg-OichK7fHxisZaWIT{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill…

作者头像 李华
网站建设 2026/4/10 0:21:44

基于SpringBoot的实验室共享预约系统(源码+lw+部署文档+讲解等)

课题介绍随着高校、科研机构及企业研发投入的增加,各类专业实验室数量不断增多,但当前实验室管理普遍存在共享程度低、预约流程繁琐、设备使用效率不高、预约冲突频发、使用记录不规范、耗材管理混乱等问题,既造成了实验室资源的闲置浪费&…

作者头像 李华
网站建设 2026/4/18 4:35:04

30+程序员2个月零基础转行大模型,月薪2w+!亲身经验助你突破职业瓶颈,希望能给北上广深的你一些启发

本文是一位30北漂程序员的转行经验分享,讲述了他在十年工作后面临职业瓶颈和生活困境,决定转行大模型领域的故事。文章分析了大模型行业的机遇与挑战,详细介绍了转行所需技能和学习路径,并提供了系统的大模型学习资源。作者通过2个…

作者头像 李华