How to do single choice in jetpack compose list
To do a single choice list in jetpack compose,
you have to think that you need a variable:
val selectedOption = mutableStateOf(0)
And then in your item list you need to check the variable with the current item.
RadioButton(selected = (text == selectedValue),
When user click the item you need to save the new value
onClick = {selectedOption.value = selected})
Your item list can be like this
RadioButton(selected = (text == selectedValue),
onClick = {selectedOption.value = selected})
You can check the full example in Github
or in here:
import android.annotation.SuppressLint
import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.selection.selectable
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.a.jetpackcomposelists.R
@Composable
fun SingleScreen(
viewModel: SingleViewModel,
context: Context
) {
Column(modifier = Modifier.fillMaxHeight()) {
NameList(viewModel, context, Modifier.weight(1f))
}
}
@SuppressLint("UnrememberedMutableState")
@Composable
fun NameList(
viewModel: SingleViewModel,
context: Context,
modifier: Modifier
) {
val selectedOption = mutableStateOf(0)
val optionsList = viewModel.getInitial(context)
Scaffold(modifier = Modifier.fillMaxWidth(), topBar = {
TopAppBar(title = {
Text(text = stringResource(id = R.string.app_name))
}, actions = {})
}) {
LazyColumn(modifier = modifier.fillMaxSize()) {
itemsIndexed(items = optionsList) { selected: Int, item: String ->
ElementSelected(text = item,
selectedValue = optionsList[selectedOption.value],
onClickListener = {
selectedOption.value = selected
Toast.makeText(context, item, Toast.LENGTH_SHORT).show()
})
TabRowDefaults.Divider(color = Color.LightGray)
}
}
}
}
@Composable
fun ElementSelected(
text: String,
selectedValue: String,
onClickListener: (String) -> Unit
) {
Box(
Modifier
.height(90.dp)
.fillMaxWidth()
.selectable(
selected = (text == selectedValue),
onClick = {
onClickListener(text)
})
) {
RadioButton(
modifier = Modifier
.align(Alignment.CenterStart)
.padding(10.dp),
selected = (text == selectedValue),
onClick = {
onClickListener(text)
})
Text(
text = text,
fontSize = 30.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier
.padding(start = 16.dp)
.align(Alignment.Center)
)
}
}
to choice a only choice in compose list
You can check the full example in Github