深入分析 Android Compose 框架的多平台布局适配(六十)

深入分析 Android Compose 框架的多平台布局适配

一、引言

在当今的移动应用开发领域，多平台开发已成为一种主流趋势。开发者希望能够使用一套代码库，同时为多个平台（如 Android、iOS、Web 等）构建应用，以提高开发效率、降低维护成本。Android Compose 作为一种现代的声明式 UI 工具包，为 Android 应用开发带来了全新的体验。而随着 Compose Multiplatform 的推出，它进一步支持了跨平台开发，使得开发者可以在不同平台上实现一致的 UI 设计。

然而，不同平台在屏幕尺寸、分辨率、系统特性等方面存在差异，这就给布局适配带来了挑战。如何确保应用在各个平台上都能呈现出良好的视觉效果和用户体验，是开发者需要解决的重要问题。本文将从源码级别深入分析 Android Compose 框架的多平台布局适配，探讨在不同平台上实现布局适配的方法和技巧。

二、Android Compose 与多平台开发基础

2.1 Android Compose 简介

Android Compose 是 Google 推出的用于构建 Android UI 的声明式框架。它采用 Kotlin 语言编写，通过简洁的代码描述 UI 的外观和行为。与传统的基于 XML 和 View 体系的 Android 布局方式相比，Android Compose 具有以下优点：

• 声明式编程：开发者只需描述 UI 应该是什么样子，而无需关心 UI 是如何创建和更新的，代码更加简洁易读。

• 高效性能：Compose 采用了智能的渲染机制，能够自动检测 UI 的变化并只更新需要更新的部分，减少了不必要的重绘，提高了性能。

• 易于组合：Compose 组件可以轻松组合在一起，形成复杂的 UI 界面，提高了代码的复用性和可维护性。

以下是一个简单的 Android Compose 示例代码：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun SimpleComposeLayout() {
    // 创建一个垂直布局
    Column {
        // 在布局中添加一个文本组件
        Text(text = "Hello, Android Compose!")
        // 再添加一个文本组件
        Text(text = "This is a simple Compose layout.")
    }
}

2.2 Compose Multiplatform 概述

Compose Multiplatform 是基于 Android Compose 构建的跨平台框架，它允许开发者使用一套 Kotlin 代码为 Android、iOS、Web 等多个平台构建应用。Compose Multiplatform 提供了统一的 API 和组件，使得开发者可以在不同平台上实现一致的 UI 设计。

要使用 Compose Multiplatform，需要在项目中添加相应的依赖。以下是一个简单的 build.gradle.kts 配置示例：

kotlin

// 应用 Kotlin 多平台插件
plugins {
    kotlin("multiplatform")
}

kotlin {
    // 配置 Android 目标平台
    android()
    // 配置 iOS 目标平台
    ios()

    sourceSets {
        // 定义公共源代码集
        val commonMain by getting {
            dependencies {
                // 添加 Compose Multiplatform 公共依赖
                implementation(compose.runtime)
                implementation(compose.foundation)
                implementation(compose.material)
            }
        }
        // 定义 Android 源代码集
        val androidMain by getting {
            dependencies {
                // 添加 Android 平台的 Compose 依赖
                implementation("androidx.compose.ui:ui-android")
            }
        }
        // 定义 iOS 源代码集
        val iosMain by getting {
            dependencies {
                // 添加 iOS 平台的 Compose 依赖
                implementation("org.jetbrains.compose.ui:ui-ios")
            }
        }
    }
}

2.3 多平台布局适配的挑战

在多平台开发中，布局适配面临着诸多挑战，主要包括以下几个方面：

• 屏幕尺寸和分辨率差异：不同平台的设备屏幕尺寸和分辨率各不相同，如手机、平板、电脑等，需要确保布局在各种屏幕上都能正常显示。
• 系统特性差异：不同平台有各自独特的系统特性和设计规范，如 Android 的导航栏、iOS 的安全区域等，需要在布局中进行相应的处理。
• 输入方式差异：不同平台的输入方式也有所不同，如触摸屏幕、键盘输入等，需要确保布局在不同输入方式下都能提供良好的用户体验。

三、多平台屏幕尺寸和分辨率适配

3.1 理解不同平台的屏幕特性

不同平台的设备具有不同的屏幕特性，包括屏幕尺寸、分辨率、像素密度等。了解这些特性对于布局适配至关重要。

3.1.1 Android 屏幕特性

