android compose TooltipBox 工具提示 使用

android compose TooltipBox 工具提示 使用您可以使用 TooltipBox 可组合项在应用中实现工具提示。 您可以使用以下主要参数控制 TooltipBox 的外观positionProvider相对于锚点内容放置工具提示。您通常使用TooltipDefaults中的默认位置提供程序或者如果您需要自定义定位逻辑也可以提供自己的位置提供程序。tooltip包含工具提示内容的可组合项。您通常使用PlainTooltip或RichTooltip可组合项。使用PlainTooltip描述图标按钮的元素或操作。使用RichTooltip提供更多详细信息例如描述特征的值。富工具提示可以包含可选的标题、链接和按钮。state包含此工具提示的界面逻辑和元素状态的状态容器。content工具提示所锚定的可组合内容。代码要点TooltipBox生成一个包含文本“添加到收藏夹”的工具提示。TooltipDefaults.rememberPlainTooltipPositionProvider() 为普通工具提示提供默认定位。tooltip是一个 lambda 函数用于使用 PlainTooltip 可组合项定义工具提示的内容。Text(plainTooltipText)在工具提示中显示文本。tooltipState 控制工具提示的状态。IconButton创建一个带有图标的可点击按钮。Icon(...)在按钮内显示一个心形图标。当用户与IconButton互动时TooltipBox会显示包含文本“添加到收藏夹”的工具提示。根据设备的不同用户可以通过以下方式触发工具提示将光标悬停在图标上在移动设备上长按图标package com.wn.androidcomposedemo1.basegoogle import android.os.Bundle import android.util.Log import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Call import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Info import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.PlainTooltip import androidx.compose.material3.RichTooltip import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.material3.TooltipBox import androidx.compose.material3.TooltipDefaults import androidx.compose.material3.rememberTooltipState import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme import kotlinx.coroutines.launch /** * Author : wn * Email : maoning20080808163.com * Date : 2026/6/28 23:33 * Description : 工具提示 */ class TooltipBoxActivity : ComponentActivity(){ override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { AndroidComposeDemo1Theme() { Surface( modifier Modifier.fillMaxSize(), color MaterialTheme.colorScheme.background ) { TooltipDemo() } } } } Preview Composable fun TooltipDemo(){ Column( horizontalAlignment Alignment.CenterHorizontally, modifier Modifier.fillMaxSize() ) { Spacer(Modifier.height(20.dp)) Text(富文本工具提示, fontSize 30.sp, color Color.Red) Spacer(Modifier.height(20.dp)) PlainTooltipExample() Spacer(Modifier.height(20.dp)) RichTooltipExample() Spacer(Modifier.height(20.dp)) AdvancedRichTooltipExample() } } OptIn(ExperimentalMaterial3Api::class) Preview Composable fun PlainTooltipExample(){ val plainTooltipText 添加喜欢 //长按提示 TooltipBox( modifier Modifier.wrapContentWidth(), positionProvider TooltipDefaults.rememberPlainTooltipPositionProvider(), tooltip { PlainTooltip() { Text(plainTooltipText) } }, state rememberTooltipState() ) { IconButton( onClick { Log.d(AAA, 点击图标) } ) { Icon( imageVector Icons.Filled.Favorite, contentDescription 添加喜欢图标2 ) } } } OptIn(ExperimentalMaterial3Api::class) Preview Composable fun RichTooltipExample(){ val richTooltipTitle 富文本标题 val richTooltipText 富文本内容 //长按提示 TooltipBox( modifier Modifier.wrapContentWidth(), positionProvider TooltipDefaults.rememberRichTooltipPositionProvider(), tooltip { RichTooltip( title {Text(richTooltipTitle)} ) { Text(richTooltipText) } }, state rememberTooltipState() ) { IconButton(onClick { }) { Icon( imageVector Icons.Filled.Info, contentDescription 显示更多信息 ) } } } /** * 自定义富文本工具提示 */ OptIn(ExperimentalMaterial3Api::class) Preview Composable fun AdvancedRichTooltipExample(){ val richTooltipTitle 自定义富文本标题 val richToolTipText 自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容自定义富文本内容 val richTooltipActionText 取消 val tooltipState rememberTooltipState() val coroutineScope rememberCoroutineScope () TooltipBox( modifier Modifier.wrapContentWidth(), positionProvider TooltipDefaults.rememberRichTooltipPositionProvider(), tooltip { RichTooltip( title {Text(richTooltipTitle)}, action { Row() { TextButton(onClick { coroutineScope.launch { tooltipState.dismiss() } }) { Text(richTooltipActionText) } } } ) { Text(richToolTipText) } }, state tooltipState ) { IconButton(onClick { coroutineScope.launch { tooltipState.show() } }) { Icon( imageVector Icons.Filled.Call, contentDescription 拨打电话 ) } } } }