Подсказка

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Используйте всплывающие подсказки , чтобы добавить контекст к кнопке или другому элементу пользовательского интерфейса. Существует два типа всплывающих подсказок:

• Простые подсказки : опишите элементы или действия кнопок со значками.
• Расширенные подсказки : предоставьте более подробную информацию, например, опишите значение функции. Также может включать необязательный заголовок, ссылку и кнопки.

поверхность API

Вы можете использовать составной TooltipBox для реализации всплывающих подсказок в вашем приложении. Вы управляете внешним видом TooltipBox с помощью следующих основных параметров:

• positionProvider : размещает всплывающую подсказку относительно содержимого привязки. Обычно вы используете поставщика позиций по умолчанию из TooltipDefaults или можете предоставить свой собственный, если вам нужна пользовательская логика позиционирования.
• tooltip : составной объект, содержащий содержимое всплывающей подсказки. Обычно вы используете составные элементы PlainTooltip или RichTooltip .
  • Используйте PlainTooltip для описания элементов или действий кнопок со значками.
  • Используйте RichTooltip , чтобы предоставить более подробную информацию, например, описать ценность функции. Богатые всплывающие подсказки могут включать в себя необязательный заголовок, ссылку и кнопки.
• state : держатель состояния, который содержит логику пользовательского интерфейса и состояние элемента для этой всплывающей подсказки.
• content : составной контент, к которому привязана всплывающая подсказка.

Отображение простой всплывающей подсказки

Используйте простую подсказку, чтобы кратко описать элемент пользовательского интерфейса. Этот фрагмент кода отображает простую всплывающую подсказку поверх кнопки со значком с надписью «Добавить в избранное»:

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox генерирует простую всплывающую подсказку с текстом «Добавить в избранное».
  • TooltipDefaults.rememberPlainTooltipPositionProvider() обеспечивает позиционирование по умолчанию для простых всплывающих подсказок.
  • tooltip — это лямбда-функция, которая определяет содержимое всплывающей подсказки с помощью компонуемого PlainTooltip .
  • Text(plainTooltipText) отображает текст во всплывающей подсказке.
  • tooltipState управляет состоянием всплывающей подсказки.
• IconButton создает кликабельную кнопку со значком.
  • Icon(...) отображает значок сердечка внутри кнопки.
  • Когда пользователь взаимодействует с IconButton , всплывающая подсказка отображается с текстом «Добавить в избранное». В зависимости от устройства пользователи могут активировать всплывающую подсказку следующими способами:
  • Наведение курсора на иконку
  • Длительное нажатие значка на мобильном устройстве

Результат

В этом примере создается простая всплывающая подсказка поверх значка:

Отображение расширенной всплывающей подсказки

Используйте расширенную подсказку, чтобы предоставить дополнительный контекст элемента пользовательского интерфейса. В этом примере создается многострочная всплывающая подсказка с заголовком, привязанным к Icon :

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox обрабатывает прослушиватели событий для взаимодействия с пользователем и соответствующим образом обновляет TooltipState . Когда TooltipState указывает, что всплывающая подсказка должна отображаться, выполняется лямбда-выражение подсказки и отображается RichTooltip . TooltipBox действует как привязка и контейнер как для содержимого, так и для всплывающей подсказки.
  • В данном случае содержимым является компонент IconButton , который обеспечивает поведение действия, которое можно нажимать. При длительном нажатии (на сенсорных устройствах) или наведении курсора мыши (например, указателя мыши) на любое место содержимого TooltipBox отображается всплывающая подсказка для отображения дополнительной информации.
• Компонуемый элемент RichTooltip определяет содержимое всплывающей подсказки, включая заголовок и основной текст. TooltipDefaults.rememberRichTooltipPositionProvider() предоставляет информацию о местоположении для расширенных всплывающих подсказок.

Результат

В этом примере создается обширная всплывающая подсказка с заголовком, прикрепленным к значку информации:

Настройте расширенную подсказку