在 Android 中，屏幕尺寸通常用英寸表示，分辨率用像素表示，像素密度用每英寸像素数（PPI）表示。Android 系统将不同像素密度的屏幕分为不同的密度桶，如 ldpi、mdpi、hdpi、xhdpi 等。在布局中，可以使用 dp（密度无关像素）来确保在不同像素密度的屏幕上显示效果一致。

以下是一个根据屏幕密度计算尺寸的示例代码：

kotlin

import android.content.Context
import android.util.DisplayMetrics

fun Context.dpToPx(dp: Float): Float {
    // 获取设备的显示指标
    val metrics = resources.displayMetrics
    // 根据像素密度将 dp 转换为 px
    return dp * (metrics.densityDpi / DisplayMetrics.DENSITY_DEFAULT)
}

3.1.2 iOS 屏幕特性

在 iOS 中，屏幕尺寸同样用英寸表示，分辨率用像素表示。iOS 设备有不同的屏幕尺寸和分辨率，如 iPhone SE、iPhone 14 等。iOS 系统使用点（pt）作为布局单位，1 点在不同分辨率的屏幕上可能对应不同的像素数。

在 Compose Multiplatform 中，默认使用的布局单位是 dp，它在 iOS 上会自动转换为点。

3.2 使用响应式布局

响应式布局是一种能够根据屏幕尺寸和分辨率自动调整布局的方法。在 Android Compose 中，可以使用 Modifier 和布局组件来实现响应式布局。

3.2.1 使用 Modifier.width 和 Modifier.height

可以根据不同的屏幕尺寸动态调整组件的宽度和高度。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ResponsiveLayout() {
    // 创建一个 Box 布局
    Box(
        modifier = Modifier
           .fillMaxWidth()
           .height(if (isLargeScreen()) 200.dp else 100.dp)
    ) {
        // 在布局中添加一个文本组件
        Text(text = "Responsive Layout")
    }
}

fun isLargeScreen(): Boolean {
    // 这里可以根据实际情况判断是否为大屏幕设备
    return false
}

3.2.2 使用 Modifier.weight

Modifier.weight 可以用于在布局中分配剩余空间。以下是一个使用 Modifier.weight 的示例代码：

kotlin

import androidx.compose.foundation.layout.Row
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun WeightedLayout() {
    // 创建一个水平布局
    Row {
        // 在布局中添加一个文本组件，占用 1 份空间
        Text(text = "Left", modifier = Modifier.weight(1f))
        // 再添加一个文本组件，占用 2 份空间
        Text(text = "Right", modifier = Modifier.weight(2f))
    }
}

3.3 适配不同屏幕方向

在不同的屏幕方向（横屏和竖屏）下，布局可能需要进行相应的调整。可以通过监听屏幕方向的变化来实现布局的适配。

以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import android.content.res.Configuration

@Composable
fun OrientationAwareLayout() {
    // 获取当前设备的配置信息
    val configuration = LocalConfiguration.current
    // 获取当前设备的上下文
    val context = LocalContext.current
    // 定义一个状态变量来存储屏幕方向
    var orientation by mutableStateOf(configuration.orientation)

    // 监听配置变化
    androidx.compose.runtime.LaunchedEffect(configuration) {
        orientation = configuration.orientation
    }

    if (orientation == Configuration.ORIENTATION_PORTRAIT) {
        // 竖屏布局
        Column {
            Text(text = "Portrait Orientation")
        }
    } else {
        // 横屏布局
        Row {
            Text(text = "Landscape Orientation")
        }
    }
}

@Preview
@Composable
fun OrientationAwareLayoutPreview() {
    OrientationAwareLayout()
}

四、多平台系统特性适配

4.1 适配 Android 导航栏和状态栏

在 Android 中，导航栏和状态栏会占用一定的屏幕空间，需要在布局中进行相应的处理，以确保内容不会被遮挡。

4.1.1 沉浸式状态栏

可以通过设置沉浸式状态栏来让内容延伸到状态栏下方。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat

@Composable
fun ImmersiveStatusBarLayout() {
    // 获取当前视图
    val view = LocalView.current
    // 设置窗口为沉浸式
    androidx.compose.runtime.LaunchedEffect(view) {
        val window = (view.context as android.app.Activity).window
        WindowCompat.setDecorFitsSystemWindows(window, false)
    }

    // 创建一个 Surface 组件，填充整个屏幕
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colors.background
    ) {
        // 这里可以添加具体的布局内容
    }
}

4.1.2 处理导航栏

可以通过设置导航栏的颜色和透明度来实现与布局的融合。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsControllerCompat

