可组合项因传递的回调过多而变得臃肿

Question

这是我当前的可组合项：

@Composable
fun MyComposable(
    onPress1: () -> Unit,
    onPress2: () -> Unit,
    onPress3: () -> Unit,
    onPress4: () -> Unit,
    onPress5: () -> Unit,
) {
    Button(onClick = onPress1) { Text(text = "Press 1")}
    Button(onClick = onPress2) { Text(text = "Press 2")}
    Button(onClick = onPress3) { Text(text = "Press 3")}
    Button(onClick = onPress4) { Text(text = "Press 4")}
    Button(onClick = onPress5) { Text(text = "Press 5")}
}

有没有办法减少这种情况，类似于反应如何使用 useReducer 钩子操作类型和操作负载

Answer 1

您可以使用密封类来创建可根据您的需要在项目中的不同位置重用的点击事件。

// Create your different click events
sealed class MyClickEvent {
    object Press1: MyClickEvent()
    object Press2: MyClickEvent()
    object Press3: MyClickEvent()
    object Press4: MyClickEvent()
    // You can create a click event that passes arguments
    data class Press5(val arg: String): MyClickEvent()
}

// Handle each click event ( This function should be inside your view model )
fun onMyClickEvent(event: MyClickEvent) {
    when(event) {
        is MyClickEvent.Press1 -> println("Press1")
        is MyClickEvent.Press2 -> println("Press2")
        is MyClickEvent.Press3 -> println("Press3")
        is MyClickEvent.Press4 -> println("Press4")
        is MyClickEvent.Press5 -> println("Press5: ${event.arg}")
    }
}

@Composable
fun MyMainComposable() {
    MyComposable(
        onMyClickEvent = { event -> onMyClickEvent(event) }
    )
}

// Pass only single lambda for different click events
@Composable
fun MyComposable(
    onMyClickEvent: (event: MyClickEvent) -> Unit,
) {
    Button(onClick = { onMyClickEvent(MyClickEvent.Press1) }) {
        Text(text = "Press 1")
    }
    Button(onClick = { onMyClickEvent(MyClickEvent.Press2) }) {
        Text(text = "Press 2")
    }
    Button(onClick = { onMyClickEvent(MyClickEvent.Press3) }) {
        Text(text = "Press 3")
    }
    Button(onClick = { onMyClickEvent(MyClickEvent.Press4) }) {
        Text(text = "Press 4")
    }
    Button(onClick = { onMyClickEvent(MyClickEvent.Press5(arg = "data")) }) {
        Text(text = "Press 5")
    }
}