Android OutlinedTextField仅显示一次

发布于11月01日

以下是可组合的表单文本字段的代码:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FormTextFieldComponent(
    topText: String,
    initialText: String=""
) = Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
) {
    // Small Text at the top (dynamic content)

    var textState by remember { mutableStateOf(TextFieldValue(initialText)) }

    OutlinedTextField(
        value = textState,
        onValueChange = {
            textState = it
        },
        label = { Text(topText) }
    )
}

但是，它只在下面的代码中出现一次(只显示第一个文本字段):

FormTextFieldComponent("First Name", "Van")
Spacer(modifier = Modifier.height(1.dp))
FormTextFieldComponent("Last Name", "Chen")
Spacer(modifier = Modifier.height(1.dp))

怎么啦？

推荐答案

简单的回答是: 您使用的是fillMaxSize()，因此当渲染第一个Textfield时，它将充满整个屏幕，然后第二个将在屏幕外渲染. 所以你应该用fillMaxWidth()而不是fillMaxSize()

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
)

您可以使用以下代码来证明这一点，包装其中一个TextField并将其zoom 为完整大小的0.5

@Composable
fun Greeting(modifier: Modifier = Modifier) {
    val scrollState = rememberScrollState()

    Column(
        modifier = modifier.fillMaxSize()
    ) {
        Box(modifier = Modifier.fillMaxSize(0.5f)){
            FormTextFieldComponent(topText = "First Name", initialText = "Van")
        }
        Spacer(modifier = Modifier.height(10.dp))
        FormTextFieldComponent(topText = "Last Name", initialText = "Chen")
        Spacer(modifier = Modifier.height(1.dp))
    }
}

另外，作为对大小有更多控制的建议，请try 始终将modifier参数设置为可组合函数，如下所示:

@Composable
fun FormTextFieldComponent(
    modifier: Modifier = Modifier,
    topText: String,
    initialText: String=""
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp)
    ){ }
}

是一种很好的做法，以便从父级修改这一点.