@Composable
fun NavigationBarLayout() {
    // 获取当前视图
    val view = LocalView.current
    // 设置窗口为沉浸式
    androidx.compose.runtime.LaunchedEffect(view) {
        val window = (view.context as android.app.Activity).window
        WindowCompat.setDecorFitsSystemWindows(window, false)
        val insetsController = WindowInsetsControllerCompat(window, view)
        // 设置导航栏颜色
        insetsController.isAppearanceLightNavigationBars = true
        window.navigationBarColor = Color.Transparent.toArgb()
    }

    // 创建一个 Surface 组件，填充整个屏幕
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colors.background
    ) {
        // 这里可以添加具体的布局内容
    }
}

4.2 适配 iOS 安全区域

在 iOS 中，设备的屏幕边缘可能存在安全区域，如刘海屏、圆角屏幕等，需要在布局中处理安全区域，以确保内容不会被遮挡。

在 Compose Multiplatform 中，可以使用 Modifier.statusBarsPadding 和 Modifier.navigationBarsPadding 来处理安全区域。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun SafeAreaLayout() {
    // 创建一个 Box 布局，填充整个屏幕，并处理状态栏安全区域
    Box(
        modifier = Modifier
           .fillMaxSize()
           .statusBarsPadding()
    ) {
        // 在布局中添加一个文本组件
        Text(text = "Safe Area Layout")
    }
}

4.3 处理不同平台的字体和图标

不同平台的字体和图标可能存在差异，需要在布局中进行相应的处理，以确保在各个平台上显示效果一致。

4.3.1 字体适配

可以使用自定义字体来确保在不同平台上显示相同的字体。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

// 定义自定义字体家族
val customFontFamily = FontFamily(
    Font(R.font.custom_font, FontWeight.Normal)
)

@Composable
fun CustomFontLayout() {
    // 创建一个 Box 布局，填充整个屏幕
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        // 在布局中添加一个文本组件，使用自定义字体
        Text(
            text = "Custom Font",
            fontFamily = customFontFamily,
            fontSize = 24.sp
        )
    }
}

4.3.2 图标适配

可以使用矢量图标来确保在不同分辨率的屏幕上显示清晰。在 Compose 中，可以使用 Icon 组件来显示图标。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun IconLayout() {
    // 创建一个 Box 布局，填充整个屏幕
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        // 在布局中添加一个图标组件
        Icon(
            imageVector = Icons.Filled.Favorite,
            contentDescription = "Favorite Icon",
            tint = Color.Red
        )
    }
}

五、多平台输入方式适配

5.1 触摸屏幕输入适配

在移动设备上，触摸屏幕是主要的输入方式。在布局中，需要确保组件的触摸区域足够大，以方便用户操作。

5.1.1 增大触摸区域

可以使用 Modifier.size 或 Modifier.padding 来增大组件的触摸区域。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun TouchAreaLayout() {
    // 创建一个 Box 布局
    Box {
        // 创建一个按钮组件，增大触摸区域
        Button(
            onClick = { /* 按钮点击事件处理 */ },
            modifier = Modifier.size(100.dp)
        ) {
            // 在按钮中添加一个文本组件
            Text(text = "Click Me")
        }
    }
}

5.1.2 处理触摸事件

可以使用 Modifier.clickable 来处理触摸事件。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.input.pointer.pointerInput

@Composable
fun TouchEventLayout() {
    // 创建一个 Box 布局
    Box(
        modifier = Modifier
           .size(100.dp)
           .pointerInput(Unit) {
                // 处理触摸事件
                detectTapGestures(
                    onTap = { /* 点击事件处理 */ }
                )
            }
    ) {
        // 在布局中添加一个文本组件
        Text(text = "Touch Me")
    }
}

5.2 键盘输入适配

在需要用户输入文本的场景中，需要处理键盘的弹出和隐藏，以确保布局不会被键盘遮挡。

5.2.1 处理键盘弹出和隐藏

可以使用 WindowInsets 来监听键盘的弹出和隐藏事件。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalWindowInsets
import androidx.compose.ui.unit.dp

@Composable
fun KeyboardLayout() {
    // 获取当前窗口的插入信息
    val insets = LocalWindowInsets.current
    // 定义一个状态变量来存储输入的文本
    var text by mutableStateOf("")

    // 创建一个 Box 布局，填充整个屏幕
    Box(
        modifier = Modifier
           .fillMaxSize()
           .padding(bottom = insets.ime.bottom.dp)
    ) {
        // 创建一个文本输入框组件
        TextField(
            value = text,
            onValueChange = { text = it },
            modifier = Modifier.padding(16.dp)
        )
    }
}

