magnifier
Functions summary
Modifier |
Modifier.magnifier(Shows a |
android
|
Functions
Modifier.magnifier
fun Modifier.magnifier(
sourceCenter: Density.() -> Offset,
magnifierCenter: (Density.() -> Offset)? = null,
onSizeChanged: ((DpSize) -> Unit)? = null,
zoom: Float = Float.NaN,
size: DpSize = DpSize.Unspecified,
cornerRadius: Dp = Dp.Unspecified,
elevation: Dp = Dp.Unspecified,
clip: Boolean = true
): Modifier
Shows a Magnifier widget that shows an enlarged version of the content at sourceCenter relative to the current layout node.
This function returns a no-op modifier on API levels below P (28), since the framework does not support the Magnifier widget on those levels. However, even on higher API levels, not all magnifier features are supported on all platforms. Please refer to parameter explanations below to learn more about supported features on different platform versions.
This function does not allow configuration of source bounds since the magnifier widget does not support constraining to the bounds of composables.
import androidx.compose.foundation.gestures.detectDragGestures import androidx.compose.foundation.layout.Box import androidx.compose.foundation.magnifier import androidx.compose.material3.Text import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.draw.drawBehind import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.input.pointer.pointerInput // When the magnifier center position is Unspecified, it is hidden. // Hide the magnifier until a drag starts. var magnifierCenter by remember { mutableStateOf(Offset.Unspecified) } if (Build.VERSION.SDK_INT < 28) { Text("Magnifier is not supported on this platform.") } else { Box( Modifier.magnifier(sourceCenter = { magnifierCenter }, zoom = 2f) .pointerInput(Unit) { detectDragGestures( // Show the magnifier at the original pointer position. onDragStart = { magnifierCenter = it }, // Make the magnifier follow the finger while dragging. onDrag = { _, delta -> magnifierCenter += delta }, // Hide the magnifier when the finger lifts. onDragEnd = { magnifierCenter = Offset.Unspecified }, onDragCancel = { magnifierCenter = Offset.Unspecified }, ) } .drawBehind { // Some concentric circles to zoom in on. for (diameter in 2 until size.maxDimension.toInt() step 10) { drawCircle(color = Color.Black, radius = diameter / 2f, style = Stroke()) } } ) }
| Parameters | |
|---|---|
sourceCenter: Density.() -> Offset |
The offset of the center of the magnified content. Measured in pixels from the top-left of the layout node this modifier is applied to. This offset is passed to |
magnifierCenter: (Density.() -> Offset)? = null |
The offset of the magnifier widget itself, where the magnified content is rendered over the original content. Measured in density-independent pixels from the top-left of the layout node this modifier is applied to. If left null or returns an |
onSizeChanged: ((DpSize) -> Unit)? = null |
An optional callback that will be invoked when the magnifier widget is initialized to report on its actual size. This can be useful when |
zoom: Float = Float.NaN |
See |
size: DpSize = DpSize.Unspecified |
See |
cornerRadius: Dp = Dp.Unspecified |
See |
elevation: Dp = Dp.Unspecified |
See |
clip: Boolean = true |
See |