如何使用 Android Jetpack Compose 布局 Row 上的所有项目

Question

我正在尝试在我的应用程序中使用 Compose。

我想画一个像下面这样的用户界面。

它有带有开关的标题和说明。

我的代码在这里：

@Composable
fun Switch2Lines(
    @StringRes title: Int,
    @StringRes desc: Int
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Column {
            Text(
                text = "Title",
                modifier = Modifier.padding(top = 16.dp),
                fontSize = 18.sp
            )
            Text(text = "Desc Desc Desc Desc Desc Desc Desc Desc Desc Desc")
        }
        Switch(
            checked = true,
            onCheckedChange = {},
            modifier = Modifier.wrapContentSize()
        )
        Spacer(modifier = Modifier.padding(16.dp))
    }
}

在这种情况下，描述太长。所以开关的布局不正确。我加了一个SpacerSwitch的末端，但是不起作用。

我怎样才能解决这个问题？我应该使用constraintlayout-compose吗？

Answer 1

您可以删除垫片并为您的Column.

Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(16.dp)
    ) {
        Column(modifier = Modifier.weight(1f)) {
            Text(
                text = "Title",
                modifier = Modifier.padding(top = 16.dp),
                fontSize = 18.sp
            )
            Text(text = "Desc Desc Desc Desc Desc Desc Desc Desc Desc Desc")
        }
        Switch(
            checked = true,
            onCheckedChange = {},
            modifier = Modifier.wrapContentSize()
        )
    }

要了解重量的工作原理，您可以阅读此处的文档

/**
     * Size the element's width proportional to its [weight] relative to other weighted sibling
     * elements in the [Row]. The parent will divide the horizontal space remaining after measuring
     * unweighted child elements and distribute it according to this weight.
     * When [fill] is true, the element will be forced to occupy the whole width allocated to it.
     * Otherwise, the element is allowed to be smaller - this will result in [Row] being smaller,
     * as the unused allocated width will not be redistributed to other siblings.
     *
     * @param weight The proportional width to give to this element, as related to the total of
     * all weighted siblings. Must be positive.
     * @param fill When `true`, the element will occupy the whole width allocated.
     */
    @Stable
    fun Modifier.weight(
        /*@FloatRange(from = 0.0, fromInclusive = false)*/
        weight: Float,
        fill: Boolean = true
    ): Modifier

因此，它首先测量未加权的孩子（在本例中为 Switch），然后在加权的孩子之间划分剩余空间。由于 Column 是这里唯一的子项，因此任何权重值都应该在这里起作用。