5.3 适配不同平台的输入习惯

不同平台的用户可能有不同的输入习惯，如 Android 用户可能更习惯使用软键盘，而 iOS 用户可能更习惯使用实体键盘。在布局中，需要考虑这些差异，提供良好的用户体验。

例如，可以根据不同平台的特性，调整输入框的样式和布局。以下是一个示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import android.os.Build

@Composable
fun InputHabitsLayout() {
    // 获取当前设备的上下文
    val context = LocalContext.current
    // 定义一个状态变量来存储输入的文本
    var text by mutableStateOf("")

    // 创建一个 Box 布局，填充整个屏幕
    Box(
        modifier = Modifier.fillMaxSize()
    ) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            // Android 11 及以上版本的输入框样式
            TextField(
                value = text,
                onValueChange = { text = it },
                modifier = Modifier
                   .padding(16.dp)
                   .androidTextFieldStyle()
            )
        } else {
            // 其他版本的输入框样式
            TextField(
                value = text,
                onValueChange = { text = it },
                modifier = Modifier
                   .padding(16.dp)
                   .defaultTextFieldStyle()
            )
        }
    }
}

fun Modifier.androidTextFieldStyle(): Modifier {
    // 定义 Android 11 及以上版本的输入框样式
    return this
       .background(androidx.compose.ui.graphics.Color.LightGray)
       .border(1.dp, androidx.compose.ui.graphics.Color.Gray)
}

fun Modifier.defaultTextFieldStyle(): Modifier {
    // 定义其他版本的输入框样式
    return this
       .background(androidx.compose.ui.graphics.Color.White)
       .border(1.dp, androidx.compose.ui.graphics.Color.Black)
}

六、多平台布局适配的源码分析

6.1 Compose Multiplatform 布局核心源码分析

Compose Multiplatform 的布局核心代码主要位于 org.jetbrains.compose.ui 包中。以下是对一些关键类和接口的源码分析：

6.1.1 Layout 组件

Layout 是 Compose 中用于创建自定义布局的核心组件。以下是 Layout 组件的简化源码：

kotlin

// Layout 组件的定义
@Composable
fun Layout(
    modifier: Modifier = Modifier,
    measurePolicy: MeasurePolicy,
    content: @Composable () -> Unit
) {
    // 创建一个 LayoutNode
    val layoutNode = rememberLayoutNode(measurePolicy)
    // 应用修饰符
    val modifiedLayoutNode = modifier.modifyLayoutNode(layoutNode)
    // 组合内容
    CompositionLocalProvider(
        LocalLayoutNode provides modifiedLayoutNode
    ) {
        content()
    }
    // 测量和布局操作
    modifiedLayoutNode.doMeasureAndLayout()
}

// 记住 LayoutNode 的函数
@Composable
private fun rememberLayoutNode(measurePolicy: MeasurePolicy): LayoutNode {
    return remember {
        LayoutNode(measurePolicy)
    }
}

Layout 组件接受一个 Modifier、一个 MeasurePolicy 和一个 content 函数作为参数。它首先创建一个 LayoutNode，并应用修饰符。然后通过 CompositionLocalProvider 提供 LayoutNode，执行 content 函数组合内容。最后调用 doMeasureAndLayout 方法进行测量和布局操作。

6.1.2 MeasurePolicy 接口

MeasurePolicy 是一个接口，定义了测量和布局的策略。以下是 MeasurePolicy 接口的源码：

kotlin

// MeasurePolicy 接口的定义
interface MeasurePolicy {
    // 测量方法，由具体的实现类实现
    fun MeasureScope.measure(
        measurables: List<Measurable>,
        constraints: Constraints
    ): MeasureResult
}

MeasurePolicy 接口只有一个 measure 方法，该方法接受一个 Measurable 列表和一个 Constraints 对象作为参数，返回一个 MeasureResult 对象。具体的测量和布局逻辑由实现该接口的类来完成。

6.2 不同平台布局适配的源码差异

不同平台的布局适配代码可能存在一些差异，主要体现在以下几个方面：

6.2.1 Android 平台

在 Android 平台上，布局适配代码通常会涉及到 Android 系统的一些特性和 API。例如，处理状态栏和导航栏时，会使用到 WindowCompat 和 WindowInsetsControllerCompat 等类。以下是一个处理状态栏的示例代码：

kotlin