Этот фрагмент кода отображает обширную всплывающую подсказку с заголовком, настраиваемыми действиями и настраиваемым курсором (стрелкой), отображаемым поверх кнопки со значком камеры:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
                caretSize = DpSize(32.dp, 16.dp)
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• RichToolTip отображает всплывающую подсказку с заголовком и действием закрытия.
• При активации путем длительного нажатия или наведения указателя мыши на содержимое ToolTipBox всплывающая подсказка отображается примерно на одну секунду. Вы можете закрыть эту подсказку, нажав в другом месте экрана или нажав кнопку действия «Отклонить».
• Когда действие отклонения выполняется, запускается сопрограмма для вызова tooltipState.dismiss . Это гарантирует, что выполнение действия не будет заблокировано во время отображения всплывающей подсказки.
• onClick = coroutineScope.launch { tooltipState.show() } } запускает сопрограмму для ручного отображения всплывающей подсказки с помощью tooltipState.show .
• Параметр action позволяет добавлять интерактивные элементы во всплывающую подсказку, например кнопку.
• Параметр caretSize изменяет размер стрелки подсказки.

Результат

Этот пример дает следующее:

Дополнительные ресурсы

• Материальный дизайн: подсказки

Используйте всплывающие подсказки , чтобы добавить контекст к кнопке или другому элементу пользовательского интерфейса. Существует два типа всплывающих подсказок:

• Простые подсказки : опишите элементы или действия кнопок со значками.
• Расширенные подсказки : предоставьте более подробную информацию, например, опишите значение функции. Также может включать необязательный заголовок, ссылку и кнопки.

поверхность API

Вы можете использовать составной TooltipBox для реализации всплывающих подсказок в вашем приложении. Вы управляете внешним видом TooltipBox с помощью следующих основных параметров:

• positionProvider : размещает всплывающую подсказку относительно содержимого привязки. Обычно вы используете поставщика позиций по умолчанию из TooltipDefaults или можете предоставить свой собственный, если вам нужна пользовательская логика позиционирования.
• tooltip : составной объект, содержащий содержимое всплывающей подсказки. Обычно вы используете составные элементы PlainTooltip или RichTooltip .
  • Используйте PlainTooltip для описания элементов или действий кнопок со значками.
  • Используйте RichTooltip , чтобы предоставить более подробную информацию, например, описать ценность функции. Богатые всплывающие подсказки могут включать в себя необязательный заголовок, ссылку и кнопки.
• state : держатель состояния, который содержит логику пользовательского интерфейса и состояние элемента для этой всплывающей подсказки.
• content : составной контент, к которому привязана всплывающая подсказка.

Отображение простой всплывающей подсказки

Используйте простую подсказку, чтобы кратко описать элемент пользовательского интерфейса. Этот фрагмент кода отображает простую всплывающую подсказку поверх кнопки со значком с надписью «Добавить в избранное»:

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox генерирует простую всплывающую подсказку с текстом «Добавить в избранное».
  • TooltipDefaults.rememberPlainTooltipPositionProvider() обеспечивает позиционирование по умолчанию для простых всплывающих подсказок.
  • tooltip — это лямбда-функция, которая определяет содержимое всплывающей подсказки с помощью компонуемого PlainTooltip .
  • Text(plainTooltipText) отображает текст во всплывающей подсказке.
  • tooltipState управляет состоянием всплывающей подсказки.
• IconButton создает кликабельную кнопку со значком.
  • Icon(...) отображает значок сердечка внутри кнопки.
  • Когда пользователь взаимодействует с IconButton , всплывающая подсказка отображается с текстом «Добавить в избранное». В зависимости от устройства пользователи могут активировать всплывающую подсказку следующими способами:
  • Наведение курсора на иконку
  • Длительное нажатие значка на мобильном устройстве

Результат

В этом примере создается простая всплывающая подсказка поверх значка:

Отображение расширенной всплывающей подсказки

Используйте расширенную подсказку, чтобы предоставить дополнительный контекст элемента пользовательского интерфейса. В этом примере создается многострочная всплывающая подсказка с заголовком, привязанным к Icon :

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox обрабатывает прослушиватели событий для взаимодействия с пользователем и соответствующим образом обновляет TooltipState . Когда TooltipState указывает, что всплывающая подсказка должна отображаться, выполняется лямбда-выражение подсказки и отображается RichTooltip . TooltipBox действует как привязка и контейнер как для содержимого, так и для всплывающей подсказки.
  • В данном случае содержимым является компонент IconButton , который обеспечивает поведение действия, которое можно нажимать. При длительном нажатии (на сенсорных устройствах) или наведении курсора мыши (например, указателя мыши) на любое место содержимого TooltipBox отображается всплывающая подсказка для отображения дополнительной информации.
• Компонуемый элемент RichTooltip определяет содержимое всплывающей подсказки, включая заголовок и основной текст. TooltipDefaults.rememberRichTooltipPositionProvider() предоставляет информацию о местоположении для расширенных всплывающих подсказок.

Результат

