[英]How to filter data from a viewmodel in a Jetpack Compose dialog?
我有一个主屏幕,我在其中检索了视图模型中的列表字符串。 我还有一个打开对话框的按钮。 在此对话框中,我有一个文本字段供用户编写他想要过滤的单词(土豆名称字段),以及用于过滤和取消的按钮。 当用户单击按钮以接受主屏幕上的列表已被过滤时,如何在视图模型中应用过滤器?
主屏幕:
@Composable
fun PotatosScreen(
viewModel: PotatosViewModel,
state: Success<PotatosData>
) {
val expandedItem = viewModel.expandedCardList.collectAsState()
Box(
modifier = Modifier.fillMaxSize()
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(vertical = 8.dp)
) {
items(state.data.potatos) { potato ->
potatoCard(
potato = potato,
onCardArrowClick = { viewModel.itemArrowClick(potato.id) },
expanded = expandedItem.value.contains(potato.id)
)
}
}
var showCustomDialogWithResult by remember { mutableStateOf(true) }
// Text button for open Dialog
Text(
text = "Filter",
modifier = Modifier
.clickable {
if (showCustomDialogWithResult) {
DialogFilter(
onDismiss = {
showCustomDialogWithResult = !showCustomDialogWithResult
},
onNegativeClick = {
showCustomDialogWithResult = !showCustomDialogWithResult
},
onPositiveClick = {
showCustomDialogWithResult = !showCustomDialogWithResult
}
)
}
}
)
}
}
对话:
@Composable
fun DialogFilter(
onDismiss: () -> Unit,
onNegativeClick: () -> Unit,
onPositiveClick: () -> Unit
) {
var text by remember { mutableStateOf("") }
Dialog(onDismissRequest = onDismiss) {
Card(
shape = RoundedCornerShape(10.dp),
modifier = Modifier.padding(10.dp, 5.dp, 10.dp, 10.dp),
elevation = 8.dp
) {
Column(
Modifier.background(Color.White)
) {
Text(
text = stringResource("Filter")
)
TextField(
value = text
)
TextButton(onClick = onNegativeClick) {
Text(
text = "Cancel
)
}
// How apply filter in viewModel here?
TextButton(onClick = onPositiveClick) {
Text(
text = "Filter"
)
}
}
}
}
}
视图模型:
@HiltViewModel
class PotatosViewModel @Inject constructor(
private val getPotatosDataUseCase: GetPotatosData
) : ViewModel() {
private val _state = mutableStateOf<Response<PotatosData>>(Loading)
val state: State<Response<PotatosData>> = _state
private val _expandedItemList = MutableStateFlow(listOf<Int>())
val expandedCardList: StateFlow<List<Int>> get() = _expandedItemList
private val _isRefreshing = MutableStateFlow(false)
val isRefreshing: StateFlow<Boolean>
get() = _isRefreshing.asStateFlow()
init {
getPotatos()
}
fun refresh() {
viewModelScope.launch {
_isRefreshing.emit(true)
getPotatos()
_isRefreshing.emit(false)
}
}
private fun getPotatos() {
viewModelScope.launch {
getPotatosDataUseCase().collect { response ->
_state.value = response
}
}
}
fun containsItem(potatoId: Int): Boolean {
return _expandedItemList.value.toMutableList().contains(potatoId)
}
fun itemArrowClick(potatoId: Int) {
_expandedItemList.value = _expandedItemList.value.toMutableList().also { list ->
if (list.contains(potatoId)) {
list.remove(potatoId)
} else {
list.add(potatoId)
}
}
}
}
State:
data class PotatosState(
val potatoes: List<Potato>,
)
土豆:
data class Potato(
val id: Int,
val name: String)
您可以更改onPositiveClick
回调以接受String
并将其传递给ViewModel
以应用您的过滤器,如下所示:
fun DialogFilter(
onDismiss: () -> Unit,
onNegativeClick: () -> Unit,
onPositiveClick: (String) -> Unit
)
然后回调将使用文本调用您的 ViewModel
onPositiveClick = { filter ->
showCustomDialogWithResult = !showCustomDialogWithResult
viewModel.applyFilter(filter)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.