前言

    隨著平板電腦、折疊螢幕手機等大螢幕裝置的普及，如何讓應用程式在這些裝置上提供最佳使用者體驗成為開發者關注的焦點。

理解大螢幕裝置的特點

• 多工處理： 大螢幕裝置通常允許使用者同時執行多個應用程式，因此應用程式需要考慮如何與其他應用程式共存。
• 不同螢幕尺寸與解析度： 大螢幕裝置的螢幕尺寸和解析度多樣化，應用程式需要適應不同的螢幕比例。
• 使用者互動方式： 大螢幕裝置的使用者互動方式可能與手機有所不同，例如觸控筆、鍵盤等。

配合不同螢幕大小調整版面配置

使用視窗大小類別

針對 Compose 加入的 WindowSizeClass API，可簡化質感設計中斷點的實作。

視窗大小類別有三種大小類別：精簡、中型和展開 (寬度和高度)。

新增 WindowSizeClass 依附元件

在你的 build.gradle 檔案中添加 WindowSizeClass 的程式庫

implementation("androidx.compose.material3:material3-window-size-class")

@Composable
fun ReplyApp(
    windowSize: WindowWidthSizeClass,
    modifier: Modifier = Modifier
) {

setContent {
            ReplyTheme {
                val windowSize = calculateWindowSizeClass(this)
                ReplyApp(
                    windowSize = windowSize.widthSizeClass
                )

@Composable
fun ReplyApp(
    windowSize: WindowWidthSizeClass,
    modifier: Modifier = Modifier
) {
    val viewModel: ReplyViewModel = viewModel()
    val replyUiState = viewModel.uiState.collectAsState().value

    when (windowSize) {
        WindowWidthSizeClass.Compact -> {
        }
        WindowWidthSizeClass.Medium -> {
        }
        WindowWidthSizeClass.Expanded -> {
        }
        else -> {
        }
    }

enum class ReplyNavigationType {
    BOTTOM_NAVIGATION, NAVIGATION_RAIL, PERMANENT_NAVIGATION_DRAWER
}

import com.example.reply.ui.utils.ReplyNavigationType
...
    when (windowSize) {
        WindowWidthSizeClass.Compact -> {
            navigationType = ReplyNavigationType.BOTTOM_NAVIGATION
        }
        WindowWidthSizeClass.Medium -> {
            navigationType = ReplyNavigationType.NAVIGATION_RAIL
        }
        WindowWidthSizeClass.Expanded -> {
            navigationType = ReplyNavigationType.PERMANENT_NAVIGATION_DRAWER
        }
        else -> {
            navigationType = ReplyNavigationType.BOTTOM_NAVIGATION
        }
    }

執行結果

參考

https://developer.android.com/courses/pathways/android-basics-compose-unit-4-pathway-3?hl=zh-tw