Compose 中的列权重分布

Question

我有一个 Column 组件 (SettingsGraphicSelectComposeView.kt)，它需要具有 1f (modifier.weight(weight = 1f)) 的权重，这样容器中的多个组件才能均匀分布.问题是，当将 Compose 从 alpha02 升级到 alpha06 时，不再可能将上述修饰符分配给列。

组件代码如下：

@Composable
fun SettingsGraphicSelectComposeView(
    modifier: Modifier = Modifier,
    textStyles: TextStyles = KoinJavaComponent.inject(TextStyles::class.java).value,
    viewModel: ItemViewModel.GraphicSelect
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
        modifier = modifier.weight(weight = 1f) // <-- in alpha06 this gives an error
    ) {
        Image(
            asset = vectorResource(id = viewModel.imageId)
        )
        Text(
            modifier = modifier
                .padding(
                    start = dimensionResource(id = R.dimen.spacingL),
                    top = dimensionResource(id = R.dimen.spacingL),
                    end = dimensionResource(id = R.dimen.spacingL),
                    bottom = dimensionResource(id = R.dimen.spacingS)
                ),
            text = viewModel.caption,
            style = textStyles.TitleSmall.merge(TextStyle(color = colorResource(id = R.color.tint_secondary)))
        )
        RadioButton(
            selected = viewModel.selected,
            onClick = viewModel.action,
            colors = RadioButtonConstants.defaultColors(
                selectedColor = colorResource(R.color.brand),
                unselectedColor = colorResource(R.color.tint_secondary)
            )
        )
    }
}

此组件放置在以下组合视图中：

Surface(color = colorResource(id = R.color.background)) {
        Column(
            modifier = Modifier
                .fillMaxHeight()
        ) {
            items.value?.let { items ->
                val switchers = items.filter { it.viewModel is ItemViewModel.Switcher }
                val graphicSelects = items.filter { it.viewModel is ItemViewModel.GraphicSelect }

                if (switchers.isNotEmpty()) {
                    val autoSwitcher = switchers[0]
                    SettingsSwitcherComposeView(viewModel = autoSwitcher.viewModel as ItemViewModel.Switcher)
                }
                Row(
                    modifier = Modifier
                        .padding(horizontal = dimensionResource(id = R.dimen.spacing2XL))
                ) {
                    if (graphicSelects.size > 1) {
                        val lightSelector = graphicSelects[0]
                        val darkSelector = graphicSelects[1]

                        Row(
                            modifier = Modifier
                                .border(
                                    width = 1.dp,
                                    color = colorResource(R.color.highlight),
                                    shape = RoundedCornerShape(
                                        dimensionResource(R.dimen.content_corner_radius)
                                    )
                                )
                                .padding(vertical = dimensionResource(id = R.dimen.spacing2XL))
                        ) {
                            Row {
                                SettingsGraphicSelectComposeView(
                                    viewModel = lightSelector.viewModel as ItemViewModel.GraphicSelect
                                ) // <-- This should have the weight 1f
                                Spacer(
                                    modifier = Modifier
                                        .preferredWidth(1.dp)
                                        .preferredHeight(160.dp)
                                        .background(color = colorResource(R.color.highlight))
                                )
                                SettingsGraphicSelectComposeView(
                                    viewModel = darkSelector.viewModel as ItemViewModel.GraphicSelect
                                ) // <-- This should have the weight 1f
                            }
                        }
                    }
                }
            }
        }
    }

应该是这样的：

但没有重量它看起来像这样：

Answer 1

尝试在您的 Row 本身中使用 Modifier.weight(1f)，因此需要 Modifier.weight() 来自 RowScope:

Row {
    SettingsGraphicSelectComposeView(
        modifier = Modifier.weight(1f),
        viewModel = lightSelector.viewModel as ItemViewModel.GraphicSelect
    )
    Spacer(
        modifier = Modifier
            .preferredWidth(1.dp)
            .preferredHeight(160.dp)
            .background(color = colorResource(R.color.highlight))
    )
    SettingsGraphicSelectComposeView(
        modifier = Modifier.weight(1f),
        viewModel = darkSelector.viewModel as ItemViewModel.GraphicSelect
    )
}

Answer 2

如果此列是 Row 的子项，则 weight 修饰符似乎只能归因于 Column，因此团队成员建议替换 Row包含 SettingsGraphicSelectComposeView 和 Column 的元素，如果您愿意，它使 weight 属性“合法”，因为我们在 RowScope 中，这有效。

不知道该怎么想，但它有效，因为 Compose 现在仍在 alpha07（自从我制作 post 以来的新版本），事情可能以后再改。

更改如下：

Row(
    modifier = modifier
        .padding(horizontal = dimensionResource(id = R.dimen.spacing2XL))
        .border(
            width = 1.dp,
            color = colorResource(R.color.highlight),
            shape = RoundedCornerShape(
                dimensionResource(R.dimen.content_corner_radius)
            )
        )
        .fillMaxWidth()
) {
    Column(modifier = Modifier.weight(weight = 1f).padding(vertical = dimensionResource(id = R.dimen.spacing2XL))) {
        SettingsGraphicSelectComposeView(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            viewModel = viewModel.light.viewModel as ItemViewModel.GraphicSelect
        )
    }

    Spacer(
        modifier = Modifier
            .padding(top = dimensionResource(id = R.dimen.spacing2XL))
            .preferredWidth(1.dp)
            .preferredHeight(160.dp) // TODO: Find a way to make this max AUTO height, not fixed
            .background(color = colorResource(R.color.highlight))
    )

    Column(modifier = Modifier.weight(weight = 1f).padding(vertical = dimensionResource(id = R.dimen.spacing2XL))) {
        SettingsGraphicSelectComposeView(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            viewModel = viewModel.dark.viewModel as ItemViewModel.GraphicSelect
        )
    }
}

Compose 中的列权重分布

Column weight distribution in Compose

android

android-jetpack-compose