Compose关于Column属性说明

近期在熟悉Compose日常控件使用,

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) 
inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
)

这两位兄弟的二个属性,每次看了使用说明感慨原来如此。突然在项目用时一脸懵逼的跑去网上看看怎么用,才能如何实现UI设计稿效果。

关于Column的verticalArrangement 给的一张直观图(网上盗图,不过我在Arragement类里属性值里面并没有找到EqualWeight属性):

 至于horizontalAlignment:可理解为组合控件类对齐方式,相关属性值如下:

@Stable
val Start: Horizontal = BiasAlignment.Horizontal(-1f)
@Stable
val CenterHorizontally: Horizontal = BiasAlignment.Horizontal(0f)
@Stable
val End: Horizontal = BiasAlignment.Horizontal(1f)

关于Row组合控件理解可以从Column组件中二个属性类比理解。Column是竖直摆放子控件,它的属性verticalArrangement针对于竖直子控件叠放规律。而Row控件水平叠放控件,故子控件水平摆放规律,其属性名horizontalArrangement,对应于属性值如下。

horizontalArrangement(水平方向设定)

Start,End,Center,SpaceEvenly,SpaceAround,SpaceBetween 

可参考Column属性verticalArrangement图

另外水平摆放的控件,是顶部对齐?居中对齐?还是底部对齐?其属性名verticalAlignment对应于属性值如下:

@Stable
val Top: Vertical = BiasAlignment.Vertical(-1f)
@Stable
val CenterVertically: Vertical = BiasAlignment.Vertical(0f)
@Stable
val Bottom: Vertical = BiasAlignment.Vertical(1f)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值