Opens a popup with the given content.
@Composable
fun PopupSample() {
Box {
val popupWidth = 200.dp
val popupHeight = 50.dp
val cornerSize = 16.dp
Popup(alignment = Alignment.Center) {
// Draw a rectangle shape with rounded corners inside the popup
Box(
Modifier.size(popupWidth, popupHeight)
.background(Color.White, RoundedCornerShape(cornerSize))
)
}
}
}
@Composable
fun PopupWithPositionProviderSample() {
val dropdownPopupPositioner = remember {
object : PopupPositionProvider {
override fun calculatePosition(
anchorBounds: IntRect,
windowSize: IntSize,
layoutDirection: LayoutDirection,
popupContentSize: IntSize,
): IntOffset {
// Position the popup below the anchor aligned horizontally with the anchor's
// center.
return IntOffset(
x = anchorBounds.left + anchorBounds.width / 2,
y = anchorBounds.top + anchorBounds.height * 2,
)
}
}
}
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Box(modifier = Modifier.background(Color.LightGray).padding(10.dp)) {
BasicText(text = "Anchor")
Popup(popupPositionProvider = dropdownPopupPositioner) {
Box(
modifier =
Modifier.background(Color.Green, RoundedCornerShape(16.dp)).padding(10.dp),
contentAlignment = Alignment.Center,
) {
BasicText(text = "Popup")
}
}
}
}
}