在 Compose 中将两个 TextField 排成一行

Question

我正在尝试为使用 TextField 和一行中的 TextField 的美国各州添加下拉列表，但第二个 TextField (zip) 未显示。我做错了什么？

这是我声明该行的方式：

    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)
                }
            }
        }
    }
}
}

邮政编码：

@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
    )
)
}

Answer 1

您必须在 StatesDropDown 可组合项的第一个 TextField 中删除修饰符 = Modifier.fillMaxWidth()。

Answer 2

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

你应该像上面那样做，然后将修饰符传递给下面的可组合项。 Weight 在您的可组合项上均匀分布和填充最大宽度

在 Compose 中将两个 TextField 排成一行

Put two TextFields in a row in Compose

android

row

android-jetpack-compose