跳转至

Column

1. 概述

一种界面的 Composable ,它可以让里面的子项按垂直顺序排列。对于一个以水平顺序来安排里面子项的 Composable,可以查看 Row,注意,默认情况下,Column 里面的子项是不会滚动的。 参见 Modifier.verticalScroll 来实现这个行为。

对于仅组合和布置当前可见项目的垂直可滚动列表,可以参见 LazyColumn

Column 能够根据使用 ColumnScope.weight 修改器提供的权重来分配子项的高度。如果其中的一个子项没有被提供权重,那么它将会被要求提供一个首选的高度,然后再根据剩余的可用空间按比例计算有权重的子项的尺寸。

当它的子项都没有权重时,一个 Column 将尽可能小,以适配它的子项一个一个地叠加。为了改变 Column 的高度,可以使用 Modifier.requiredHeight 修改器。

例如,想让它填满所有可用的高度,可以使用 Modifier.fillMaxHeight。如果一个 Column 的至少一个子项有一个权重,Column 将填满可用的高度,所以不需要 Modifier.fillMaxHeight。如果 Column 的大小应该被限制,那么应该使用 Modifier.requiredHeightModifier.requiredSize

Column 的尺寸大于它的子项的总和时,可以指定一个垂直的 Arrangement 来定义 Column 内子项的定位。可用的定位行为参见 Arrangement;也可以使用 Arrangement 的构造函数来定义一个自定义的排列。

使用示例:

Column {

    // 没有权重的子项将会有指定的尺寸

    Box(Modifier.size(40.dp, 80.dp).background(Color.Magenta))

    // 有权重,这个子项将会占用剩余高度的一半

    Box(Modifier.width(40.dp).weight(1f).background(Color.Yellow))

    // 有权重,但是 fill 参数是 false,这个子项将会最多占用剩余高度的一半
    // 因此,如果指定的高度较大,它将会占用 80 dp(它的首选高度)

    Box(
        Modifier.size(40.dp, 80.dp)
            .weight(1f, fill = false)
            .background(Color.Green)
    )
}

再来看看第三个子项的 fill 参数为 true (默认)时候的情况吧,

Column {

    Box(Modifier.size(40.dp, 80.dp).background(Color.Magenta))

    Box(Modifier.width(40.dp).weight(1f).background(Color.Yellow))

    Box(
        Modifier.size(40.dp, 80.dp)
            .weight(1f)
            .background(Color.Green)
    )
}


最后更新: August 14, 2021