如何移除Jetpack Compose中Text与SearchBar间的默认内边距？

问题描述 #

使用Kotlin+Jetpack Compose开发通讯录应用时，Text("Contacts")与SearchBar组件在预览中显示正常，但实际运行时两者之间出现了未预期的额外间距（如图中红色标注区域）。尝试过将两个组件的内边距强制设为0.dp，查阅文档及相关问题后仍未解决。

代码实现 #

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ContactsList() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 12.dp, vertical = 36.dp)
    ) {
        // Top row with add button
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.End
        ) {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.Add,
                    contentDescription = "add contact button",
                    modifier = Modifier.size(32.dp)
                )
            }
        }

        // Header with Contacts title and SearchBar
        Column(
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(
                text = "Contacts",
                modifier = Modifier.fillMaxWidth(),
                fontSize = 36.sp,
                fontWeight = FontWeight.Bold
            )

            var searchQuery by remember { mutableStateOf("") }

            SearchBar(
                modifier = Modifier.padding(0.dp),
                query = searchQuery,
                onQueryChange = { searchQuery = it },
                onSearch = { /* Handle search action */ },
                active = false,
                onActiveChange = { },
                leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = null) },
                placeholder = { Text(text = "Search") },
                colors = SearchBarDefaults.colors(containerColor = Color(0xFFF1F1F1)),
            ){}
        }

        // Clickable contact row
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 12.dp)
                .clickable { /* Handle row click */ },
            verticalAlignment = Alignment.CenterVertically
        ) {
            Image(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = null,
                modifier = Modifier.size(80.dp)
            )

            Text(
                text = "You",
                fontSize = 28.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier.padding(start = 8.dp),
                fontWeight = FontWeight(400)
            )
        }
    }
}

@Preview(showBackground = true)
@Composable
fun PreviewContactsList() {
    ContactsList()
}

效果对比 #

（左侧为预览效果，右侧为实际运行效果）

解决方法 #

1. 消除Text组件的默认行高空白

Compose的Text组件默认lineHeight会大于设置的fontSize，导致文字底部出现额外空白，而预览可能未完全还原这个特性。显式设置lineHeight与fontSize一致即可消除：

Text(
    text = "Contacts",
    modifier = Modifier.fillMaxWidth(),
    fontSize = 36.sp,
    fontWeight = FontWeight.Bold,
    lineHeight = 36.sp // 让行高等于字号，消除底部空白
)

2. 明确Column子组件间距并移除SearchBar内部内边距

包裹Text和SearchBar的Column默认未指定子组件间距，结合Material3 SearchBar的默认内部垂直内边距，可能导致视觉上的额外空隙。通过以下调整解决：

Column(
    modifier = Modifier.fillMaxWidth(),
    verticalArrangement = Arrangement.spacedBy(0.dp) // 强制子组件间距为0
) {
    // 修改后的Text组件
    
    SearchBar(
        modifier = Modifier.padding(0.dp),
        query = searchQuery,
        onQueryChange = { searchQuery = it },
        onSearch = { /* Handle search action */ },
        active = false,
        onActiveChange = { },
        leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = null) },
        placeholder = { Text(text = "Search") },
        colors = SearchBarDefaults.colors(containerColor = Color(0xFFF1F1F1)),
        contentPadding = PaddingValues(0.dp) // 移除SearchBar内部默认内边距
    ){}
}

3. 让预览与实际主题保持一致

预览默认使用基础主题，若应用使用了自定义主题，主题配置（如Typography、组件默认样式）可能导致预览与实际运行效果不一致。在预览中包裹应用的自定义主题，即可让预览准确反映实际表现：

@Preview(showBackground = true)
@Composable
fun PreviewContactsList() {
    YourAppTheme { // 替换为你应用的实际主题组件
        ContactsList()
    }
}

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