You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Jetpack Compose Material3 DatePickerDialog横屏模式UI裁切问题求助

问题描述

使用Jetpack Compose和Material3库,采用2025.01.00版本的BOM,横屏模式下DatePickerDialog的UI元素出现互相裁切的情况,如图所示:

横屏模式下DatePicker裁切问题

相关代码

@OptIn(ExperimentalMaterial3Api::class)
@MyPreview
@Composable
private fun Preview() {
    DatePickerDialog(
        state = rememberDatePickerState(),
        onDismissRequest = {}
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun DatePickerDialog(
    modifier: Modifier = Modifier,
    state: DatePickerState,
    onDismissRequest: (Long?) -> Unit
) {
    androidx.compose.material3.DatePickerDialog(
        modifier = modifier,
        onDismissRequest = {
            val millis = state.selectedDateMillis
            if (millis != null) {
                onDismissRequest(millis)
            }
        },
        confirmButton = {
            Button(
                onClick = {
                    val millis = state.selectedDateMillis
                    if (millis != null) {
                        onDismissRequest(millis)
                    }
                },
                content = {
                    Text(
                        text = stringResource(android.R.string.ok),
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            )
        },
        content = {
            DatePicker(
                modifier = Modifier.fillMaxSize(),
                state = state
            )
        }
    )
}
解决办法
  • 移除DatePicker的fillMaxSize()修饰符:原代码中给DatePicker设置的Modifier.fillMaxSize()会强制组件占满对话框父容器,导致和底部确认按钮区域重叠裁切。将其改为Modifier.wrapContentSize()或默认修饰符,让组件自适应自身大小:
    DatePicker(
        modifier = Modifier.wrapContentSize(),
        state = state
    )
    
  • 添加内容约束:给对话框的content区域补充padding或尺寸限制,避免内容超出对话框边界,示例:
    content = {
        DatePicker(
            modifier = Modifier
                .wrapContentSize()
                .padding(16.dp),
            state = state
        )
    }
    
  • 检查版本兼容性:2025.01.00属于较新的BOM版本,可能存在横屏适配的未修复bug。可以尝试回退到稳定版本(如2024.10.00),或查看Material3官方仓库的Issue列表确认是否有相关修复方案。

内容的提问来源于stack exchange,提问作者Yamin Siahmargooei

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 21:53:24