LazyColumn项目互斥

Question

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

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

Answer 1

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

对于ex：

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中声明它，你可能会想要使用remember here，但我强烈建议将它存储在一个视图模型中。一个简单的例子是

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
       )
     }
  }
}

我在这里使用的是状态提升，请阅读this作为参考。如果您还没有，请使用此codelab

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