如何调整Jetpack Compose Material3 SearchBar高度且避免文本截断？

直接通过Modifier.height()缩小SearchBar高度时，内部默认的TextField会因固定内边距和高度约束导致文本截断。要保持小高度同时避免截断，最可靠的方式是自定义SearchBar的输入文本区域：

方法：替换默认的输入TextField #

利用SearchBar的searchTextField参数，完全自定义输入框的样式、内边距和高度，适配外层缩小后的尺寸：

var query by remember { mutableStateOf("") }
var active by remember { mutableStateOf(false) }

SearchBar(
    query = query,
    onQueryChange = { query = it },
    onSearch = { /* 这里编写你的搜索逻辑 */ },
    active = active,
    onActiveChange = { active = it },
    modifier = Modifier.height(40.dp), // 设置你需要的外层高度
    searchTextField = {
        TextField(
            value = query,
            onValueChange = { query = it },
            placeholder = { Text("请输入搜索内容") },
            leadingIcon = { Icon(Icons.Default.Search, contentDescription = "搜索图标") },
            trailingIcon = {
                if (query.isNotEmpty()) {
                    IconButton(onClick = { query = "" }) {
                        Icon(Icons.Default.Clear, contentDescription = "清除输入")
                    }
                }
            },
            singleLine = true,
            modifier = Modifier
                .fillMaxHeight()
                .padding(vertical = 2.dp), // 调整垂直内边距，让文本区域适配外层高度
            colors = TextFieldDefaults.colors(
                focusedContainerColor = Color.Transparent,
                unfocusedContainerColor = Color.Transparent,
                disabledContainerColor = Color.Transparent,
            )
        )
    }
) {
    // 添加搜索建议项（按需编写）
    ListItem(headlineContent = { Text("示例搜索建议1") })
    ListItem(headlineContent = { Text("示例搜索建议2") })
}

核心逻辑 #

1. 外层SearchBar设置目标高度，内部自定义的TextField通过fillMaxHeight()占满外层高度
2. 调整TextField的垂直内边距，让文本输入区域有足够空间，避免被挤压截断
3. 将TextField的容器色设为透明，保持和原生SearchBar一致的视觉效果

这种方式不受组件内部默认约束限制，能精准控制输入区域的尺寸，同时保持SearchBar的其他功能正常。

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