如何缩小Jetpack Compose Material3中OutlinedTextField的高度？

方案1：通过OutlinedTextField内置参数快速调整 #

无需复制完整组件，直接修改核心参数即可压缩高度、匹配谷歌应用样式：

• 缩小上下内边距：通过contentPadding减少TextField内部垂直空间
• 适配字体与图标尺寸：同步缩小文本和leadingIcon的大小，保持视觉协调
• 隐藏边框改用背景色：模拟Gmail/Play Store的无外边框搜索栏样式
• 固定高度约束：通过modifier.height()锁定整体尺寸

@Composable
fun CompactSearchTopAppBar(searchText: String, onSearchTextChange: (String) -> Unit) {
    TopAppBar(
        title = {},
        actions = {
            OutlinedTextField(
                value = searchText,
                onValueChange = onSearchTextChange,
                leadingIcon = {
                    Icon(
                        Icons.Default.Search,
                        contentDescription = "搜索",
                        modifier = Modifier.size(20.dp)
                    )
                },
                placeholder = { Text("搜索", fontSize = 14.sp) },
                textStyle = TextStyle(fontSize = 14.sp),
                contentPadding = PaddingValues(vertical = 4.dp, horizontal = 16.dp),
                shape = RoundedCornerShape(24.dp),
                singleLine = true,
                modifier = Modifier
                    .fillMaxWidth(0.8f)
                    .height(40.dp),
                colors = TextFieldDefaults.outlinedTextFieldColors(
                    focusedBorderColor = Color.Transparent,
                    unfocusedBorderColor = Color.Transparent,
                    focusedContainerColor = MaterialTheme.colorScheme.surfaceVariant,
                    unfocusedContainerColor = MaterialTheme.colorScheme.surfaceVariant
                )
            )
        }
    )
}

方案2：用BasicTextField轻量化自定义 #

如果需要更灵活的控制，用BasicTextField实现核心逻辑，代码量远少于复制OutlinedTextField：

• 直接通过background设置搜索栏样式
• 自定义decorationBox整合leadingIcon与输入区域
• 完全掌控布局尺寸与视觉细节

@Composable
fun CustomCompactSearchTopAppBar(searchText: String, onSearchTextChange: (String) -> Unit) {
    TopAppBar(
        title = {},
        actions = {
            BasicTextField(
                value = searchText,
                onValueChange = onSearchTextChange,
                textStyle = TextStyle(
                    fontSize = 14.sp,
                    color = MaterialTheme.colorScheme.onSurface
                ),
                singleLine = true,
                modifier = Modifier
                    .fillMaxWidth(0.8f)
                    .height(40.dp)
                    .background(
                        color = MaterialTheme.colorScheme.surfaceVariant,
                        shape = RoundedCornerShape(24.dp)
                    )
                    .padding(horizontal = 16.dp),
                decorationBox = { innerTextField ->
                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.fillMaxHeight()
                    ) {
                        Icon(
                            Icons.Default.Search,
                            contentDescription = "搜索",
                            modifier = Modifier.size(20.dp),
                            tint = MaterialTheme.colorScheme.onSurfaceVariant
                        )
                        Spacer(modifier = Modifier.width(8.dp))
                        innerTextField()
                    }
                }
            )
        }
    )
}

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