柱重分布

Question

我有一个Column组件(SettingsGraphicSelectComposeView.kt)，它的权重需要1f (modifier.weight(weight = 1f))，这样这个组件在容器中的倍数就会均匀分布。问题是，当从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

weight修饰符似乎只有当该列是Row的子列时才能归因于Row，因此一名团队成员建议用Column替换包含SettingsGraphicSelectComposeView的Row元素，如果您愿意的话，它使weight属性“合法”，因为我们在RowScope中，这是可行的。

​

​

不知道该怎么想，但它起作用了，而且随着Compose现在还在alpha07上(自从我发布文章以来的新版本)，将来的事情可能会再次改变。

这是一个变化：

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

Answer 2

尝试在您的Modifier.weight(1f)本身中使用Row，因此它从RowScope获取Modifier.weight()

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 3

解决方案如下：修饰符-> "Arrangement.SpaceEvenly"

Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceEvenly,
    )

如果您想为任何特定的行项提供更大的空间，可以使用自己的条件动态地处理它：

例如：

modifier=Modifier.then(Modifier.weight(if(myItem == index) 2f else 1f))

                                **'OR'**

modifier=Modifier.then(Modifier.weight(if(myItem .title=="GOLF") 1.5f else 1f))