I'm trying to put a drop down for US states that uses a TextField and a TextField in a Row and the second TextField (zip) does not show up. What am I doing wrong?

Here is how I'm declaring the row:

    Row (Modifier.fillMaxWidth()) {
        StateSelection(
            onFormChanged = onFormChanged,
            selectedLocation = selectedLocation,
            label = "State"
        )
        Spacer(modifier = Modifier.width(8.dp))
        ShippingField(
            modifier = modifier,
            onFormChanged = onFormChanged,
            formType = FormType.SHIPPING_ZIP,
            label = "Zip",
            valueField = selectedLocation.zipCode
        )

    }

StatesDropDown:

@Composable
fun StateSelection(
onFormChanged: (FormType, String) -> Unit,
selectedLocation: Address,
label: String
) {
// State variables
val statesMap = AddressUtils.mapOfAmericanStatesToValue
var stateName: String by remember { mutableStateOf(selectedLocation.shippingState) }
var expanded by remember { mutableStateOf(false)}
val focusManager = LocalFocusManager.current

Box(contentAlignment = Alignment.CenterStart) {
    Row(
        Modifier
            .padding(vertical = 8.dp)
            .clickable {
                expanded = !expanded
            }
            .padding(8.dp),
        horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.CenterVertically
    ) { // Anchor view
        TextField(
            modifier = Modifier
                .fillMaxWidth(),
            value = stateName,
            onValueChange = {
                onFormChanged(FormType.SHIPPING_COUNTRY, it)
            },
            label = { Text(text = label) },
            textStyle = MaterialTheme.typography.subtitle1,
            singleLine = true,
            trailingIcon = {
                IconButton(onClick = { expanded = true }) {
                    Icon(imageVector = Icons.Filled.ArrowDropDown, contentDescription = "")
                }
            },
            keyboardActions = KeyboardActions(onNext =  { focusManager.moveFocus(FocusDirection.Down) }),
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Done,
                keyboardType = KeyboardType.Text
            ),
            colors = TextFieldDefaults.textFieldColors(
                cursorColor = MaterialTheme.colors.secondary,
                textColor = MaterialTheme.colors.onPrimary,
                focusedIndicatorColor = MaterialTheme.colors.secondary,
                backgroundColor = MaterialTheme.colors.secondaryVariant
            )
        ) // state name label
        DropdownMenu(expanded = expanded, onDismissRequest = {
            expanded = false
        }) {
            statesMap.asIterable().iterator().forEach {
                val (key, value) = it
                DropdownMenuItem(onClick = {
                    expanded = false
                    stateName = key
                    onFormChanged(FormType.SHIPPING_STATE, key)
                },
                modifier = Modifier.fillMaxWidth()) {
                    Text(text = key)
                }
            }
        }
    }
}
}

ZipCode:

@Composable
fun ShippingField(
modifier: Modifier,
onFormChanged: (FormType, String) -> Unit,
formType: FormType,
label: String,
valueField: String

) {
val focusManager = LocalFocusManager.current
var state by rememberSaveable {
    mutableStateOf(valueField)
}

TextField(modifier = modifier
    .background(MaterialTheme.colors.primaryVariant)
    .fillMaxWidth(),
    value = state,
    onValueChange = {
        state = it
        onFormChanged(formType, it)
    },
    label = { Text(text = label) },
    textStyle = MaterialTheme.typography.subtitle1,
    singleLine = true,
    keyboardActions = KeyboardActions(onNext =  { focusManager.moveFocus(FocusDirection.Down) }),
    keyboardOptions = KeyboardOptions(
        imeAction = ImeAction.Next,
        keyboardType = KeyboardType.Text
    ),
    colors = TextFieldDefaults.textFieldColors(
        cursorColor = MaterialTheme.colors.secondary,
        textColor = MaterialTheme.colors.onPrimary,
        focusedIndicatorColor = MaterialTheme.colors.secondary,
        backgroundColor = MaterialTheme.colors.secondaryVariant
    )
)
}

CodePudding user response：

Row (Modifier.fillMaxWidth()) {
    StateSelection(
        modifier = Modifier.weight(1f)
          ...
    )
    Spacer(modifier = Modifier.width(8.dp))
    ShippingField(
         modifier = Modifier.weight(1f),
           ...
    )
}

You should do it like above, and then pass the modifier to your composables below. Weight distributes and fills max width evenly on your composables

CodePudding user response：

You have to remove the modifier = Modifier.fillMaxWidth() in the 1st TextField in the StatesDropDown composable.