Jetpack Compose 布局挑战

Question

我正在尝试在 compose 中布局以下内容，但我似乎无法让对齐/安排正常工作。我尝试从 Row() 开始，也尝试从 Column 开始，但结果相同 - 未对齐。

所以我有以下属性：

 1. constantA = "774"
 2. operator = "+"
 3. constantB = "62"
 4. line = "-------"
 5. answer = "826"
 6. icon = "checkmark"

对齐方式需要如下：

     774
    + 52
   -----
     826 ✓ 

任何帮助或指点将不胜感激！

Answer 1

如果您想使用常规图标：

@Preview
@Composable
fun OperationPreview() {
    val constantA = "774"
    val operator = "+"
    val constantB = "62"
    val line = "-------"
    val answer = "826"

    Row(verticalAlignment = Alignment.Bottom) {
        Column(horizontalAlignment = Alignment.End) {
            Text(text = constantA)
            Text(text = "$operator $constantB")
            Text(text = line)
            Row() {
                Text(text = answer)
            }
        }
        Icon(
            modifier = Modifier
                .size(10.dp)
                .padding(bottom = 5.dp),
            imageVector = Icons.Default.Check,
            contentDescription = null
        )
    }

}

Answer 2

@Composable
fun TextAlignLayout() {
    val constantA = "774" + "    "
    val operator = "+" + " "
    val constantB = "62" + "    "
    val line = "-------" + "    "
    val answer = "826"
    val icon = "✓"

    Column(
        modifier = Modifier
            .padding(24.dp)
            .fillMaxSize(),
        horizontalAlignment = Alignment.End
    ) {
        Text(constantA)
        Text("$operator$constantB")
        Text(line)
        Text("$answer $icon")
    }
}