В этом примере создается обширная всплывающая подсказка с заголовком, прикрепленным к значку информации:

Настройте расширенную подсказку

Этот фрагмент кода отображает обширную всплывающую подсказку с заголовком, настраиваемыми действиями и настраиваемым курсором (стрелкой), отображаемым поверх кнопки со значком камеры:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
                caretSize = DpSize(32.dp, 16.dp)
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• RichToolTip отображает всплывающую подсказку с заголовком и действием закрытия.
• При активации путем длительного нажатия или наведения указателя мыши на содержимое ToolTipBox всплывающая подсказка отображается примерно на одну секунду. Вы можете закрыть эту подсказку, нажав в другом месте экрана или нажав кнопку действия «Отклонить».
• Когда действие отклонения выполняется, запускается сопрограмма для вызова tooltipState.dismiss . Это гарантирует, что выполнение действия не будет заблокировано во время отображения всплывающей подсказки.
• onClick = coroutineScope.launch { tooltipState.show() } } запускает сопрограмму для ручного отображения всплывающей подсказки с помощью tooltipState.show .
• Параметр action позволяет добавлять интерактивные элементы во всплывающую подсказку, например кнопку.
• Параметр caretSize изменяет размер стрелки подсказки.

Результат

Этот пример дает следующее:

Дополнительные ресурсы

• Материальный дизайн: подсказки

Используйте всплывающие подсказки , чтобы добавить контекст к кнопке или другому элементу пользовательского интерфейса. Существует два типа всплывающих подсказок:

• Простые всплывающие подсказки : опишите элементы или действия кнопок со значками.
• Богатые подсказки : предоставьте более подробную информацию, например, опишите значение функции. Также может включать необязательный заголовок, ссылку и кнопки.

поверхность API

Вы можете использовать составной TooltipBox для реализации всплывающих подсказок в вашем приложении. Вы управляете внешним видом TooltipBox с помощью следующих основных параметров:

• positionProvider : размещает всплывающую подсказку относительно содержимого привязки. Обычно вы используете поставщика позиций по умолчанию из TooltipDefaults или можете предоставить свой собственный, если вам нужна пользовательская логика позиционирования.
• tooltip : составной объект, содержащий содержимое всплывающей подсказки. Обычно вы используете составные элементы PlainTooltip или RichTooltip .
  • Используйте PlainTooltip для описания элементов или действий кнопок со значками.
  • Используйте RichTooltip , чтобы предоставить более подробную информацию, например, описать ценность функции. Богатые всплывающие подсказки могут включать в себя необязательный заголовок, ссылку и кнопки.
• state : держатель состояния, который содержит логику пользовательского интерфейса и состояние элемента для этой всплывающей подсказки.
• content : составной контент, к которому привязана всплывающая подсказка.

Отображение простой всплывающей подсказки

Используйте простую подсказку, чтобы кратко описать элемент пользовательского интерфейса. Этот фрагмент кода отображает простую всплывающую подсказку поверх кнопки со значком с надписью «Добавить в избранное»:

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox генерирует простую всплывающую подсказку с текстом «Добавить в избранное».
  • TooltipDefaults.rememberPlainTooltipPositionProvider() обеспечивает позиционирование по умолчанию для простых всплывающих подсказок.
  • tooltip — это лямбда-функция, которая определяет содержимое всплывающей подсказки с помощью компонуемого PlainTooltip .
  • Text(plainTooltipText) отображает текст во всплывающей подсказке.
  • tooltipState управляет состоянием всплывающей подсказки.
• IconButton создает кликабельную кнопку со значком.
  • Icon(...) отображает значок сердечка внутри кнопки.
  • Когда пользователь взаимодействует с IconButton , всплывающая подсказка отображается с текстом «Добавить в избранное». В зависимости от устройства пользователи могут активировать всплывающую подсказку следующими способами:
  • Наведение курсора на иконку
  • Длительное нажатие значка на мобильном устройстве

Результат

В этом примере создается простая всплывающая подсказка поверх значка:

Отображение расширенной всплывающей подсказки

Используйте расширенную подсказку, чтобы предоставить дополнительный контекст элемента пользовательского интерфейса. В этом примере создается многострочная всплывающая подсказка с заголовком, привязанным к Icon :

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox обрабатывает прослушиватели событий для взаимодействия с пользователем и соответствующим образом обновляет TooltipState . Когда TooltipState указывает, что всплывающая подсказка должна отображаться, выполняется лямбда-выражение подсказки и отображается RichTooltip . TooltipBox действует как привязка и контейнер как для содержимого, так и для всплывающей подсказки.
  • В данном случае содержимым является компонент IconButton , который обеспечивает поведение действия, которое можно нажимать. При длительном нажатии (на сенсорных устройствах) или наведении курсора мыши (например, указателя мыши) на любое место содержимого TooltipBox отображается всплывающая подсказка для отображения дополнительной информации.
