android - 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)
            )
        )
    }
}

此组件放置在以下组合 View 中:

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 的子项，则 weight 修饰符似乎只能归因于 Column，因此一位团队成员建议将包含 SettingsGraphicSelectComposeView 的 Row 元素替换为 Column 并使 weight 属性“合法”(如果您愿意)，因为我们在一个 RowScope 中，这行得通。

不知道该怎么想，但它确实有效，而且由于 Compose 目前仍处于 alpha07( self 发布帖子以来的新版本)， future 情况可能会再次发生变化。

这里是变化:

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
        )
    }
}