//Code affiché dans la Preview, thème claire, thème sombre
@Preview(showBackground = true, showSystemUi = true)
@Preview(showBackground = true, showSystemUi = true,
uiMode = android.content.res.Configuration.UI_MODE_NIGHT_YES
or android.content.res.Configuration.UI_MODE_TYPE_NORMAL)
@Composable
fun SearchScreenPreview() {
NomVotreProjetTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
SearchScreen(modifier = Modifier.padding(innerPadding), mainViewModel = MainViewModel())
}
}
}
@Composable
fun SearchScreen(modifier:Modifier = Modifier, mainViewModel : MainViewModel) {
Column(modifier= modifier.fillMaxSize()) {
SearchBar()
LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp), modifier = Modifier.weight(1f)) {
items(mainViewModel.dataList.size) {
PictureRowItem(modifier = Modifier.padding(8.dp), data = mainViewModel.dataList[it])
}
}
Row(modifier = Modifier.align(CenterHorizontally)) {
Button(
onClick = { },
contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
modifier = Modifier
.padding(8.dp)
) {
Icon(
Icons.Filled.Clear,
contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.IconSize)
)
Spacer(Modifier.size(ButtonDefaults.IconSpacing))
Text("Clear filter")
}
Button(
onClick = { },
contentPadding = ButtonDefaults.ButtonWithIconContentPadding,
modifier = Modifier
.padding(8.dp)
) {
Icon(
Icons.Filled.Send,
contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.IconSize)
)
Spacer(Modifier.size(ButtonDefaults.IconSpacing))
Text("Load data")
}
}
}
}
@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun PictureRowItem(modifier: Modifier = Modifier, data: PictureBean) {
Row(modifier = modifier.height(100.dp)
.fillMaxWidth()
.background(MaterialTheme.colorScheme.tertiary)) {
GlideImage(
model = data.url,
contentDescription = "Pas de description",
// Image d'attente. Permet également de voir l'emplacement de l'image dans la Preview
loading = placeholder(R.mipmap.ic_launcher_round),
// Image d'échec de chargement
failure = placeholder(R.mipmap.ic_launcher),
contentScale = ContentScale.Fit,
//même autres champs qu'une Image classique
modifier = Modifier.width(100.dp).fillMaxHeight()
)
Column(Modifier.weight(1f)) {
Text(
text = data.title,
style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.onPrimaryContainer,
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
)
Text(
text = data.longText.take(20) + "...",
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onTertiary,
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
)
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchBar(modifier: Modifier = Modifier) {
TextField(
value = "",
onValueChange = { }, //Action
leadingIcon = { //Image d'icône
Icon(
imageVector = Icons.Default.Search,
tint = MaterialTheme.colorScheme.primary,
contentDescription = null
)
},
singleLine = true,
placeholder = { //Texte d'aide
Text("Votre recherche ici")
},
modifier = modifier
.fillMaxWidth()
.heightIn(min = 56.dp)//Hauteur minimum
.padding(8.dp)
)
}