Compose 组件 - 页面提示 TooltipsBox _compose类似tooltips的组件-CSDN博客

官方页面

一、概念

为按钮或其他界面元素添加说明。

TooltipBox()

@Composable
fun TooltipBox(

// 定义提示相对于锚点的位置
positionProvider: PopupPositionProvider,

// 填充提示内容
tooltip: @Composable TooltipScope.() -> Unit,

// 控制可见性
state: TooltipState,
modifier: Modifier = Modifier,

// 隐藏回调（默认点击提示外部会将其关闭）
onDismissRequest: (() -> Unit)? = null,

// 提示是否可聚焦
focusable: Boolean = false,

// 决定是否处理长按、鼠标悬停和键盘焦点，以通过提供的 state 触发工具提示
enableUserInput: Boolean = true,

// 提示是否包含操作
hasAction: Boolean = false,

// 提示所锚定的组件
content: @Composable () -> Unit,
)

rememberTooltipPositionProvider()

@Composable
fun rememberTooltipPositionProvider(
positioning: TooltipAnchorPosition, // 提示相对于锚点的方向
spacingBetweenTooltipAndAnchor: Dp = SpacingBetweenTooltipAndAnchor, // 提示和锚点的间距
): PopupPositionProvider

方向通过 TooltipAnchorPosition 调用常量，有：Above、Below、Start、End、Left、Right。

rememberTooltipState()

@Composable
fun rememberTooltipState(

// 初始化时的可见性。
initialIsVisible: Boolean = false,

// 为 true 显示一会儿自动消失，为 false 响应外部点击和调用 state.dismiss() 才会消失。
isPersistent: Boolean = false,

// 用于确保与此互斥体关联的所有工具提示中，同一时间只有一个显示在屏幕上。
mutatorMutex: MutatorMutex = BasicTooltipDefaults.GlobalMutatorMutex,
): TooltipState

二、使用

参数 tooltip，一般使用自定义组件填充就行，也可以使用官方组件。

2.1 自定义填充

@Composable
fun TTT() {
    val state = rememberTooltipState(
        initialIsVisible = true,
        isPersistent = true
    )
    val coroutineScope = rememberCoroutineScope()
    Column(
        modifier = Modifier.fillMaxSize().background(Color.Blue),
    ) {
        Box(Modifier.fillMaxWidth().height(300.dp))
        TooltipBox(
            modifier = Modifier.background(Color.Magenta),
            state = state,
            onDismissRequest = {
                coroutineScope.launch { state.dismiss() }
            },
            positionProvider = TooltipDefaults.rememberTooltipPositionProvider(
                positioning = TooltipAnchorPosition.Above,
                spacingBetweenTooltipAndAnchor = 10.dp
            ),
            tooltip = {
                Box(
                    modifier = Modifier.size(100.dp).background(Color.Cyan),
                    contentAlignment = Alignment.Center
                ) { Text("提示内容") }
            }
        ) {
            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = {
                    coroutineScope.launch { state.show() }
                }
            ) { Text("显示提示") }
        }
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = {
                coroutineScope.launch { state.dismiss() }
            }
        ) { Text("关闭提示") }
    }
}

2.2 纯文本提示组件

PlainTooltip()

@Composable
fun TooltipScope.PlainTooltip(
modifier: Modifier = Modifier,
caretShape: (Shape)? = null,
maxWidth: Dp = TooltipDefaults.plainTooltipMaxWidth,
shape: Shape = TooltipDefaults.plainTooltipContainerShape,
contentColor: Color = TooltipDefaults.plainTooltipContentColor,
containerColor: Color = TooltipDefaults.plainTooltipContainerColor,
tonalElevation: Dp = 0.dp,
shadowElevation: Dp = 0.dp,
content: @Composable () -> Unit,
)

2.3 富文本提示组件

RichTooltip()

@Composable
fun TooltipScope.RichTooltip(
modifier: Modifier = Modifier,
title: (@Composable () -> Unit)? = null,
action: (@Composable () -> Unit)? = null,
caretShape: (Shape)? = null,
maxWidth: Dp = TooltipDefaults.richTooltipMaxWidth,
shape: Shape = TooltipDefaults.richTooltipContainerShape,
colors: RichTooltipColors = TooltipDefaults.richTooltipColors(),
tonalElevation: Dp = ElevationTokens.Level0,
shadowElevation: Dp = RichTooltipTokens.ContainerElevation,
text: @Composable () -> Unit,
)