工具提示
您可以使用TooltipArea可组合项为任何组件添加工具提示。 TooltipArea类似于Box组件，能够显示工具提示。
TooltipArea可组合项包含以下主要参数：
tooltip，工具提示的可组合内容。tooltipPlacement，定义工具提示位置。可指定锚点（鼠标光标或组件）、偏移量和对齐方式。delayMillis，工具提示显示前的延迟时间（毫秒）。默认值为500毫秒。
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.TooltipArea
import androidx.compose.foundation.TooltipPlacement
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(
WindowState(width = 300.dp, height = 350.dp),
title = "Tooltip Example"
) {
val buttons = listOf("Button A", "Button B", "Button C", "Button D", "Button E", "Button F")
Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
buttons.forEachIndexed { index, name ->
// 将按钮包裹在TooltipArea中
TooltipArea(
tooltip = {
// 可组合的工具提示内容：
Surface(
modifier = Modifier.shadow(4.dp),
color = Color(255, 255, 210),
shape = RoundedCornerShape(4.dp)
) {
Text(
text = "Tooltip for $name",
modifier = Modifier.padding(10.dp)
)
}
},
modifier = Modifier.padding(start = 40.dp),
delayMillis = 600, // 单位毫秒
tooltipPlacement = TooltipPlacement.CursorPoint(
alignment = Alignment.BottomEnd,
offset = if (index % 2 == 0) DpOffset(
(-16).dp,
0.dp
) else DpOffset.Zero // 工具提示偏移量
)
) {
Button(onClick = {}) { Text(text = name) }
}
}
}
}
下一步？
探索关于其他桌面组件的教程。
23 四月 2025