Android Compose: проблемы с шириной содержимого всплывающего окна и расположением стрелок в библиотеке skydoves/Balloon ⇐ Android

[Anonymous]

Описание проблемы
Я использую библиотеку com.skydoves.balloon.compose в своем проекте Android Compose для отображения всплывающих подсказок. Я столкнулся с двумя проблемами:

• Проблема с шириной: содержимое внутри ballContent не занимает всю ширину контейнера всплывающего окна, оставляя неиспользуемое пространство.
• Позиционирование стрелки: Стрелка всплывающего окна центрируется, а не выравнивается со значком информации, который вызывает всплывающую подсказку.

Ожидаемое поведение

• Содержимое всплывающего окна должно занимать всю ширину контейнера всплывающего сообщения
• Стрелка всплывающего сообщения должна совпадать со значком информации, а не центрироваться на всплывающем сообщении

Текущее Поведение

• Содержимое кажется уже ширины всплывающего окна, создавая нежелательные поля/отступы.
• Стрелка появляется в центре всплывающего окна, а не указывает на значок с информацией о срабатывании

Пример кода

Код: Выделить всё

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)
}
}

Скриншоты
Скриншоты, показывающие как проблему с шириной, так и смещение стрелок:
Версия библиотеки: 1.6.13
Что я пробовал

• Добавление Modifier.fillMaxWidth() для составных элементов содержимого
• Регулировка значений отступов и полей
• Различные конфигурации конструктора всплывающих окон
• Добавлен цветной фон для отладки: черный фон для BalloonContent и желтый фон для Balloon для визуализации распределение пространства
• Экспериментируем с различными значениями setArrowPosition()

Вопросы:

• Как сделать так, чтобы ballContent занимал всю ширину контейнера всплывающего окна?
• Как выровнять стрелку всплывающей подсказки по значку информации, а не центрировать ее по центру всплывающей подсказки?

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-skydoves