Jetpack Compose日期选择器选中日期后sPin无法同步更新求助

核心问题 #

1. sPin不是Compose状态变量：你用普通var sPin = 0声明，更新它的值不会触发Compose重组，所以UI里的Selected Number不会跟着变化。
2. 日期参数使用错误：在DatePickerDialog的回调里，你调用calcPin(mDay, mMonth, mYear)时，用的是初始化时获取的当前日期变量，而不是用户选中的mDayOfMonth、mMonth、mYear参数，就算sPin是状态变量，计算出来的也是当前日期的pin，不是选中日期的。

修改后的完整代码 #

@Composable
public fun MyContent(
    imagePainter: Painter,
    modifier: Modifier = Modifier,
){

    // Fetching the Local Context
    val mContext = LocalContext.current

    // Initializing a Calendar
    val mCalendar = Calendar.getInstance()

    // Fetching current year, month and day
    val mYear = mCalendar.get(Calendar.YEAR)
    val mMonth = mCalendar.get(Calendar.MONTH)
    val mDay = mCalendar.get(Calendar.DAY_OF_MONTH)

    val iPin = calcPin(mDay, mMonth, mYear)
    // 将sPin改为mutableStateOf，让Compose感知变化并重组UI
    val sPin = remember { mutableStateOf(0) }

    // Declaring a string value to
    // store date in string format
    val mDate = remember { mutableStateOf("") }

    // Declaring DatePickerDialog and setting
    // initial values as current values (present year, month and day)
    val mDatePickerDialog = DatePickerDialog(
        mContext,
        { _: DatePicker, selectedYear: Int, selectedMonth: Int, selectedDay: Int ->
            mDate.value = "$selectedDay/${selectedMonth+1}/$selectedYear"
            // 使用选中的日期参数计算pin，并更新状态变量
            sPin.value = calcPin(selectedDay, selectedMonth, selectedYear)
        }, mYear, mMonth, mDay
    )

    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {

        Image(
            painter = imagePainter,
            contentDescription = null,
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .align(alignment = Alignment.CenterHorizontally)
                .size(250.dp)
        )
        // Displaying the mDate value in the Text
        Text(text = "Todays Number: ${iPin}", fontSize = 30.sp, textAlign = TextAlign.Center)
        // Adding a space of 100dp height
        Spacer(modifier = Modifier.size(100.dp))

        // Creating a button that on
        // click displays/shows the DatePickerDialog
        Button(onClick = {
            mDatePickerDialog.show()
             }, colors = ButtonDefaults.buttonColors(Color(0XFF0F9D58)) ) {
            Text(text = "Select Date", color = Color.White)
        }

        // Adding a space of 50dp height
        Spacer(modifier = Modifier.size(50.dp))

        // Displaying the mDate value in the Text
        Text(text = "Selected Date: ${mDate.value}", fontSize = 30.sp, textAlign = TextAlign.Center)

        Text(text = "Selected Number: ${sPin.value}", fontSize = 30.sp, textAlign = TextAlign.Center)
        // Adding a space of 100dp height
        Spacer(modifier = Modifier.size(100.dp))
    }
}

fun calcPin(d: Int, m: Int, y: Int): Int {
    return d + m + y
}

关键修改点 #

• 将sPin改为remember { mutableStateOf(0) }，把它变成Compose可观察的状态变量，更新sPin.value时会自动触发UI重组。
• 在DatePickerDialog的回调中，使用选中的日期参数selectedDay、selectedMonth、selectedYear（重命名参数避免混淆）来计算pin，确保是选中日期的结果。
• 简化了calcPin函数的写法，直接返回计算结果即可。

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