根据 Android Compose 中的可用宽度/高度显示不同的内容（布局）

Question

我有一个

Activity

和

MyApp

可组合函数。在该函数中，我需要显示带有详细信息的列表或仅显示列表屏幕，具体取决于可用宽度。如何确定我想要使用 Jetpack Compose 显示的内容的可用宽度？使用 Compose 的良好做法是什么？

class MyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ProjectTheme {
                MyApp()
            }
        }
    }
}

@Composable
fun MyApp() {
    val isLarge: Boolean = ...// how to determine whether the available width is large enough?
    if (isLarge) {
        ListScreenWithDetails()
    } else {
        ListScreen()
    }
}

@Composable
fun ProjectTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    // ... project theme
}

Answer 1

您可以使用：

val configuration = LocalConfiguration.current

然后：

val isLargeWidth = configuration.screenWidthDp > 840

Answer 2

对于通用解决方案，请考虑使用窗口大小类，请参阅 this 和 this 以供参考。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        val windowSizeClass = calculateWindowSizeClass(this)
        MyApp(windowSizeClass)
    }
}