rememberDragToResizeState

Functions summary

DragToResizeState
@Composable
rememberDragToResizeState(dockedEdge: DockedEdge, minSize: Dp, maxSize: Dp)

Creates and remembers a DragToResizeState instance.
Cmn

Functions

rememberDragToResizeState

Cmn 
@Composable
fun rememberDragToResizeState(
    dockedEdge: DockedEdge,
    minSize: Dp = Dp.Unspecified,
    maxSize: Dp = Dp.Unspecified
): DragToResizeState

Creates and remembers a DragToResizeState instance.

This function creates a state object that tracks and controls the resizing behavior of a composable element via dragging. The state is saved and restored across recompositions and configuration changes using rememberSaveable.

To support the drag-to-resize behavior, provide DragToResizeState objects when creating AdaptStrategy.Levitate instances and provide a drag handle to the AnimatedPane composable, which will show the drag handle and associate it with the state object when it's levitated, so the pane will act like a modal sheet, and users can drag or click the drag handle to resize the pane.

Note that with the default implementation, clicking the drag handle will make the associated pane go through three states: collapsed, partially expanded, and expanded. When in the expanded state, the pane will be displayed in its maximum possible size, bounded by the scaffold's size and the maximum size set via rememberDragToResizeState. When in the collapsed state, the associated pane will be displayed in its minimum size set via rememberDragToResizeState. And in the partially expanded size, the pane will be displayed in its default size or the size set by user with dragging.

import androidx.compose.foundation.background
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsBottomSheetSample<NavItemData>()
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        AnimatedPane {
            MainPaneContent(
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
    },
    extraPane = {
        AnimatedPane(
            modifier =
                Modifier.preferredWidth(1f)
                    .preferredHeight(0.5f)
                    .background(MaterialTheme.colorScheme.surface),
            dragToResizeHandle = { BottomSheetDefaults.DragHandle() },
        ) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
Parameters
dockedEdge: DockedEdge

The edge to which the element is docked. This determines the orientation of the resizing operation (horizontal or vertical) and the direction of the size change when dragging.
minSize: Dp = Dp.Unspecified

The minimum allowed size for the resizable element, as a Dp. Defaults to Dp.Unspecified, which instructs scaffold to use its default setting.
maxSize: Dp = Dp.Unspecified

The maximum allowed size for the resizable element, as a Dp. Defaults to Dp.Unspecified. Note that the dragged size cannot be larger than the scaffold's size, even if the max size set here is larger than the scaffold's size.