import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsControllerCompat

@Composable
fun AndroidStatusBarLayout() {
    // 获取当前视图
    val view = LocalView.current
    // 设置窗口为沉浸式
    androidx.compose.runtime.LaunchedEffect(view) {
        val window = (view.context as android.app.Activity).window
        WindowCompat.setDecorFitsSystemWindows(window, false)
        val insetsController = WindowInsetsControllerCompat(window, view)
        // 设置状态栏颜色
        insetsController.isAppearanceLightStatusBars = true
        window.statusBarColor = androidx.compose.ui.graphics.Color.Transparent.toArgb()
    }
    // 其他布局内容
}

6.2.2 iOS 平台

在 iOS 平台上，布局适配代码会涉及到 iOS 系统的一些特性和 API。例如，处理安全区域时，会使用到 Modifier.statusBarsPadding 和 Modifier.navigationBarsPadding 等修饰符。以下是一个处理安全区域的示例代码：

kotlin

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun iOSSafeAreaLayout() {
    // 创建一个 Box 布局，填充整个屏幕，并处理状态栏安全区域
    Box(
        modifier = Modifier
           .fillMaxSize()
           .statusBarsPadding()
    ) {
        // 在布局中添加一个文本组件
        Text(text = "iOS Safe Area Layout")
    }
}

6.3 源码中的布局适配机制

Compose Multiplatform 的源码中，布局适配机制主要通过以下几个方面实现：

6.3.1 修饰符

修饰符是 Compose 中用于修改组件行为和外观的重要工具。在布局适配中，修饰符可以用于处理不同平台的特性，如 Modifier.statusBarsPadding 用于处理 iOS 安全区域，Modifier.androidTextFieldStyle 用于处理 Android 输入框样式等。

6.3.2 平台特定代码

在 Compose Multiplatform 中，可以使用 expect 和 actual 关键字来定义平台特定的代码。例如，定义一个 PlatformUtils 类，在不同平台上实现不同的方法：

kotlin

// 公共代码中定义期望类
expect class PlatformUtils {
    fun getPlatformName(): String
}

// Android 平台实现
actual class PlatformUtils actual constructor() {
    actual fun getPlatformName(): String {
        return "Android"
    }
}

// iOS 平台实现
actual class PlatformUtils actual constructor() {
    actual fun getPlatformName(): String {
        return "iOS"
    }
}

6.3.3 条件编译

在某些情况下，可以使用条件编译来根据不同平台执行不同的代码。例如，在处理不同平台的字体时，可以使用条件编译：

kotlin

import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontWeight

// 公共代码中定义字体家族
expect val platformFontFamily: FontFamily

// Android 平台实现
actual val platformFontFamily: FontFamily = FontFamily(
    Font(R.font.android_font, FontWeight.Normal)
)

// iOS 平台实现
actual val platformFontFamily: FontFamily = FontFamily(
    Font(R.font.ios_font, FontWeight.Normal)
)

七、实际案例分析

7.1 创建多平台响应式列表布局

以下是一个创建多平台响应式列表布局的示例：

kotlin

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

// 定义数据类
data class Item(val title: String, val description: String)

@Composable
fun ResponsiveListLayout(items: List<Item>) {
    // 判断是否为大屏幕设备
    val isLargeScreen = isLargeScreen()

    if (isLargeScreen) {
        // 大屏幕设备使用网格布局
        Row(
            modifier = Modifier
               .fillMaxWidth()
               .padding(16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            items.chunked(2).forEach { rowItems ->
                Column(
                    modifier = Modifier.weight(1f),
                    verticalArrangement = Arrangement.spacedBy(16.dp)
                ) {
                    rowItems.forEach { item ->
                        ItemCard(item)
                    }
                }
            }
        }
    } else {
        // 小屏幕设备使用列表布局
        LazyColumn(
            modifier = Modifier
               .fillMaxWidth()
               .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            items.forEach { item ->
                item {
                    ItemCard(item)
                }
            }
        }
    }
}

@Composable
fun ItemCard(item: Item) {
    // 创建一个卡片组件
    Card(
        modifier = Modifier
           .fillMaxWidth()
           .padding(8.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            // 在卡片中添加标题文本组件
            Text(text = item.title, style = androidx.compose.ui.text.TextStyle(fontSize = 20.sp))
            // 在卡片中添加描述文本组件
            Text(text = item.description, style = androidx.compose.ui.text.TextStyle(fontSize = 16.sp))
        }
    }
}

fun isLargeScreen(): Boolean {
    // 这里可以根据实际情况判断是否为大屏幕设备
    return false
}

在上述代码中，ResponsiveListLayout 函数根据屏幕大小选择不同的布局方式。如果是大屏幕设备，使用网格布局；如果是小屏幕设备，使用列表布局。ItemCard 函数用于创建每个列表项的卡片组件。

7.2 实现多平台底部导航栏布局

以下是一个实现多平台底部导航栏布局的示例：

kotlin

import androidx.compose.foundation.layout.BottomAppBar
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource

// 定义导航项数据类
data class NavigationItem(val icon: ImageVector, val title: String)

@Composable
fun BottomNavigationLayout(items: List<NavigationItem>) {
    // 创建一个底部导航栏组件
    BottomAppBar(
        modifier = Modifier.fillMaxWidth()
    ) {
        // 创建一个水平布局
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = androidx.compose.foundation.layout.Arrangement.SpaceAround
        ) {
            items.forEach { item ->
                // 创建一个图标按钮组件
                IconButton(onClick = { /* 按钮点击事件处理 */ }) {
                    Column(
                        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
                    ) {
                        // 在按钮中添加图标组件
                        Icon(imageVector = item.icon, contentDescription = item.title)
                        // 在按钮中添加文本组件
                        Text(text = item.title)
                    }
                }
            }
        }
    }
}

