जेटपैक कंपोज़ में टूलटिप्स का उपयोग करना:चरण-दर-चरण मार्गदर्शिका

1. <पी> सादा टूलटिप

2. <पी> रिच मीडिया टूलटिप

सादा टूलटिप

fun TooltipBox(
 positionProvider: PopupPositionProvider,
 tooltip: @Composable TooltipScope.() -> Unit,
 state: TooltipState,
 modifier: Modifier = Modifier,
 focusable: Boolean = true,
 enableUserInput: Boolean = true,
 content: @Composable () -> Unit,
)

• <पी> पोजीशनप्रोवाइडर - पॉपअपपोजिशनप्रोवाइडर का प्रकार, और टूलटिप की स्थिति की गणना करने के लिए उपयोग किया जाता है।

• <पी> टूलटिप - यह वह जगह है जहां आप यूआई डिज़ाइन कर सकते हैं कि टूलटिप कैसा दिखेगा।

• <पी> राज्य - यह वह राज्य रखता है जो एक विशिष्ट टूलटिप इंस्टेंस से जुड़ा होता है। यह टूलटिप को दिखाने/खारिज करने जैसे तरीकों को उजागर करता है और किसी एक उदाहरण को इंस्टेंट करते समय, आप यह घोषित कर सकते हैं कि टूलटिप लगातार बनी रहनी चाहिए या नहीं (मतलब यह तब तक स्क्रीन पर प्रदर्शित होती रहनी चाहिए जब तक कोई उपयोगकर्ता टूलटिप के बाहर क्लिक कार्रवाई नहीं करता)।

• <पी> सामग्री - यह यूआई है जिसे टूलटिप ऊपर/नीचे प्रदर्शित करेगा।

@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterial3Api::class)
@Composable
fun BasicTooltip() {
 val tooltipPosition = TooltipDefaults.rememberPlainTooltipPositionProvider()
 val tooltipState = rememberBasicTooltipState(isPersistent = false)
 BasicTooltipBox(positionProvider = tooltipPosition,
 tooltip = { Text("Hello World") } ,
 state = tooltipState) {
 IconButton(onClick = { }) {
 Icon(imageVector = Icons.Filled.Favorite, 
 contentDescription = "Your icon's description")
 }
 }
}

रिच टूलटिप

TooltipBox(positionProvider = tooltipPosition,
 tooltip = {
 RichTooltip(
 title = { Text("RichTooltip") },
 caretSize = caretSize,
 action = {
 TextButton(onClick = {
 scope.launch {
 tooltipState.dismiss()
 tooltipState.onDispose()
 }
 }) {
 Text("Dismiss")
 }
 }
 ) {
 Text("This is where a description would go.")
 }
 },
 state = tooltipState) {
 IconButton(onClick = {
 /* Icon button's click event */
 }) {
 Icon(imageVector = tooltipIcon,
 contentDescription = "Your icon's description",
 tint = iconColor)
 }
 }

1. <पी> रिच टूलटिप में कैरेट के लिए समर्थन होता है।

2. <पी> आप उपयोगकर्ताओं को अधिक जानकारी प्राप्त करने का विकल्प देने के लिए टूलटिप में एक क्रिया (अर्थात् एक बटन) जोड़ सकते हैं।

3. <पी> आप टूलटिप को ख़ारिज करने के लिए तर्क जोड़ सकते हैं।

एज केस

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RichTooltip() {
 val tooltipPosition = TooltipDefaults.rememberRichTooltipPositionProvider()
 val tooltipState = rememberTooltipState(isPersistent = true)
 val scope = rememberCoroutineScope()
 TooltipBox(positionProvider = tooltipPosition,
 tooltip = {
 RichTooltip(
 title = { Text("RichTooltip") },
 caretSize = TooltipDefaults.caretSize,
 action = {
 TextButton(onClick = {
 scope.launch {
 tooltipState.dismiss()
 tooltipState.onDispose() /// <---- HERE
 }
 }) {
 Text("Dismiss")
 }
 }
 ) {
 }
 },
 state = tooltipState) {
 IconButton(onClick = { }) {
 Icon(imageVector = Icons.Filled.Call, contentDescription = "Your icon's description")
 }
 }
}

संदर्भ

• <पी> मटेरियल3 टूलटिप अवलोकन
• <पी> टूलटिप डिफ़ॉल्ट

• <पी> टूलटिप स्रोत कोड