如何在Jetpack Compose中实现Android横屏全屏适配的最大字号本地时间显示

核心思路 #

要实现这种自适应最大字号的时间显示，核心是利用Compose的AutoSizeText组件让文本自动填充可用空间，同时配合全屏横屏的窗口配置，确保内容占满整个屏幕。

步骤1：配置横屏全屏窗口 #

在承载Compose内容的Activity中，设置横屏方向并隐藏系统栏：

class FullscreenTimeActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 设置强制横屏
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
        // 隐藏状态栏和导航栏
        WindowCompat.setDecorFitsSystemWindows(window, false)
        WindowInsetsControllerCompat(window, window.decorView).apply {
            hide(WindowInsetsCompat.Type.systemBars())
            systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
        }
        setContent {
            FullscreenTimeScreen()
        }
    }
}

也可以在AndroidManifest.xml中给Activity添加android:screenOrientation="landscape"属性来固定横屏。

步骤2：实现自适应字号的时间Composable #

使用AutoSizeText组件，让时分文本和AM/PM文本自动适配可用空间，同时通过布局约束保证两者的相对比例：

@Composable
fun FullscreenTimeScreen() {
    // 获取当前本地时间
    val currentTime = remember { mutableStateOf(LocalTime.now()) }
    // 每秒刷新时间
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            currentTime.value = LocalTime.now()
        }
    }

    // 格式化时间：拆分时分和AM/PM部分
    val timeFormatter = DateTimeFormatter.ofPattern("hh:mm")
    val periodFormatter = DateTimeFormatter.ofPattern("a")
    val timeText = currentTime.value.format(timeFormatter)
    val periodText = currentTime.value.format(periodFormatter)

    // 根布局：填充整个屏幕
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black),
        contentAlignment = Alignment.Center
    ) {
        Row(
            verticalAlignment = Alignment.Bottom,
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier.padding(horizontal = 16.dp)
        ) {
            // 时分文本：占主要空间，最大字号显示
            AutoSizeText(
                text = timeText,
                color = Color.White,
                style = TextStyle(fontWeight = FontWeight.Bold),
                modifier = Modifier.weight(1f),
                autoSizeMaxTextSize = 2000.sp, // 设置足够大的上限
                autoSizeMinTextSize = 10.sp,
                autoSizeStepGranularity = 1.sp,
                textAlign = TextAlign.Center
            )
            // AM/PM文本：跟随时分字号自适应，保持底部对齐
            AutoSizeText(
                text = periodText,
                color = Color.White,
                style = TextStyle(fontWeight = FontWeight.Bold),
                modifier = Modifier
                    .padding(start = 8.dp)
                    .align(Alignment.Bottom),
                autoSizeMaxTextSize = 1000.sp,
                autoSizeMinTextSize = 10.sp,
                autoSizeStepGranularity = 1.sp,
                textAlign = TextAlign.Center
            )
        }
    }
}

关键细节说明 #

• AutoSizeText的autoSizeMaxTextSize设置足够大的值，让组件自动计算屏幕可容纳的最大字号。
• 通过Row的weight属性让时分文本占据更多空间，AM/PM文本跟随适配，verticalAlignment = Alignment.Bottom保证两者底部对齐，匹配示例排版。
• 用LaunchedEffect每秒刷新时间，确保显示实时本地时间。
• 根布局用Box填充全屏并设置黑色背景，还原示例图的视觉效果。

适配不同屏幕 #

该实现天然适配手机、平板等不同尺寸设备：

• Compose的fillMaxSize自动适配屏幕尺寸，AutoSizeText根据可用空间动态调整字号。
• 横屏配置保证所有设备上都以横向全屏显示。

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