如何让Jetpack Compose中Row宽度与TextField一致？

当然可以在不设置固定尺寸的前提下实现需求，有两种常用方式，根据你想要的布局效果选择即可：

方式一：让Row匹配TextField的内容宽度（居中布局） #

这种方式下，TextField的宽度由自身内容（比如占位文本）决定，Row自动对齐TextField的宽度，整体保持居中：

Column(
    modifier = Modifier.fillMaxSize().padding(padding),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    TextField(
        value = email,
        onValueChange = { email = it },
        placeholder = { Text(text = "Email") },
        modifier = Modifier.width(IntrinsicSize.Max)
    )
    TextField(
        value = password,
        onValueChange = { password = it },
        placeholder = { Text(text = "Pass") },
        modifier = Modifier.width(IntrinsicSize.Max).padding(top = 8.dp)
    )
    Row(
        modifier = Modifier
            .width(IntrinsicSize.Max)
            .padding(top = 16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Button(
            onClick = { start(email, password) }
        ) {
            Text(text = "Start", fontSize = 18.sp)
        }
        Spacer(modifier = Modifier.weight(1f))
        Text(text = "Skip")
    }
}

关键说明： #

• Modifier.width(IntrinsicSize.Max) 让组件宽度由内部内容的最大尺寸决定，避免硬编码固定值
• 给TextField和Row都添加这个修饰符，就能保证两者宽度完全一致
• 额外添加的padding是为了让元素间间距更合理，提升视觉体验

方式二：让TextField和Row都填充可用宽度（全屏宽度布局） #

如果希望输入框占满屏幕可用宽度（减去左右padding），可以用这种方式：

Column(
    modifier = Modifier.fillMaxSize().padding(padding),
    verticalArrangement = Arrangement.Center
) {
    TextField(
        value = email,
        onValueChange = { email = it },
        placeholder = { Text(text = "Email") },
        modifier = Modifier.fillMaxWidth()
    )
    TextField(
        value = password,
        onValueChange = { password = it },
        placeholder = { Text(text = "Pass") },
        modifier = Modifier.fillMaxWidth().padding(top = 8.dp)
    )
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Button(
            onClick = { start(email, password) }
        ) {
            Text(text = "Start", fontSize = 18.sp)
        }
        Spacer(modifier = Modifier.weight(1f))
        Text(text = "Skip")
    }
}

关键说明： #

• 移除Column的horizontalAlignment = Alignment.CenterHorizontally，让子元素自动填充可用宽度
• Modifier.fillMaxWidth() 让TextField和Row都占满Column的可用宽度，自然保持宽度一致
• 同样通过padding调整元素间距，优化布局

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