Jetpack Compose中重复调用FormTextFieldComponent仅显示第一个的问题

问题根源 #

你的FormTextFieldComponent内部的Column使用了Modifier.fillMaxSize()，这个修饰符会让每个组件占据整个屏幕的可用空间。当连续调用两个该组件时，第一个组件已经占满了全部屏幕区域，第二个组件被挤到了可视范围之外，因此无法显示。

修复方案 #

将组件内部的fillMaxSize()替换为fillMaxWidth()（让宽度铺满父布局，高度自适应内容），或者直接移除fillMaxSize()——因为Column默认就是高度包裹内容的。修改后的组件代码如下：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FormTextFieldComponent(
    topText: String,
    initialText: String=""
) = Column(
    modifier = Modifier
        .fillMaxWidth() // 替换fillMaxSize，保证宽度铺满且高度自适应
        .padding(16.dp)
) {
    var textState by remember { mutableStateOf(TextFieldValue(initialText)) }

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

另外，你调用代码里的Spacer高度仅1dp，间距过小几乎不可见，建议调整为更合理的数值（比如16.dp）：

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

内容的提问来源于stack exchange，提问作者nikhilbalwani