• Компонуемый элемент RichTooltip определяет содержимое всплывающей подсказки, включая заголовок и основной текст. TooltipDefaults.rememberRichTooltipPositionProvider() предоставляет информацию о местоположении для расширенных всплывающих подсказок.

Результат

В этом примере создается обширная всплывающая подсказка с заголовком, прикрепленным к значку информации:

Настройте расширенную подсказку

Этот фрагмент кода отображает обширную всплывающую подсказку с заголовком, настраиваемыми действиями и настраиваемым курсором (стрелкой), отображаемым поверх кнопки со значком камеры:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
                caretSize = DpSize(32.dp, 16.dp)
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• RichToolTip отображает всплывающую подсказку с заголовком и действием закрытия.
• При активации путем длительного нажатия или наведения указателя мыши на содержимое ToolTipBox всплывающая подсказка отображается примерно на одну секунду. Вы можете закрыть эту подсказку, нажав в другом месте экрана или нажав кнопку действия «Отклонить».
• Когда действие отклонения выполняется, запускается сопрограмма для вызова tooltipState.dismiss . Это гарантирует, что выполнение действия не будет заблокировано, пока отображается всплывающая подсказка.
• onClick = coroutineScope.launch { tooltipState.show() } } запускает сопрограмму для ручного отображения всплывающей подсказки с помощью tooltipState.show .
• Параметр action позволяет добавлять интерактивные элементы во всплывающую подсказку, например кнопку.
• Параметр caretSize изменяет размер стрелки подсказки.

Результат

Этот пример дает следующее:

Дополнительные ресурсы

• Материальный дизайн: подсказки

Используйте всплывающие подсказки , чтобы добавить контекст к кнопке или другому элементу пользовательского интерфейса. Существует два типа всплывающих подсказок:

• Простые подсказки : опишите элементы или действия кнопок со значками.
• Расширенные подсказки : предоставьте более подробную информацию, например, опишите значение функции. Также может включать необязательный заголовок, ссылку и кнопки.

поверхность API

Вы можете использовать составной TooltipBox для реализации всплывающих подсказок в вашем приложении. Вы управляете внешним видом TooltipBox с помощью следующих основных параметров:

• positionProvider : размещает всплывающую подсказку относительно содержимого привязки. Обычно вы используете поставщика позиций по умолчанию из TooltipDefaults или можете предоставить свой собственный, если вам нужна пользовательская логика позиционирования.
• tooltip : составной объект, содержащий содержимое всплывающей подсказки. Обычно вы используете составные элементы PlainTooltip или RichTooltip .
  • Используйте PlainTooltip для описания элементов или действий кнопок со значками.
  • Используйте RichTooltip , чтобы предоставить более подробную информацию, например, описать ценность функции. Богатые всплывающие подсказки могут включать в себя необязательный заголовок, ссылку и кнопки.
• state : держатель состояния, который содержит логику пользовательского интерфейса и состояние элемента для этой всплывающей подсказки.
• content : составной контент, к которому привязана всплывающая подсказка.

Отображение простой всплывающей подсказки

Используйте простую подсказку, чтобы кратко описать элемент пользовательского интерфейса. Этот фрагмент кода отображает простую всплывающую подсказку поверх кнопки со значком с надписью «Добавить в избранное»:

@Composable
fun PlainTooltipExample(
    modifier: Modifier = Modifier,
    plainTooltipText: String = "Add to favorites"
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(),
        tooltip = {
            PlainTooltip { Text(plainTooltipText) }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Do something... */ }) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox генерирует простую всплывающую подсказку с текстом «Добавить в избранное».
  • TooltipDefaults.rememberPlainTooltipPositionProvider() обеспечивает позиционирование по умолчанию для простых всплывающих подсказок.
  • tooltip — это лямбда-функция, которая определяет содержимое всплывающей подсказки с помощью компонуемого PlainTooltip .
  • Text(plainTooltipText) отображает текст во всплывающей подсказке.
  • tooltipState управляет состоянием всплывающей подсказки.
