Jetpack Compose中设置fillMaxWidth()的Row为何超出Card布局范围

API 探路者

2026-8-30

问题根因

Row布局中，包裹文本内容的Column设置了fillMaxWidth()修饰符，该修饰符会强制元素占满父容器Row的全部可用宽度，导致后续排列的Spacer和Switch组件没有剩余布局空间，直接被挤出Card的可视边界，出现越界显示的异常。

修复方案

将Column上的fillMaxWidth()替换为weight(1f)修饰符即可。
weight修饰符的测量逻辑是：父布局会先测量所有未设置weight的子元素尺寸，计算剩余可用空间后，再将剩余空间全部分配给设置了weight的子元素，不会出现子元素被挤出边界的问题。

修复后的完整实现代码：

@ExperimentalMaterial3Api
@Composable
fun Settings() {
    Card(modifier = Modifier
        .fillMaxWidth()
    ) {
        SettingItem(itemTitle = "Test Title", itemDescription = "Description")
    }
}

@ExperimentalMaterial3Api
@Composable
fun SettingItem(itemTitle: String, itemDescription: String) {
    Row(modifier = Modifier.padding(12.dp).fillMaxWidth()) {
        Column(modifier = Modifier.weight(1f)) {
            Text(text = itemTitle, color = MaterialTheme.colorScheme.primary)
            Text(text = itemDescription, color = MaterialTheme.colorScheme.secondary)
        }
        Spacer(modifier = Modifier.width(12.dp))
        Switch(checked = false, onCheckedChange = {})
    }
}