Android @Compose将如何在Android中处理屏幕大小和方向

Question

Android @Compose将如何处理Android中的屏幕大小和方向问题。 在谷歌搜索后，我无法找到合适的答案。有人可以回答这个问题吗？

- sudhanshu

---

根据我所阅读的讨论，这似乎仍然是一个正在进行中的工作。如果您想了解他们如何考虑此事，可以在以下线程中看到一些想法：https://kotlinlang.slack.com/archives/CJLTWPH7S/p1565158290118600 - Vinay Gaba

Answer 1

使用1.0.x版本，您可以使用BoxWithConstraints组合来根据屏幕大小定义不同的UI。

例如:

BoxWithConstraints {
        if (minWidth < 480.dp) {
            /* .... */
        } else if (minWidth < 720.dp) {
            /* .... */
        } else {
            /* .... */
        }
    }

为了处理屏幕方向，可以使用LocalConfiguration。类似如下：

val configuration = LocalConfiguration.current
when (configuration.orientation) {
    Configuration.ORIENTATION_LANDSCAPE -> {
        /* ... */
    }
    else -> {
        /* ... */
    }
}

}

- Gabriele Mariotti

---

谢谢。但是如果我们想根据屏幕尺寸更改修饰符怎么办？例如，我们希望在大屏幕上将列宽限制为某个最大允许值。 - Ehsan Shadi

@Ehsan Shadi 当返回不同的修饰符时，请使用它们进行追加（append）操作。 - Sheikh Zakir Ahmad

Answer 2

您可以像这样检查方向：

val configuration = LocalConfiguration.current
when(configuration.orientation) {
    Configuration.ORIENTATION_LANDSCAPE -> {}
    Configuration.ORIENTATION_PORTRAIT -> {}
    Configuration.ORIENTATION_SQUARE -> {}
    Configuration.ORIENTATION_UNDEFINED -> {}
}

屏幕尺寸：

BoxWithConstraints() {
    // thats what you can access:
    this.maxWidth
    this.maxHeight
    this.minWidth
    this.minHeight
}

- M. Wojcik

Answer 3

根据新的 androidx.compose.material3.windowsizeclass 库添加更新的答案。

您现在可以使用 WindowSizeClass 查询宽度和高度类。此库专门用于构建自适应布局，并在活动的大小/方向更改时自动重新组合布局。

此 API 会给出宽度和高度的粗略大小（COMPACT、MEDIUM、EXPANDING）。这使得处理折叠式设备和大屏幕显示器变得容易。

以下是我编写的一个简单示例实现：

class MainActivity {
    /* ...... */
    setContent {
        val windowSizeClass = calculateWindowSizeClass(this)
        /* .... */
        MyApp(windowWidthSizeClass = windowSizeClass.widthSizeClass, /* .... */ )
    }
}

@Composable
fun MyApp(windowWidthSizeClass: WindowWidthSizeClass, /* ... */) {
    when(windowWidthSizeClass) {
        WindowWidthSizeClass.Expanded -> // orientation is landscape in most devices including foldables (width 840dp+)
        WindowWidthSizeClass.Medium -> // Most tablets are in landscape, larger unfolded inner displays in portrait (width 600dp+)
        WindowWidthSizeClass.Compact -> // Most phones in portrait
    }
}

在这里，当windowWidthSizeClass等于WindowWidthSizeClass.Expanded时，我可以将布局设置为类似于横向的视图。 我可以使用WindowWidthSizeClass.Medium宽度来优化我的布局，以适应更大的设备，如平板电脑和可折叠设备。 最后，WindowWidthSizeClass.Compact告诉我，大多数移动设备都是竖屏，因此我可以相应地更新我的UI。

这些相同的枚举也适用于活动的高度，但文档指出 -

大多数应用程序只需考虑宽度窗口大小类即可构建响应式UI。

（对我来说到目前为止是真的）

请注意，此库仍处于alpha版本，并明确标记为实验性，因此可能会发生变化。

官方指南 - https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes#window_size_classes

示例实现可以在JetNews示例应用程序中找到 - https://github.com/android/compose-samples/tree/main/JetNews。

文档 - https://developer.android.com/reference/kotlin/androidx/compose/material3/windowsizeclass/package-summary

发布说明（发布于1.0.0-alpha10，当前版本-alpha13）- https://developer.android.com/jetpack/androidx/releases/compose-material3#1.0.0-alpha10

- Yashovardhan99

Answer 4

两个属性都可以通过LocalConfiguration.current来访问，它返回一个Configuration对象。

就方向而言，存在一个属性orientation， LocalConfiguration.current.orientation 同样，还有另外两个属性。 LocalConfiguration.current.screenWidthDp
LocalConfiguration.current.screenHeightDp 这将有助于您在组合的签名中使用它，而不必在其范围内执行相同的操作。例如，这可以用于修改器(Modifiers)以相应地调整组合。

但是，对于调整组合大小的Modifier，我建议使用fillMaxHeight(/*fraction/*)和fillMaxWidth(/*fraction*/)。正如明显的那样，分数是它应该占用父组合空间的一部分。如果父组合是setContent，或者如果父组合伸展到整个屏幕(例如，使用fillMaxSize()修改器的Surface)，那么这将相对于屏幕尺寸本身。因此，fillMaxHeight(0.1f)将使组合的高度等于屏幕高度的十分之一。您可以在这里学习基本概念：compose-pathway。这可能并不是非常简单，但可以帮助构建更好的声明式范例基础。

- Richard Onslow Roper