无法在可组合项中指定权重，且其中未声明列

Question

我正在尝试使用 jetpack compose 构建一个简单的计算器，我的可组合项是：

• calculator()：这个可组合项组成了整个计算器
• calculatorRow()：它创建一行按钮

当我将 Modifier.weight 应用于每行时，它不会编译，因为列是在不同的可组合函数中声明的。

如何解决这个问题？

@Composable
fun calculatorRow(weight: Float, symbols: List<String>, operate: (String) -> Unit) {
    Row(
        horizontalArrangement = Arrangement.Center,
        Modifier.weight(weight)
    ) {
        symbols.map { symbol ->
            Button(
                modifier = Modifier
                    .weight(1f)
                    .padding(1.dp)
                    .clip(RoundedCornerShape(8.dp)),
                onClick = {
                    operate(symbol)
                }
            ) {
                Text(text = symbol)
            }
        }
    }
}

@Composable
fun calculator(padding: PaddingValues) {
    var operations = remember {
        mutableStateOf("")
    }
    val operate =
        { word: String -> if (word == "C") operations.value = "" else operations.value += word }
    Column(
        Modifier
            .padding(padding)
    ) {
        Card {
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
                text = operations.value
            )
        }
        calculatorRow(1f, listOf("1", "2", "3", "+"), operate)
        calculatorRow(1f, listOf("4", "5", "6", "-"), operate)
        calculatorRow(1f, listOf("7", "8", "9", "*"), operate)
        calculatorRow(1f, listOf("0", ".", "C", "/"), operate)

    }
}


@Preview
@Composable
fun preview() {
    calculator(PaddingValues(10.dp))
}

Answer 1

这是预期的行为，因为 CalculatorRow Composeable 可以从任何其他可组合函数调用，甚至是你不能在 (exp:Box) 中使用权重的函数 因此，您可以将修饰符传递给calculatorRow，并使用它从正确的位置（columnScope）传递权重，以便对其进行编译。

@Composable
fun calculator(padding: PaddingValues) {
    var operations = remember {
        mutableStateOf("")
    }
    val operate =
        { word: String -> if (word == "C") operations.value = "" else 
    operations.value += word }
        Column(
        Modifier
            .padding(padding)
    ) {
        Card {
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
                text = operations.value
            )
        }
        calculatorRow(
            symbols = listOf("1", "2", "3", "+"),
           operate = operate,
           modifier = Modifier
                .weight(1f)
        )
        calculatorRow(
            symbols = listOf("4", "5", "6", "-"),
            operate = operate,
           modifier = Modifier
                .weight(1f)
        )
        calculatorRow(
            symbols = listOf("7", "8", "9", "*"),
            operate = operate,
            modifier = Modifier
                .weight(1f)
        )
       calculatorRow(
            symbols = listOf("0", ".", "C", "/"),
            operate = operate,
            modifier = Modifier
                .weight(1f)
        )

    }
}




@Composable
fun calculatorRow(
    modifier: Modifier,
    symbols: List<String>,
    operate: (String) -> Unit,
) {
    Row(
        horizontalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        symbols.map { symbol ->
            Button(
                modifier = Modifier
                    .weight(1f)
                    .padding(1.dp),
                onClick = {
                    operate(symbol)
                }
            ) {
                Text(text = symbol)
            }
        }
    }
}