I'm using a LazyGridView inside a LazyColumn as I have content that would exceed the screen height and hence would need scrolling through.
However, doing this gives me an error Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed
I've looked at these other Stack Overflow answers, but they don't show how to resolve the issue when my LazyGrid is being created based off values in an enum:
How can I resolve this for my code below?
//--------------------------------------------------------------------------------------------------
//EthnicityOptions enum
enum class EthnicityOptions(val rawValue: String) {
whiteEnglish("English"),
whiteWelsh("Welsh"),
whiteScottish("Scottish"),
whiteIrish("Irish"),
asianIndian("Indian"),
asianPakistani("Pakistani"),
asianBangladeshi("Bangladeshi"),
asianChinese("Chinese"),
french("French"),
italian("Italian"),
german("German"),
polish("Polish"),
swedish("Swedish"),
hispanic("Hispanic"),
american("American"),
middleEastern("Middle Eastern"),
australian("Australian"),
blackAfrican("African"),
blackCaribbean("Caribbean"),
miscMixed("Mixed"),
miscOther("Other"),
}
//--------------------------------------------------------------------------------------------------
//AlertMessageViewModel
class AlertMessageViewModel: ViewModel() {
var showAlert: Boolean by mutableStateOf(false)
}
//--------------------------------------------------------------------------------------------------
//OnboardingProfileEthnicityView
@Composable
fun OnboardingProfileEthnicityView(
alertViewModel: AlertMessageViewModel,
) {
var ethnicitySelection by remember { mutableStateOf("") }
val animatedBlur: Dp by animateDpAsState(
if (alertViewModel.showAlert) {
alertBlurRadius
} else {
0.dp
}
)
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.fillMaxSize()
) {
Box(
modifier = Modifier
.blur(animatedBlur)
) {
LazyColumn {
item {
Column {
Column(
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(30.dp),
modifier = Modifier
.fillMaxWidth()
.padding((cardPadding), (cardPadding))
.padding(30.dp, 25.dp),
) {
Column(
modifier = Modifier
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Text(
text = "Select your ethnicity:",
style = TextStyle(
color = if (isSystemInDarkTheme()) {
Color.White
} else {
Color.Black
}
),
fontWeight = FontWeight.Bold
)
}
LazyVerticalGrid(
columns = GridCells.Fixed(2),
verticalArrangement = Arrangement.spacedBy(10.dp),
horizontalArrangement = Arrangement.spacedBy(5.dp),
) {
items(EthnicityOptions.values()) { ethnicity ->
Text(
text = ethnicity.rawValue,
style = TextStyle(
textAlign = TextAlign.Center,
fontSize = 15.sp,
fontWeight = FontWeight.Bold,
color = if (isSystemInDarkTheme()) {
if (ethnicitySelection == ethnicity.rawValue) {
Color.Black
} else {
Color.White
}
} else {
if (ethnicitySelection == ethnicity.rawValue) {
Color.White
} else {
Color.Black
}
},
),
modifier = Modifier
.clickable(
enabled = !alertViewModel.showAlert,
onClick = {
if (ethnicitySelection == ethnicity.rawValue) {
ethnicitySelection = ""
} else {
ethnicitySelection =
ethnicity.rawValue
}
},
interactionSource = remember { MutableInteractionSource() },
indication = null
)
.border(
width = 1.dp,
color = if (isSystemInDarkTheme()) {
Color.White
} else {
Color.Black
},
shape = RoundedCornerShape(cardCornerRadius)
)
.background(
shape = RoundedCornerShape(cardCornerRadius),
color =
if (isSystemInDarkTheme()) {
if (ethnicitySelection == ethnicity.rawValue) {
Color.White
} else {
Color.Black
}
} else {
if (ethnicitySelection == ethnicity.rawValue) {
Color.Black
} else {
Color.White
}
}
)
.padding(0.dp, 10.dp)
)
}
}
//Icons
Column(
modifier = Modifier
.fillMaxWidth(),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(30.dp)
) {
//Privacy Information
Column(
verticalArrangement = Arrangement.spacedBy(5.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(5.dp)
) {
Icon(
imageVector = Icons.Rounded.PrivacyTip,
contentDescription = null,
modifier = Modifier
.size(15.dp),
tint = if (isSystemInDarkTheme()) {
Color.Gray
} else {
Color.Gray
},
)
Text(
text = "Privacy Information",
style = TextStyle(
fontSize = 12.sp,
fontWeight = FontWeight.SemiBold,
color = if (isSystemInDarkTheme()) {
Color.Gray
} else {
Color.Gray
}
)
)
}
Row(
horizontalArrangement = Arrangement.spacedBy(5.dp),
verticalAlignment = Alignment.Top,
modifier = Modifier
.offset(5.dp, 0.dp)
) {
Icon(
imageVector = Icons.Rounded.Circle,
contentDescription = null,
modifier = Modifier
.size(4.dp)
.offset(0.dp, 6.dp),
tint = if (isSystemInDarkTheme()) {
Color.Gray
} else {
Color.Gray
},
)
Text(
text = "Privacy Information 1.",
style = TextStyle(
fontSize = 12.sp,
color = if (isSystemInDarkTheme()) {
Color.Gray
} else {
Color.Gray
}
)
)
}
Row(
horizontalArrangement = Arrangement.spacedBy(5.dp),
verticalAlignment = Alignment.Top,
modifier = Modifier
.offset(5.dp, 0.dp)
) {
Icon(
imageVector = Icons.Rounded.Circle,
contentDescription = null,
modifier = Modifier
.size(4.dp)
.offset(0.dp, 6.dp),
tint = if (isSystemInDarkTheme()) {
Color.Gray
} else {
Color.Gray
},
)
Text(
text = "Privacy Information 2.",
style = TextStyle(
fontSize = 12.sp,
color = if (isSystemInDarkTheme()) {
Color.Gray
} else {
Color.Gray
}
)
)
}
}
}
}
Spacer(modifier = Modifier.weight(1f))
Row(
horizontalArrangement = Arrangement.spacedBy(cardPadding),
modifier = Modifier
.fillMaxWidth()
.padding(cardPadding, 0.dp)
) {
Button(
onClick = {
//Move to previous view
},
enabled = !alertViewModel.showAlert,
modifier = Modifier
.fillMaxWidth()
.weight(1f),
colors = ButtonDefaults.buttonColors(
backgroundColor = if (isSystemInDarkTheme()) {
Color.Black
} else {
Color.White
}
),
elevation = ButtonDefaults.elevation(defaultElevation = 0.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
imageVector = Icons.Rounded.ChevronLeft,
contentDescription = "null",
tint = if (isSystemInDarkTheme()) {
Color.White
} else {
Color.Black
},
)
Text(
text = "Back",
style = TextStyle(
fontWeight = FontWeight.Bold,
),
color = if (isSystemInDarkTheme()) {
Color.White
} else {
Color.Black
}
)
}
}
Button(
onClick = {
//Move to next view
},
enabled = !alertViewModel.showAlert,
modifier = Modifier
.fillMaxWidth()
.weight(1f),
colors = ButtonDefaults.buttonColors(
backgroundColor = if (isSystemInDarkTheme()) {
Color.Black
} else {
Color.White
}
),
elevation = ButtonDefaults.elevation(defaultElevation = 0.dp)
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Text(
text = "Next",
style = TextStyle(
fontWeight = FontWeight.Bold,
),
color = if (isSystemInDarkTheme()) {
Color.White
} else {
Color.Black
}
)
Icon(
imageVector = Icons.Rounded.ChevronRight,
contentDescription = "null",
tint = if (isSystemInDarkTheme()) {
Color.White
} else {
Color.Black
},
)
}
}
}
Spacer(Modifier.height(cardPadding))
}
}
}
}
if (alertViewModel.showAlert) {
Box(
modifier = Modifier
.offset(0.dp, (-25).dp)
) {
//AlertView to be added here
}
}
}
}
