Как я могу сделать переполнение дочернего изображения за пределами границ его родительской строки в Jetpack Compose (ана ⇐ Android

[Anonymous]

Я создаю динамический пользовательский интерфейс Jetpack Compose, в котором макеты управляются конфигурацией JSON.
Каждый контейнер может быть вертикальным (столбец) или горизонтальным (строка), а такие компоненты, как текст, значки и изображения, отображаются на основе атрибутов JSON.
Вот упрощенный пример моего JSON:

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

{
"id": "productWrapper4",
"direction": "horizontal",
"components": [
{
"id": "rockiesLogo",
"width": 130,
"component": "image",
"url": "https://example.com/rockies-tv.png"
},
{
"id": "addIcon",
"component": "icon",
"name": "add"
},
{
"id": "mlbLogo",
"width": "100%",
"height": "100%",
"alignment": "left",
"component": "image",
"url": "https://example.com/mlb-tv.png"
}
]
}

В iOS (SwiftUI) изображение mlbLogo может визуально выходить за правый край горизонтального контейнера (и даже за пределы экрана).
Но в Android Jetpack Compose оно всегда масштабируется или обрезается, чтобы соответствовать ширине строки.
Вот что я получаю:





Платформа
Результат




iOS (SwiftUI)
Изображение MLB.TV выходит за край карточки (переполнение разрешено).


Android (Compose)
Изображение остается полностью внутри строки, уменьшаясь до нужного размера.



Ожидаемое (ссылка на iOS):


Моя текущая реализация Compose

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

Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(0.dp)
) {
AsyncImage(
model = "https://example.com/rockies-tv.png",
contentDescription = null,
modifier = Modifier.width(130.dp)
)

Icon(Icons.Default.Add, contentDescription = null)

// MLB.TV logo — should overflow like in iOS
AsyncImage(
model = "https://example.com/mlb-tv.png",
contentDescription = null,
modifier = Modifier
.fillMaxWidth()
.graphicsLayer(clip = false), // Tried clip=false
contentScale = ContentScale.Fit,
alignment = Alignment.CenterStart
)
}

Я также пробовал:

• Box-обертки с GraphicsLayer(clip = false) ~ хотя по умолчанию установлено значение false
• Пользовательский макет {} с Constraints.Infinity
• Использование всплывающего окна, привязанного к изображению
• Подкомпоновка макеты
• Использование отрицательных полей/смещений

Но ни один из них не позволяет изображению выйти за пределы ограничений измерения родительской строки.
Похоже, что Compose применяет ограничения ширины во время измерения, поэтому изображение никогда не отображается за пределами родительского элемента.
Вопрос
Как сделать так, чтобы компонуемый дочерний элемент (в данном случае изображение) визуально переполнялся вправо, за пределы измеренной ширины родительской строки — аналогично тому, как SwiftUI позволяет представлениям рисовать за пределами границ контейнера?
В идеале:
Родительский макет не должен расширяться, чтобы соответствовать размеру overflow.
Рядовые элементы в ряду не должны смещаться.
Только переполняющее изображение должно отображаться за пределами ширины родительского элемента.
Работает с динамическими макетами JSON (контейнеры создаются рекурсивно).>

Подробнее здесь: https://stackoverflow.com/questions/797 ... jetpack-co