I am trying to achieve something like below using Jetpack Compose LazyColumn.
Below is my source code, The issue is i am not able to manage state properly. I am newbie to Jetpack compose, I have a list of guest, which are reserved and non reserved. So i need to show a listview initially with reserved guest and then non reserved guest. In between when list starts it starts with header for both reserved and non-reserved guests.
So header should only be visible for the first element of reserved and non-reserved guest. Rest all elements should be visible only with checkbox. In my case below all elements are shown with header. I have created 2 compose functions EachRowHeader and EachRow. I am not able to manage reservedGuest state and nonReservedGuestState properly.
I have also thought approach of
LazyColumn(){
item(){
EachRowHeader(guest)
}
items(list){ guest->
EachRow(guest)
}
}
But this will not work as for non-reserved 1st guest also i need header ("These Guests Need Reservations"). In my case i am acheiving something like this.
Beautification is left, that i will manage. But can anyone please guide me to resolve the major issue of handling state or some other approach using LazyColumn().? Thanks in advance.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Theme {
OnBoarding()
}
}
}
}
@Composable
fun OnBoarding() {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
var reservedGuest by remember {
mutableStateOf(false)
}
var nonReservedGuest by remember {
mutableStateOf(false)
}
val list: List<Guest> = listOf(
Guest(1, "Ankit Ostwal", true),
Guest(2, "Abhishek Kothari", true),
Guest(3, "Smriti Chaplot", false)
)
LazyColumn() {
items(list) { guest ->
if (guest.haveReservation && !reservedGuest) {
EachRowHeader(guest, onFirstGuest = { reservedGuest = true })
}
if (guest.haveReservation && reservedGuest) {
EachRow(guest)
}
if (!guest.haveReservation && !nonReservedGuest) {
EachRowHeader(guest, onFirstGuest = { nonReservedGuest = true })
}
if (!guest.haveReservation && nonReservedGuest) {
EachRow(guest)
}
}
}
}
}
@Composable
fun EachRowHeader(guest: Guest, onFirstGuest: () -> Unit) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(10.dp),
) {
if(guest.haveReservation){
onFirstGuest
}
if(!guest.haveReservation){
onFirstGuest
}
Text(
text = "These Guests Have Reservations",
modifier = Modifier.padding(13.dp, 0.dp, 0.dp, 0.dp),
)
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.clip(MaterialTheme.shapes.small)
.requiredHeight(ButtonDefaults.MinHeight)
) {
Checkbox(checked = false, onCheckedChange = {
})
Spacer(modifier = Modifier.size(5.dp))
Text(text = guest.name, textAlign = TextAlign.Center)
}
}
}
@Composable
fun EachRow(guest: Guest) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(10.dp),
) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.clip(MaterialTheme.shapes.small)
.requiredHeight(ButtonDefaults.MinHeight)
) {
Checkbox(checked = false, onCheckedChange = {
})
Spacer(modifier = Modifier.size(5.dp))
Text(text = guest.name, textAlign = TextAlign.Center)
}
}
}
@Preview(showSystemUi = true)
@Composable
fun DefaultPreview() {
Theme {
OnBoarding()
}
}