如何在Jetpack Compose中实现TV专属布局适配？

方法1：通过设备UI模式精准识别TV端 #

Jetpack Compose可以借助LocalConfiguration获取设备的UI模式，直接区分TV设备，这是和传统View系统layout-television逻辑最接近的方案：

@Composable
fun TvAwareContent() {
    val configuration = LocalConfiguration.current
    val isTv = configuration.uiMode and Configuration.UI_MODE_TYPE_MASK == Configuration.UI_MODE_TYPE_TELEVISION
    
    if (isTv) {
        // TV端专属UI：增大焦点区域、优化导航逻辑、调整布局间距
        TvExclusiveLayout()
    } else {
        // 手机/平板/桌面端原有布局
        DefaultExpandedLayout()
    }
}

这种方式不受窗口尺寸类限制，能精准定位TV设备，实现完全独立的UI分支。

方法2：结合焦点特性优化Expanded尺寸类布局 #

TV端的核心差异是依赖遥控器焦点导航，即使同属Expanded尺寸类，也可以针对焦点行为做针对性调整：

• 放大可聚焦元素的点击区域，用Modifier.padding()或Modifier.size()扩展焦点范围
• 为焦点元素添加强视觉反馈（比如加粗边框、放大阴影），替代手机端的点击动效
• 调整布局的线性排列逻辑，确保遥控器上下左右导航时焦点流动符合用户习惯

示例代码：

@Composable
fun ExpandedContent(isTv: Boolean) {
    LazyRow(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.spacedBy(if (isTv) 32.dp else 16.dp)
    ) {
        items(contentList) { item ->
            ContentCard(
                item = item,
                modifier = Modifier
                    .then(if (isTv) Modifier.width(280.dp) else Modifier.width(200.dp))
                    .focusable(true)
                    .then(
                        if (isTv) Modifier
                            .border(3.dp, Color.Blue, RoundedCornerShape(12.dp))
                            .shadow(12.dp, RoundedCornerShape(12.dp))
                        else Modifier
                    )
            )
        }
    }
}

方法3：用资源限定符分离TV专属参数 #

和View系统一样，你可以创建values-television、drawable-television等资源文件夹，定义TV端专属的尺寸、颜色、图标，在Compose中直接引用，配合设备判断实现UI差异化：

比如在values-television/dimens.xml中定义：

<dimen name="card_width">280dp</dimen>
<dimen name="row_spacing">32dp</dimen>

在Compose中引用：

val cardWidth = dimensionResource(R.dimen.card_width)
val rowSpacing = dimensionResource(R.dimen.row_spacing)

这种方式能将UI参数和业务逻辑分离，便于多端适配的维护。

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