How to get Android Compose fillMaxWidth(0.7f) (for TextField) respected (only 0.5f is practically us-CodePudding

I have this Android Jetpack Compose componend:

@Composable
fun KeyValueRow(key: String, value: String, color: Color = Color(0xFFD1D9FF), isImportant: Boolean = false) {
    Row(
        modifier = Modifier
            .background(color)
            .fillMaxWidth(1f)
    ) {
        if (isImportant) {
            Text(
                key,
                modifier = Modifier.fillMaxWidth(0.28f),
                style = MaterialTheme.typography.subtitle2
            )
            Spacer(modifier = Modifier.fillMaxWidth(0.02f))
            Text(
                value,
                modifier = Modifier.fillMaxWidth(0.7f),
                style = MaterialTheme.typography.subtitle2
            )
        } else {
            Text(
                key,
                modifier = Modifier.fillMaxWidth(0.28f),
                style = MaterialTheme.typography.body2
            )
            Spacer(modifier = Modifier.fillMaxWidth(0.02f))
            Text(
                value,
                modifier = Modifier.fillMaxWidth(0.7f),
                style = MaterialTheme.typography.body2
            )
        }
    }
}

which I am using e.g.

Column (
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .fillMaxWidth()
        .padding(all = 5.dp)
) {
    KeyValueRow(
        key = "Order No:",
        value = uiState.orderNo.toString()
    )
    KeyValueRow(
        key = "Customer:",
        value = uiState.customer
    )
}

While I have provided 0.7f for the TextField, the visible size (and the exact size as can be inspected in the Layout Inspector) ir only around 0.5f. Why is that? How can I as Android framework/Kotlin compiler to respect values that are greated than 0.5f?

Currently my components are aligned to the left side and that is why the row contains approx. 0.2f free space at the right side.

CodePudding user response：

Using fillMaxWidth(0.7f) you are filling the 70% of the available space, not the 70% of the width of the Row.

Use the weight modifier.

Row(
    modifier = Modifier
        .background(Yellow)
        .fillMaxWidth(1f)
) {

    Text(
        "key",
        modifier = Modifier.weight(0.28f),
        style = MaterialTheme.typography.subtitle2
    )
    Spacer(modifier = Modifier.weight(0.02f))
    Text(
        "text",
        modifier = Modifier.weight(0.7f),
        style = MaterialTheme.typography.subtitle2
    )
}