• IconButton создает кликабельную кнопку со значком.
  • Icon(...) отображает значок сердечка внутри кнопки.
  • Когда пользователь взаимодействует с IconButton , всплывающая подсказка отображается с текстом «Добавить в избранное». В зависимости от устройства пользователи могут активировать всплывающую подсказку следующими способами:
  • Наведение курсора на иконку
  • Длительное нажатие значка на мобильном устройстве

Результат

В этом примере создается простая всплывающая подсказка поверх значка:

Отображение расширенной всплывающей подсказки

Используйте расширенную подсказку, чтобы предоставить дополнительный контекст элемента пользовательского интерфейса. В этом примере создается многострочная всплывающая подсказка с заголовком, привязанным к Icon :

@Composable
fun RichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text."
) {
    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) }
            ) {
                Text(richTooltipText)
            }
        },
        state = rememberTooltipState()
    ) {
        IconButton(onClick = { /* Icon button's click event */ }) {
            Icon(
                imageVector = Icons.Filled.Info,
                contentDescription = "Show more information"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• TooltipBox обрабатывает прослушиватели событий для взаимодействия с пользователем и соответствующим образом обновляет TooltipState . Когда TooltipState указывает, что всплывающая подсказка должна отображаться, выполняется лямбда-выражение подсказки и отображается RichTooltip . TooltipBox действует как привязка и контейнер как для содержимого, так и для всплывающей подсказки.
  • В данном случае содержимым является компонент IconButton , который обеспечивает поведение действия, которое можно нажимать. При длительном нажатии (на сенсорных устройствах) или наведении курсора мыши (например, указателя мыши) на любое место содержимого TooltipBox отображается всплывающая подсказка для отображения дополнительной информации.
• Компонуемый элемент RichTooltip определяет содержимое всплывающей подсказки, включая заголовок и основной текст. TooltipDefaults.rememberRichTooltipPositionProvider() предоставляет информацию о местоположении для расширенных всплывающих подсказок.

Результат

В этом примере создается обширная всплывающая подсказка с заголовком, прикрепленным к значку информации:

Настройте расширенную подсказку

Этот фрагмент кода отображает обширную всплывающую подсказку с заголовком, настраиваемыми действиями и настраиваемым курсором (стрелкой), отображаемым поверх кнопки со значком камеры:

@Composable
fun AdvancedRichTooltipExample(
    modifier: Modifier = Modifier,
    richTooltipSubheadText: String = "Custom Rich Tooltip",
    richTooltipText: String = "Rich tooltips support multiple lines of informational text.",
    richTooltipActionText: String = "Dismiss"
) {
    val tooltipState = rememberTooltipState()
    val coroutineScope = rememberCoroutineScope()

    TooltipBox(
        modifier = modifier,
        positionProvider = TooltipDefaults.rememberRichTooltipPositionProvider(),
        tooltip = {
            RichTooltip(
                title = { Text(richTooltipSubheadText) },
                action = {
                    Row {
                        TextButton(onClick = {
                            coroutineScope.launch {
                                tooltipState.dismiss()
                            }
                        }) {
                            Text(richTooltipActionText)
                        }
                    }
                },
                caretSize = DpSize(32.dp, 16.dp)
            ) {
                Text(richTooltipText)
            }
        },
        state = tooltipState
    ) {
        IconButton(onClick = {
            coroutineScope.launch {
                tooltipState.show()
            }
        }) {
            Icon(
                imageVector = Icons.Filled.Camera,
                contentDescription = "Open camera"
            )
        }
    }
}
Tooltips.kt

Ключевые моменты о коде

• RichToolTip отображает всплывающую подсказку с заголовком и действием закрытия.
• При активации путем длительного нажатия или наведения указателя мыши на содержимое ToolTipBox всплывающая подсказка отображается примерно на одну секунду. Вы можете закрыть эту подсказку, нажав в другом месте экрана или нажав кнопку действия «Отклонить».
• Когда действие отклонения выполняется, запускается сопрограмма для вызова tooltipState.dismiss . Это гарантирует, что выполнение действия не будет заблокировано во время отображения всплывающей подсказки.
• onClick = coroutineScope.launch { tooltipState.show() } } запускает сопрограмму для ручного отображения всплывающей подсказки с помощью tooltipState.show .
• Параметр action позволяет добавлять интерактивные элементы во всплывающую подсказку, например кнопку.
• Параметр caretSize изменяет размер стрелки подсказки.

Результат

Этот пример дает следующее:

Дополнительные ресурсы

• Материальный дизайн: подсказки