TransformingLazyColumn
You will need the following imports:
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.TransformingLazyColumnDefaults
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
Canonical example:
val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
scrollState = columnState
) { contentPadding ->
TransformingLazyColumn(
state = columnState,
contentPadding = contentPadding
) {
item {
ListHeader(
modifier = Modifier
.fillMaxWidth()
.transformedHeight(this, transformationSpec)
.minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
transformation = SurfaceTransformation(transformationSpec)
) {
Text(text = "Header")
}
}
item {
Button(
modifier = Modifier
.fillMaxWidth()
.transformedHeight(this, transformationSpec)
.minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
transformation = SurfaceTransformation(transformationSpec),
onClick = { },
icon = {
Icon(
imageVector = Icons.Default.Build,
contentDescription = "build",
)
},
) {
Text(
text = "Build",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
}
}
}
- [ ] Use
TransformingLazyColumn instead of ScalingLazyColumn
- [ ] You must pass the
contentPadding parameter from ScreenScaffold to the TransformingLazyColumn.
- [ ] Use the
minimumVerticalContentPadding modifier to achieve required padding top and bottom.
- This expects a value from defaults, such as
ButtonDefaults, CardDefaults, `ListHeaderDefaults.
- Note: This is a scoped modifier available within
TransformingLazyColumnItemScope.
- [ ] Ensure the list morphs and scales.
- [ ] Use
transformedHeight modifier.
- [ ] Use
transform = SurfaceTransform(...).
- [ ] If configuring a list for snapping, use
flingBehavior and rotaryScrollableBehavior together:
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) { contentPadding ->
TransformingLazyColumn(
state = columnState,
flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState),
rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(columnState)
) {
}
}
EdgeButton
- [ ] Do NOT use as the final item within a
TransformingLazyColumn. Instead, use the slot in ScreenScaffold.
- [ ] When used in a
TransformingLazyColumn, add the required overscroll behavior:
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(
scrollState = columnState,
edgeButton = {
EdgeButton(
onClick = { },
modifier = Modifier.scrollable(
columnState,
orientation = Orientation.Vertical,
reverseDirection = true,
overscrollEffect = rememberOverscrollEffect(),
)
) {
Text("More")
}
}
) { contentPadding ->
TransformingLazyColumn(
contentPadding = contentPadding,
state = columnState,
) {
}
}