在上述代码中，BottomNavigationLayout 函数用于创建底部导航栏布局。它接受一个导航项列表作为参数，在底部导航栏中显示每个导航项的图标和标题。

7.3 开发多平台登录页面布局

以下是一个开发多平台登录页面布局的示例：

kotlin

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp

@Composable
fun LoginPageLayout() {
    // 定义用户名和密码的状态变量
    var username by mutableStateOf("")
    var password by mutableStateOf("")

    // 创建一个垂直布局，填充整个屏幕
    Column(
        modifier = Modifier
           .fillMaxSize()
           .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // 在布局中添加标题文本组件
        Text(text = "Login Page", style = androidx.compose.ui.text.TextStyle(fontSize = 24.sp))
        // 添加一个间隔组件
        Spacer(modifier = Modifier.height(16.dp))
        // 创建一个文本输入框组件，用于输入用户名
        TextField(
            value = username,
            onValueChange = { username = it },
            modifier = Modifier.fillMaxWidth(),
            label = { Text(text = "Username") }
        )
        // 添加一个间隔组件
        Spacer(modifier = Modifier.height(16.dp))
        // 创建一个文本输入框组件，用于输入密码
        TextField(
            value = password,
            onValueChange = { password = it },
            modifier = Modifier.fillMaxWidth(),
            label = { Text(text = "Password") },
            visualTransformation = PasswordVisualTransformation()
        )
        // 添加一个间隔组件
        Spacer(modifier = Modifier.height(16.dp))
        // 创建一个按钮组件，用于登录
        Button(
            onClick = { /* 登录按钮点击事件处理 */ },
            modifier = Modifier.fillMaxWidth()
        ) {
            // 在按钮中添加文本组件
            Text(text = "Login")
        }
    }
}

在上述代码中，LoginPageLayout 函数用于创建登录页面布局。它包含用户名和密码输入框，以及一个登录按钮。通过 mutableStateOf 来管理输入框的状态。

八、总结与展望

8.1 总结

通过对 Android Compose 框架多平台布局适配的深入分析，我们了解到在多平台开发中，布局适配是一个复杂而重要的问题。不同平台在屏幕尺寸、分辨率、系统特性、输入方式等方面存在差异，需要开发者采取相应的措施来确保布局在各个平台上都能呈现出良好的视觉效果和用户体验。

在屏幕尺寸和分辨率适配方面，可以使用响应式布局和适配不同屏幕方向的方法，根据不同的屏幕特性动态调整布局。在系统特性适配方面，需要处理 Android 导航栏和状态栏、iOS 安全区域等问题，确保内容不会被遮挡。在输入方式适配方面，要考虑触摸屏幕输入和键盘输入的差异，提供良好的用户体验。

通过源码分析，我们深入理解了 Compose Multiplatform 布局的核心机制，包括 Layout 组件、MeasurePolicy 接口等。同时，也了解到不同平台布局适配代码的差异和源码中的布局适配机制，如修饰符、平台特定代码和条件编译等。

通过实际案例分析，我们展示了如何运用所学知识创建多平台响应式列表布局、底部导航栏布局和登录页面布局等。这些案例为开发者提供了实际的参考和指导。