android-jetpack-compose - LazyColumn 项目互斥

Question

假设我在 a 中有一个项目列表，LazyColumn它们都可以被选中。如何确保选择一个项目时，取消选择其他项目（因此一次只能选择一项）？

我在想，interactionSource但我不确定如何使用它。

Answer 1

我会将此逻辑提取到 aViewModel中，您的项目是一个特定的 UIModel，其中包含项目的当前数据 + 它们的状态，包含isSelected状态。

例如：

data class YourUiModel(val id: Long, val isSelected: Boolean = false, ...)

private val _items = MutableStateFlow(emptyList<YourUiModel>())
val items: StateFlow<List<YourUiModel>>
    get() = _items
    
private fun changeSelectionTo(uiModel: YourUiModel) {
        _items.value = items.value.map { it.copy(isSelected = it.id == uiModel.id) }
}

...

Answer 2

您可以尝试使用记住 {...}

@Composable
fun MyComposeList(data: List<MyItemData>,...) {
    val (selectedItem, setSelectedItem) = remember { mutableStateOf(null // or maybe data.first() } // remember current selected by state delegate

    lazyColumn() { // your lazy column
       items (data) { item -> // item = each item
          // your compose item view
          MyComposeItemView (
              data = item,  // pass data by each item
              isSelected = data == selectedItem // set is item selected by default
          ) {
              // on item click
              setSelectedItem(it)
           }
       }
    }
}

@Composable
fun MyComposeItemView(
        data: MyItemData, 
        isSelected: Boolean, 
        onSelect: (MyItemData) -> Unit = {}) {
   
   // here set item selected state = isSelected maybe change color or something

  // assume we have box as single item
  Box(Modifier.clickable {
     onSelect(data) // cal on click function and pass current data as parameter
  })
}

Answer 3

只需存储一个包含所选变量索引的变量

var sel by mutableStateOf(0)

现在，如果您在 Composables 中声明它，您可能希望在此处使用记住，但我强烈建议将其存储在视图模型中。一个简单的例子是

class VM: ViewModel(){
 var sel by mutableStateOf(0) //Assuming 0 is selected initially, change it to -1 if you please

 //Create a setter optionally, for state-hoisting
 fun setSel(index: Int){
   sel = index
 }
}

在 MainActivity 中，

class MainActivity{
 val vm by viewmodels<VM>()
 setContent{
  MySelectableList(
     list = ...,
     selected = vm.sel,
     onSelectionChange = vm::setSel // Just pass the viewmodel if you did not create the setter
   )
 }

 @Composable
 fun MySelectableList(
    list: List<Any>,
    selected: Int,
    onSelectionChange: (int) -> Unit // or vm, if you did not create the setter
  ){
     list.forEachIndexed {index, item ->
       // Now create this Composable yourself
       ItemComposable(
          isSelected = index == selected,
          onClick = { onSelectionChange(index) } // Just focus and have a look at what's happening here
       )
     }
  }
}

我在这里使用状态提升，请阅读此内容以供参考。如果您还没有，请务必使用此代码实验室

如果您之前将 sel 的初始值设置为 -1，则需要进行额外检查。完全理解流经这里的代码。