Jetpack Compose 如何适配不同分辨率设备

---

前言

在移动开发中，适配不同分辨率和屏幕大小是不可避免的挑战。Jetpack Compose 提供了更现代化和灵活的方式来处理屏幕适配问题，不需要像传统的 XML 布局那样依赖多个 layout 文件。本文将详细介绍如何在 Compose 中实现适配各种分辨率和屏幕密度的方案。

1、获取屏幕信息

Jetpack Compose 提供了 LocalConfiguration 和 LocalDensity，可以轻松获取屏幕尺寸、密度等信息。
获取屏幕宽高
通过 LocalConfiguration，可以获取屏幕的宽度和高度（单位为 dp）：

@Composable
fun ScreenInfo() {
   
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp
    val screenHeight = configuration.screenHeightDp

    Text(text = "Screen Width: $screenWidth dp, Height: $screenHeight dp")
}

获取屏幕密度
通过 LocalDensity，可以将 dp 转换为 px，或获取屏幕的像素密度：

@Composable
fun DensityInfo() {
   
    val density = LocalDensity.current
    Text(text = "Density: ${
     density.density}, FontScale: ${
     density.fontScale}")
}

2、使用响应式布局适配屏幕

Compose 中可以根据屏幕的宽高动态地调整布局，从而适配不同的分辨率。

2.1 动态调整布局

根据屏幕宽度选择不同的布局方式：

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

    when {
   
        screenWidth <= 360 -> SmallScreenLayout()
        screenWidth in 361