如何捕捉 Row/Column 元素以在 JetPack Compose 中结束

Question

我正在使用下面的代码来显示文本视图、图像和文本字段以显示在图像之后的每个角（开始和结束）。它基本上是一张卡片，开头有图像，后面是一列，有两个文本视图，另一列有文本视图和基本文本字段用于输入。

@Composable
fun BaseCard() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(Alignment.CenterVertically, true)
            .wrapContentHeight()
            .clip(RoundedCornerShape(8.dp)),
        elevation = 10.dp,
        backgroundColor = Color.White
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            verticalAlignment = Alignment.CenterVertically
        )
        {
            Image(
                modifier = Modifier
                    .size(35.dp, 35.dp) //50dp
                    .clip(RoundedCornerShape(8.dp))
                    .clickable {
                        navController.navigate("meta") {
                            launchSingleTop = true
                        }
                    },
                painter = img,
                alignment = Alignment.Center,
                contentDescription = "",
                contentScale = ContentScale.Crop,
            )
            Spacer(modifier = Modifier.width(8.dp))
            Column(horizontalAlignment = Alignment.Start) {
                Text(
                    text = "US Dollar" + "($)",
                    color = Color.Gray, 
                    style = Typography.subtitle2
                )
                Text(
                    text = "USD",
                    Modifier.padding(0.dp),
                    color = MaterialTheme.colors.onPrimary,
                    style = Typography.h5,
                )
            }
            Spacer(modifier = Modifier.width(8.dp))
            Column(horizontalAlignment = Alignment.End) {
                Text(
                    text = "Amount",
                    color = Color.Gray, 
                    style = Typography.subtitle2
                )                   
                BasicTextField(
                    value = typedValue,
                    onValueChange = {
                        ----
                    },
                    textStyle = LocalTextStyle.current.copy(
                        fontFamily = NunitoFontFamily,
                        fontWeight = FontWeight.W600,
                        letterSpacing = 0.sp,
                        fontSize = 24.sp,
                        textAlign = TextAlign.End
                    ),
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Number,
                        imeAction = ImeAction.Done
                    )
                )
            }
        }
    }
}

然而，它显示如下。

如何删除多余的 space 并在每一端正确对齐元素？

Answer 1

有多种方法可以实现您的要求

一个正在使用 Spacer(modifier=Modifier.weight(1f) 而不是
Spacer(modifier = Modifier.width(8.dp))

对于此处的 Spacer，由于它在 Row 内，因此它将占用所有没有权重修饰符的 space。

      // Change this Spacer's modifier to Modifier.weight(1f) 
      Spacer(modifier = Modifier.width(8.dp))
        Column(horizontalAlignment = Alignment.End) {
            Text(
                text = "Amount",
                color = Color.Gray, 
                style = Typography.subtitle2
            )                   
            BasicTextField(
                value = typedValue,
                onValueChange = {
                    ----
                },
                textStyle = LocalTextStyle.current.copy(
                    fontFamily = NunitoFontFamily,
                    fontWeight = FontWeight.W600,
                    letterSpacing = 0.sp,
                    fontSize = 24.sp,
                    textAlign = TextAlign.End
                ),
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Number,
                    imeAction = ImeAction.Done
                )
            )
        }

第二个是使用 Box 而不是 Row 并有 2 个可组合项，其中一个对齐到

Box(modifier = Modifier
          .fillMaxWidth()
          .padding(8.dp)) {
    Column(modifier = Modifier.align(Alignment.CenterStart)) {
    
    }

    Column(modifier = Modifier.align(Alignment.CenterEnd)) {

    }
}