Android Compose如何适配全屏幕尺寸？

1. 封装通用适配容器，避免重复逻辑 #

把屏幕尺寸判断和布局分支逻辑抽成独立的可组合函数，不用每个页面重复写if-else：

enum class ScreenType { Phone, Tablet, Desktop }

@Composable
fun getScreenType(): ScreenType {
    val config = LocalConfiguration.current
    return when {
        config.smallestScreenWidthDp >= 900 -> ScreenType.Desktop
        config.smallestScreenWidthDp >= 600 -> ScreenType.Tablet
        else -> ScreenType.Phone
    }
}

@Composable
fun AdaptiveLayout(
    phoneContent: @Composable () -> Unit,
    tabletContent: @Composable () -> Unit = phoneContent,
    desktopContent: @Composable () -> Unit = tabletContent
) {
    when(getScreenType()) {
        ScreenType.Phone -> phoneContent()
        ScreenType.Tablet -> tabletContent()
        ScreenType.Desktop -> desktopContent()
    }
}

之后每个页面只需要调用这个容器，按需传入不同屏幕的布局（如果平板/桌面布局和手机差异小，直接复用手机布局即可）：

@Composable
fun DictionarySearchPage() {
    AdaptiveLayout(
        phoneContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                SearchBar()
                WordList()
            }
        },
        tabletContent = {
            Row(modifier = Modifier.padding(24.dp)) {
                SearchBar(modifier = Modifier.weight(1f))
                WordList(modifier = Modifier.weight(2f))
            }
        }
    )
}

2. 用自适应尺寸替代固定值 #

把写死的16.dp、200.dp这类固定尺寸，换成基于屏幕百分比或自适应修饰符：

• 实现百分比尺寸转换：

@Composable
fun percent(value: Int): Dp {
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    return screenWidth * value / 100
}

然后用padding(percent(4))替代固定内边距，或者直接用fillMaxWidth(0.9f)让组件占屏幕宽度的90%。

3. 利用内置自适应组件减少判断 #

Compose提供的部分组件可以自动适配空间，不用手动判断屏幕：

• FlowRow/FlowColumn：会根据可用空间自动调整组件排列，比如词典的分类标签，在手机上自动换行，平板上横向显示更多：

FlowRow(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
    categoryList.forEach {
        CategoryChip(text = it)
    }
}

• BoxWithConstraints：直接获取父容器尺寸，动态调整布局：

BoxWithConstraints {
    if (maxWidth > 600.dp) {
        Row { /* 宽屏双栏布局 */ }
    } else {
        Column { /* 窄屏单列布局 */ }
    }
}

4. 主题层统一管理适配参数 #

把布局相关的尺寸（内边距、圆角、字体大小）放到主题中，根据屏幕类型动态切换，所有页面自动适配：

data class AppDimens(
    val screenPadding: Dp,
    val cardRadius: Dp,
    val titleSize: TextUnit
)

@Composable
fun getAppDimens(): AppDimens {
    return when(getScreenType()) {
        ScreenType.Phone -> AppDimens(16.dp, 8.dp, 18.sp)
        ScreenType.Tablet -> AppDimens(24.dp, 12.dp, 22.sp)
        ScreenType.Desktop -> AppDimens(32.dp, 16.dp, 24.sp)
    }
}

// 页面中直接使用
@Composable
fun WordDetailPage() {
    val dimens = getAppDimens()
    Column(modifier = Modifier.padding(dimens.screenPadding)) {
        Text(text = word.title, fontSize = dimens.titleSize)
        Card(shape = RoundedCornerShape(dimens.cardRadius)) {
            // 内容区域
        }
    }
}

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