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

Question

I have an Activity and MyApp composable function. In the function I need to show either list with details or just list screen depending on the available width. How to determine available width for the content I want to show using Jetpack Compose ? What is a good practice for this using 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

You can use :

val configuration = LocalConfiguration.current

Then:

val isLargeWidth = configuration.screenWidthDp > 840

Answer 2

For a generic solution, consider using the Window Size Classes, see this and this for reference.

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

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