Как удалить заполнение по умолчанию между Text () и SearchBar () в JetPack Compose? ⇐ Android

[Anonymous]

Я создаю приложение List Contact, используя Kotlin и Jetpack Compose. предварительный просмотр. Неожиданное пространство находится между композицией Text () Composable и SearchBar (). Я искал документацию и другие онлайн -вопросы, но не нашел ничего, что помогает. Неожиданное пространство, выделенное красным): < /p>

Код: Выделить всё

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()
}

Предварительный просмотр в левой и приложении, работающем справа:


Подробнее здесь: https://stackoverflow.com/questions/785 ... ck-compose