如何通过UseCaseState从CalendarSample2组件获取选中日期？

问题分析 #

你当前的CalendarSample2组件内部维护了selectedDate状态，且closeSelection回调仅接收UseCaseState.() -> Unit类型，无法携带选中的日期数据回传给父组件。要实现需求，需要将状态提升到父组件，并调整回调逻辑来传递选中值。

解决方案 #

1. 调整子组件：接收父组件的状态与带参数的回调 #

修改CalendarSample2，让它接收父组件传来的selectedDate状态，以及能接收选中日期的回调函数：

@ExperimentalMaterial3Api
@Composable
internal fun CalendarSample2(
    selectedDate: MutableState<LocalDate?>,
    closeSelection: (UseCaseState, LocalDate?) -> Unit // 调整回调，携带选中日期
) {
    CalendarDialog(
        state = rememberUseCaseState(
            visible = true,
            onCloseRequest = { useCaseState ->
                closeSelection(useCaseState, selectedDate.value) // 关闭时传递选中日期
            }
        ),
        config = CalendarConfig(
            yearSelection = true,
            style = CalendarStyle.WEEK,
        ),
        selection = CalendarSelection.Date(
            selectedDate = selectedDate.value
        ) { newDate ->
            selectedDate.value = newDate // 直接更新父组件传来的状态
        },
    )
}

2. 父组件调用：维护状态并接收回调值 #

在父组件中维护selectedDate状态，调用CalendarSample2时传入状态和回调，即可拿到选中的日期：

@ExperimentalMaterial3Api
@Composable
fun ParentComponent() {
    val selectedDate = remember { mutableStateOf<LocalDate?>(LocalDate.now().minusDays(3)) }

    // 调用CalendarSample2
    CalendarSample2(
        selectedDate = selectedDate,
        closeSelection = { useCaseState, date ->
            // 在这里拿到选中的date，做后续处理
            useCaseState.hide() // 执行关闭逻辑
            println("选中的日期：$date")
        }
    )
}

替代方案：保持原回调类型，通过扩展属性传递值 #

如果你想保留UseCaseState.() -> Unit的回调类型，可以通过给UseCaseState添加扩展属性来携带日期：

// 扩展UseCaseState，添加可选的selectedDate属性
var UseCaseState.selectedDate: LocalDate? by Delegates.notNull()

@ExperimentalMaterial3Api
@Composable
internal fun CalendarSample2(
    selectedDate: MutableState<LocalDate?>,
    closeSelection: UseCaseState.() -> Unit
) {
    CalendarDialog(
        state = rememberUseCaseState(
            visible = true,
            onCloseRequest = { useCaseState ->
                useCaseState.selectedDate = selectedDate.value
                closeSelection(useCaseState)
            }
        ),
        config = CalendarConfig(
            yearSelection = true,
            style = CalendarStyle.WEEK,
        ),
        selection = CalendarSelection.Date(
            selectedDate = selectedDate.value
        ) { newDate ->
            selectedDate.value = newDate
        },
    )
}

// 父组件调用
@ExperimentalMaterial3Api
@Composable
fun ParentComponent() {
    val selectedDate = remember { mutableStateOf<LocalDate?>(LocalDate.now().minusDays(3)) }

    CalendarSample2(
        selectedDate = selectedDate,
        closeSelection = {
            val selected = this.selectedDate // 通过this获取携带的日期
            this.hide()
            println("选中的日期：$selected")
        }
    )
}

内容的提问来源于stack exchange，提问作者AstroBoy