在 Jetpack Compose 中调整 DatePicker 大小时出现问题

Question

我正在使用 Kotlin 和 Jetpack Compose 制作 Android 应用程序。我目前正致力于制作 DatePicker。目标是让日期选择器日历显示在应用程序屏幕本身上，而不是作为对话框。但是，一旦我尝试在较小的手机上运行该应用程序，日历就会与上面的日期重叠，并且它们不可见。

目前这是日期选择器的代码：

Column( modifier = Modifier .fillMaxWidth() .padding(8.dp), horizontalAlignment = Alignment.CenterHorizontally ) { DatePicker( state = datePickerState, showModeToggle = false, modifier = modifier, title = null, ) }

当我调用日期选择器的可组合函数时，我这样称呼它：

DatePickerView( selectedDate, onDateSelected = { selectedDate = it formattedDate = convertMillisToDate(it) }, modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp) .align(Alignment.CenterHorizontally) )

在较大的屏幕上一切都很好，但在较小的屏幕上就会出现这个问题。如何根据屏幕尺寸动态调整日期选择器的大小？

Answer 1

要根据 Jetpack Compose 应用程序中的屏幕尺寸动态调整 DatePicker 的大小，您可以使用 LocalConfiguration 和 LocalDensity 提供程序来获取有关屏幕尺寸和密度的信息。然后，您可以相应地调整 DatePicker 的大小。

@Composable
fun DatePickerScreen() {
  
    val configuration = LocalConfiguration.current
    val screenWidthDp = configuration.screenWidthDp

    val datePickerWidth = (screenWidthDp * 0.8).dp

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        
        DatePickerView(
            selectedDate = System.currentTimeMillis(),
            onDateSelected = { /* Handle date selection */ },
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp)
                .align(Alignment.CenterHorizontally)
                .width(datePickerWidth)
        )
    }
}

@Composable
fun DatePickerView(
    selectedDate: Long,
    onDateSelected: (Long) -> Unit,
    modifier: Modifier = Modifier
) {
    val datePickerState = rememberDatePickerState(selectedDate)

    DatePicker(
        state = datePickerState,
        showModeToggle = false,
        modifier = modifier,
        title = null,
    )
}