面试题：Kotlin Compose跨平台组件的布局优化

Question

在Kotlin Compose跨平台开发中，针对不同平台（如Android、iOS）的屏幕尺寸和分辨率差异，如何进行布局的优化？请阐述Compose中布局相关的核心概念，如Row、Column、Box等，并说明如何利用它们实现自适应布局。

Answer 1

针对不同平台屏幕尺寸和分辨率差异优化布局的方法

1. 使用响应式布局：通过检测屏幕的尺寸、比例等信息，动态调整布局结构。例如，在大屏幕设备上展示更多内容，在小屏幕上简化布局。
2. 灵活使用间距和尺寸单位：使用dp（在Android上）或等效的与设备无关的单位，以确保布局在不同分辨率下保持相对一致的视觉效果。避免使用绝对像素值。
3. 适配不同屏幕方向：处理屏幕旋转事件，根据横竖屏状态重新调整布局，以提供良好的用户体验。

Compose中布局相关的核心概念

1. Row：将子组件水平排列。子组件按照添加的顺序从左到右排列。可以通过horizontalArrangement参数控制子组件的水平对齐方式（如start、center、end等），通过verticalAlignment控制垂直对齐方式（如top、centerVertically、bottom等）。

Row(
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("Item 1")
    Text("Item 2")
}

2. Column：将子组件垂直排列。子组件按照添加顺序从上到下排列。同样可通过verticalArrangement控制垂直对齐方式，horizontalAlignment控制水平对齐方式。

Column(
    verticalArrangement = Arrangement.spacedBy(16.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Item A")
    Text("Item B")
}

3. Box：用于将子组件堆叠在一起，后添加的子组件覆盖在前一个子组件之上。可通过contentAlignment参数控制子组件在Box内的对齐方式。

Box(
    contentAlignment = Alignment.Center
) {
    Image(painterResource(R.drawable.background), contentDescription = null)
    Text("Overlay text")
}

利用核心概念实现自适应布局

1. 组合使用布局容器：根据屏幕空间和内容需求，嵌套使用Row、Column和Box。例如，在一个Column中包含多个Row，实现复杂的网格状布局。
2. 使用Modifier调整布局：通过Modifier的fillMaxWidth、fillMaxHeight、width、height、padding等方法，动态调整组件的大小和间距，以适应不同屏幕尺寸。

Column {
    Text(
        text = "Title",
        modifier = Modifier
          .fillMaxWidth()
          .padding(16.dp)
    )
    Row {
        Text(
            text = "Left content",
            modifier = Modifier.weight(1f)
        )
        Text(
            text = "Right content",
            modifier = Modifier.weight(1f)
        )
    }
}

3. 根据屏幕尺寸条件渲染：使用LocalConfiguration.current获取屏幕配置信息，根据屏幕宽度、高度等条件，选择不同的布局结构。

@Composable
fun AdaptiveLayout() {
    val configuration = LocalConfiguration.current
    if (configuration.screenWidthDp < 600) {
        // 小屏幕布局
        Column {
            Text("Small screen layout")
        }
    } else {
        // 大屏幕布局
        Row {
            Text("Large screen layout")
        }
    }
}