derivedMediaQuery

@ExperimentalMediaQueryApi
@Composable
fun derivedMediaQuery(query: UiMediaScope.() -> Boolean): State<Boolean>

Evaluates a boolean query against the current UiMediaScope, wrapped in a derivedStateOf.

Use this function for queries that involve frequently changing values, such as UiMediaScope.windowWidth or UiMediaScope.windowHeight. It ensures that compositions only recompose when the boolean result of the query changes, not on every small change to the underlying values (like a 1px size change).

For queries on stable properties, you can use the simpler mediaQuery function.

Parameters

Returns

Code Examples

MediaQuerySample

@Composable
fun MediaQuerySample() {
    Box(Modifier.fillMaxSize().padding(top = 100.dp)) {
        val showDualPane by derivedMediaQuery { windowWidth >= 600.dp }
        val showNavigationRail by derivedMediaQuery {
            windowWidth >= 500.dp && viewingDistance != ViewingDistance.Near
        }
        Column(Modifier.fillMaxSize()) {
            Row(Modifier.weight(1f).fillMaxWidth()) {
                if (showNavigationRail) {
                    // Show navigation rail
                    Box(Modifier.width(150.dp).background(Color.Red).fillMaxHeight())
                }
                // Actual content
                Box(Modifier.weight(1f).background(Color.Yellow).fillMaxHeight())
                if (showDualPane) {
                    // Split screen into 2 panes for additional content
                    Box(Modifier.weight(1f).background(Color.Cyan).fillMaxHeight())
                }
            }
            if (!showNavigationRail && !showDualPane) {
                // Show bottom navigation
                Box(Modifier.background(Color.Blue).height(80.dp).fillMaxWidth())
            }
        }
    }
}