if i make it lazyColumn then i get error saying infinite length and i am not able to make it scrollable and only using column does not do anything i tried lazyColumn as it will scroll whole page but not able to as it gives me error then i tried using column with vertical scroll, same result as before
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(
navController: NavHostController
) {
var searchText = remember { mutableStateOf("") }
Scaffold(
modifier = Modifier,
topBar = {
HomeTopAppBar(
modifier = Modifier,
onCartClick = {
}
)
},
bottomBar = {
BottomNavigationBar(navController)
}
) {innerPadding->
Surface(modifier = Modifier.fillMaxSize(), color = Color.White) {
Column(
modifier = Modifier
.padding(innerPadding)
.fillMaxWidth()
) {
ProductSearchBar(searchText)
CategoryGrid(navController)
BannerCarousel(modifier = Modifier)
Box(
modifier = Modifier.padding(16.dp)
) {
LazyVerticalGrid(
columns = GridCells.Fixed(2),
modifier = Modifier.padding(16.dp)
) {
repeat(10) {
item {
OutlinedCard(
onClick = {}
) {
Column {
Box {
Image(
painter = painterResource(R.drawable.iphonee),
contentDescription = "Iphone"
)
}
Box {
}
}
}
}
}
}
}
}
}
}
}
Make the column as verticalScroll and another change is you have fixed your item height based on the item height calculate the LazyVerticalGrid height. This will resolve the issue.
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(
//navController: NavHostController
) {
var searchText = remember { mutableStateOf("") }
Scaffold(
modifier = Modifier,
topBar = {
HomeTopAppBar(
modifier = Modifier,
onCartClick = {
}
)
},
bottomBar = {
BottomNavigationBar(navController)
}
) {innerPadding->
Surface(modifier = Modifier.fillMaxSize(), color = Color.White) {
Column(
modifier = Modifier
.padding(innerPadding)
.fillMaxWidth()
.verticalScroll(rememberScrollState())
) {
ProductSearchBar(searchText)
CategoryGrid(navController)
BannerCarousel(modifier = Modifier)
Box(
modifier = Modifier.padding(16.dp)
) {
LazyVerticalGrid(
columns = GridCells.Fixed(2),
modifier = Modifier.padding(16.dp).height(( 10.times(70).dp))
) {
repeat(10) {
item {
OutlinedCard(
modifier = Modifier.height(70.dp),
onClick = {}
) {
Column {
Box {
Image(
painter = painterResource(R.drawable.iphonee),
contentDescription = "Iphone"
)
}
Box {
}
}
}
}
}
}
}
}
}
}
}