Всплывающие окна

Размещение всплывающего окна

Чтобы задать положение всплывающего окна, используйте alignment и offset либо собственный PopupPositionProvider для привязки к компоненту.

Для простого выравнивания:

var isPopupOpen by remember { mutableStateOf(false) }

Box(Modifier.padding(24.dp)) {
    Button(onClick = { isPopupOpen = !isPopupOpen }) {
        Text("Toggle popup")
    }

    if (isPopupOpen) {
        Popup(
            // Positions the popup relative to the button
            alignment = Alignment.TopStart,
            // Shifts the popup by (x, y) in pixels
            offset = IntOffset(30, 70),
            // Hides the popup when it is dismissed,
            // for example, when the user clicks outside it
            onDismissRequest = { isPopupOpen = false }
        ) {
            Box(
                Modifier
                    .background(Color.LightGray, RoundedCornerShape(4.dp))
                    .padding(12.dp)
            ) {
                Text("Popup content on top of UI")
            }
        }
    }
}

Для привязки к компоненту используйте PopupPositionProvider:

var isPopupOpen by remember { mutableStateOf(false) }

val belowAnchor = remember {
    object : PopupPositionProvider {
        override fun calculatePosition(
            anchorBounds: IntRect,
            windowSize: IntSize,
            layoutDirection: LayoutDirection,
            popupContentSize: IntSize
        ) = IntOffset(x = anchorBounds.left - 20, y = anchorBounds.bottom - 20)
    }
}

Column(Modifier.padding(24.dp)) {
    Box {
        Button(onClick = { isPopupOpen = !isPopupOpen }) {
            Text("Toggle menu")
        }

        if (isPopupOpen) {
            Popup(
                popupPositionProvider = belowAnchor,
                onDismissRequest = { isPopupOpen = false }
            ) {
                Box(
                    Modifier
                        .shadow(4.dp, RoundedCornerShape(4.dp))
                        .background(Color.White, RoundedCornerShape(4.dp))
                        .padding(12.dp)
                ) {
                    Text("Anchored to the button")
                }
            }
        }
    }
}

Настройка поведения

С помощью PopupProperties можно управлять получением фокуса и закрытием всплывающего окна:

• focusable определяет, получает ли всплывающее окно события клавиатуры; по умолчанию эта возможность отключена.

• dismissOnBackPress закрывает всплывающее окно при нажатии кнопки «Назад» на Android или клавиши Esc на настольном компьютере; по умолчанию эта возможность включена. Требуется focusable = true.

• dismissOnClickOutside закрывает всплывающее окно, когда пользователь нажимает за его пределами; по умолчанию эта возможность включена.

Popup() и его PopupProperties входят в общий API. Однако некоторые свойства недоступны в общем наборе исходного кода. Например, usePlatformInsets доступно на iOS, где оно ограничивает содержимое всплывающего окна системными отступами (безопасной областью).

Что дальше

Полное описание API см. в справочной документации Jetpack Compose:

• Popup()

• Dialog()