I have a requirement to display a LazyVerticalGrid,LazyRow and a Label in a single screen.
I tried to place LazyVerticalGrid ,LazyRow and Label in LazyColumn. The app crashes with infinite height issue for LazyVerticalGrid. So, I set the height to 400.dp for LazyVerticalGrid. Now the entire screen is scrolled as whole and also individual items are also scrolled.
Is there a better approach to solve this issue with setting explicit height.
@Composable
fun Category() {
Scaffold(
topBar = {
TopAppBar(
title = { Text(text = "My Cart") }
)
}
) {
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp)
) {
item {
SeasonalCategoryTitle("Shop By Category")
}
item {
CategoryScreen()
}
item {
SeasonalCategoryTitle("Seasonal Specials")
}
item {
SeasonalCategoryComposable()
}
}
}
}
}
@Composable
fun CategoryScreen(categoryViewModel: CategoryViewModel = get()) {
val categoryList: List<Category> = categoryViewModel.categoryList.value
LaunchedEffect(Unit) {
categoryViewModel.fetchCategories()
}
CategoryGrid(categoryList)
}
@Composable
fun SeasonalCategoryTitle(title: String) {
DisplayOutLinedLabel(label = title)
}
@Composable
fun SeasonalCategoryComposable(categoryViewModel: CategoryViewModel = get()) {
val categoryList: List<Category> = categoryViewModel.categoryList.value
LaunchedEffect(Unit) {
categoryViewModel.fetchSeasonalCategories()
}
SeasonalCategoryRow(categoryList)
}
@Composable
fun SeasonalCategoryRow(categories: List<Category>) {
LazyRow(
modifier = Modifier.fillMaxWidth(),
contentPadding = PaddingValues(10.dp)
) {
items(categories.size) { index ->
SeasonalCategoryItem(category = categories[index])
}
}
}
@Composable
fun CategoryGrid(categories: List<Category>) {
LazyVerticalGrid(
columns = GridCells.Fixed(2),
modifier = Modifier.height(400.dp),
contentPadding = PaddingValues(16.dp)
) {
items(categories.size) { index ->
CategoryItem(category = categories[index])
}
}
}
@Composable
fun SeasonalCategoryItem(category: Category) {
Box(
modifier = Modifier
.padding(2.dp)
.height(height = 100.dp)
.width(width = 100.dp)
.border(
BorderStroke(1.dp, Color.LightGray)/*,
shape = RoundedCornerShape(8.dp)*/
),
contentAlignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
// CategoryImage(category.categoryImage)
// CategoryImageFromUrl(category.categoryImage)
CategoryImageFromURLWithPlaceHolder(category.categoryImage)
CategoryName(category.categoryName)
}
}
}
@Composable
fun CategoryItem(category: Category) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.border(
BorderStroke(1.dp, Color.LightGray)/*,
shape = RoundedCornerShape(8.dp)*/
),
contentAlignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
// CategoryImage(category.categoryImage)
// CategoryImageFromUrl(category.categoryImage)
CategoryImageFromURLWithPlaceHolder(category.categoryImage)
CategoryName(category.categoryName)
}
}
}
@Composable
fun CategoryName(categoryName: String) {
DisplayLabel(categoryName)
}
@Composable
fun CategoryImageFromURLWithPlaceHolder(imageUrl: String) {
FetchImageFromURLWithPlaceHolder(imageUrl = imageUrl)
}
