Android Compose: Probleme mit der Breite des Balloninhalts und der Pfeilpositionierung in der Skydoves/Balloon-Bibliothe ⇐ Android

[Anonymous]

Problembeschreibung
Ich verwende die com.skydoves.balloon.compose-Bibliothek in meinem Android Compose-Projekt, um Tooltip-Ansichten anzuzeigen. Ich stehe vor zwei Problemen:

• Breitenproblem: Der Inhalt im BalloonContent nimmt nicht die gesamte Breite des Balloncontainers ein und lässt ungenutzten Platz.
• Pfeilpositionierung: Der Ballonpfeil zentriert sich selbst, anstatt sich am Infosymbol auszurichten, das den Tooltip auslöst.

Erwartetes Verhalten

• Der Inhalt der Sprechblase sollte die gesamte Breite des Sprechblasenbehälters einnehmen
• Der Sprechblasenpfeil sollte am Infosymbol ausgerichtet sein und sich nicht auf der Sprechblase zentrieren

Aktuelles Verhalten

• Der Inhalt erscheint schmaler als die Breite der Sprechblase, wodurch unerwünschte Ränder/Abstände entstehen
• Der Pfeil erscheint in der Mitte der Sprechblase, anstatt auf das auslösende Informationssymbol zu zeigen

Codebeispiel

Code: Select all

Tooltip(modifier = Modifier.padding(top = Theme.sizes.paddingMedium),
title = uiTextResource(id = R.string.title),
message = uiTextResource(id = R.string.message),
) { balloonWindow ->
DetailItemWithInfo(
label = stringResource(R.string.label),
value = details.value,
showInfoIcon = false,
onInfoClick = {
balloonWindow.showAlignBottom()
},
modifier = Modifier.fillMaxWidth(),
)
}

@Composable
fun Tooltip(
modifier: Modifier = Modifier,
@DrawableRes icon: Int? = null,
iconTint: Color? = Theme.colors.colorOnSecondary,
title: UiText? = null,
titleStyle: TextStyle = defaultToolTipTitleStyle(),
message: UiText,
messageStyle: TextStyle = Theme.typography.bodySmallStyle.copy(
color = Theme.colors.colorOnSecondary
),
backgroundColor: Color = Theme.colors.tooltipBackgroundColor,
onDismiss: (() -> Unit)? = null,
dismissWhenClicked: Boolean = true,
dismissWhenTouchOutside: Boolean = true,
showArrow: Boolean = true,
leftMargin: Dp = Theme.sizes.paddingXXLarge,
rightMargin: Dp = Theme.sizes.paddingXXLarge,
cornerRadius: Dp = Theme.sizes.cornerRadius,
content: @Composable (BalloonWindow) ->  Unit
) {
val builder = rememberBalloonBuilder {
setElevation(0)
setArrowElevation(0)
setWidthRatio(1f)
setMarginLeft(leftMargin.value.toInt())
setMarginRight(rightMargin.value.toInt())
setHeight(BalloonSizeSpec.WRAP)
setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
setCornerRadius(cornerRadius.value)
setBackgroundColor(backgroundColor)
setBalloonAnimation(BalloonAnimation.FADE)
setLifecycleOwner(lifecycleOwner)
setIsVisibleArrow(showArrow)
setArrowOrientation(ArrowOrientation.TOP)
setDismissWhenClicked(dismissWhenClicked)
setDismissWhenTouchOutside(dismissWhenTouchOutside)
setOnBalloonDismissListener {
onDismiss?.invoke()
}
}

Balloon(
modifier = modifier.background(Color.Yellow.copy(alpha = 0.7f)), // Added yellow background for debugging
builder = builder,
balloonContent = {
Row(
modifier = Modifier
.semantics(
mergeDescendants = true
) {}
.padding(Theme.sizes.paddingMedium)
.fillMaxWidth()
.background(Color.Black.copy(alpha = 0.7f)), // Added Black background for debugging
) {
icon?.let {
Image(
res = icon,
modifier = Modifier
.padding(
top = Theme.sizes.paddingXSmall,
end = Theme.sizes.paddingSmall
)
.width(Theme.sizes.iconSmall)
.height(Theme.sizes.iconSmall),
colorFilter = if (iconTint != null) {
ColorFilter.tint(iconTint)
} else {
null
},
contentDescription = null
)
}
Column(
modifier = Modifier
.fillMaxWidth()
) {
title?.let {
Text(
modifier = Modifier
.padding(bottom = Theme.sizes.paddingSmall),
text = it,
textStyle = titleStyle
)
}
Text(
text = message,
textStyle = messageStyle
)
}
}
}
) { balloonWindow ->
content(balloonWindow)
}
}

Screenshot
Screenshot, der sowohl das Breitenproblem als auch die Pfeilfehlausrichtung zeigt
Bibliotheksversion: 1.6.13
Was ich versucht habe

• Hinzufügen von Modifier.fillMaxWidth() zu den Content Composables
• Abstands- und Randwerte anpassen
• Verschiedene Balloon-Builder-Konfigurationen
• Farbige Hintergründe zum Debuggen hinzugefügt: schwarzer Hintergrund für BalloonContent und gelber Hintergrund für Balloonzur Visualisierung der Platzzuordnung
• Experimentieren mit unterschiedlichen setArrowPosition()-Werten

Fragen:

• Wie kann ich dafür sorgen, dass der Balloninhalt die volle Breite des Balloncontainers einnimmt?
• Wie kann ich den Ballonpfeil am Infosymbol ausrichten, anstatt ihn auf dem Ballon zu zentrieren?