前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Jetpack Compose_Alignment对其+Arrangement排列

Jetpack Compose_Alignment对其+Arrangement排列

作者头像
mikimo
发布2024-06-19 12:54:06
1220
发布2024-06-19 12:54:06
举报
文章被收录于专栏:iOS开发~iOS开发~

1.Alignment 对齐

1.1Alignment 对齐方式

Alignment

类型

对齐方式

说明

Alignment

TopStart

顶部左对齐

TopCenter

顶部居中对齐

TopEnd

顶部右对齐

CenterStart

居中左对齐

Center

居中

CenterEnd

居中右对齐

BottomStart

底部左对齐

BottomCenter

底部居中

BottomEnd

底部右对齐

Alignment.Vertical

Top

竖直的置顶

CenterVertically

竖直的居中

Bottom

竖直的置底

Alignment.Horizontal

Start

水平的置左

CenterHorizontally

水平的居中

End

水平的置右

疑问:为什么有 Alignment 了,还需要有 Alignment.VerticalAlignment.Horizontal 呢? 因为有些控件,如 Row 只能调整竖直方向上的对齐方式,水平方向上调的是 Arrangement 排列,因此对齐枚举需要限制为特定方向上的

1.2AbsoluteAlignment 绝对对齐

AbsoluteAlignment 不知道布局方向的常见对齐方式的集合。

类型

对齐方式

说明

Alignment

TopLeft

左上角

TopRight

右上角

CenterLeft

居中左侧

CenterRight

居中右侧

BottomLeft

底部左侧

BottomRight

底部右侧

Alignment.Horizontal

Left

水平方向左侧

Right

水平方向右侧

当不知道是横向还是纵向布局方式时使用,暂时还没想到应用场景。(欢迎评论补充)


1.3BiasAlignment 偏差对齐

BiasAlignment -1: 表示 start/top 0: 表示 center 1: 表示 end/bottom

代码语言:javascript
复制
data class BiasAlignment(
    val horizontalBias: Float, // 水平方向对齐方式
    val verticalBias: Float // 竖直方向对齐方式
)

1.4BiasAbsoluteAlignment偏差绝对对齐

BiasAbsoluteAlignment -1: 表示对齐到左上角 0: 表示居中 1: 表示右下角 就是在 左上角右下角 这条斜线上对齐

代码语言:javascript
复制
data class BiasAbsoluteAlignment(
    private val horizontalBias: Float,
    private val verticalBias: Float
)

2.Arrangement 排列

2.1Arrangement 排列方式

Arrangement

对齐方式

说明

Equal Weight

等宽/高

Space Between

等间距

Space Around

每个item等padding

Space Evenly

每个item等margin

End

尾部对其

Center

居中

Start

头部对其

2.2Arrangement.Horizontal

如:RowhorizontalArrangement

2.3Arrangement.Vertical

如:ColumnverticalArrangement

参考: androidx.compose.foundation.layout Componse教程 | 关于 Alignment与Arrangement

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-06-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.Alignment 对齐
    • 1.1Alignment 对齐方式
      • 1.2AbsoluteAlignment 绝对对齐
        • 1.3BiasAlignment 偏差对齐
          • 1.4BiasAbsoluteAlignment偏差绝对对齐
          • 2.Arrangement 排列
            • 2.1Arrangement 排列方式
              • 2.2Arrangement.Horizontal
                • 2.3Arrangement.Vertical
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档