Как добиться этого эффекта перекрытия в компоновке Jetpack ⇐ Android

[Anonymous]

Как мне добиться этого эффекта перекрытия в компоновке Jetpack. Я пытаюсь получить точное положение и размещение, как показано на рисунке, особенно те, которые обведены синим, кнопку закрытия X и способ размещения предварительного просмотра изображения поверх текстового поля. Использование Box с Alignment.CenterStart для изображения поверх текстового поля и Alignment.TopStart для изображения с кнопкой x вверху слева не дает желаемого эффекта. Любая помощь будет оценена по достоинству.
Изображение ниже:
[img]https://i. sstatic.net/A2JpSDI8.png[/img]

Хорошо, ниже приведен прикрепленный код, а также то, что я пробовал, а также проблема, с которой я столкнулся в настоящее время.

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

@Composable
fun MessageTextField(
value: String,
placeholder: Clause,
imageUri: List?,
onCaptureImageClick: () -> Unit,
onPickImageClick: () -> Unit,
onSendButtonClick: () -> Unit,
onRemoveImageClick: (Uri) -> Unit,
onValueChange: (value: String) -> Unit
) {

val containerShape = RoundedCornerShape(
topStart = 20.dp,
topEnd = 20.dp
)

Box {
Column(
modifier = Modifier
.clip(containerShape)
.border(
width = 0.2.dp,
color = Theme.colors.border.primaryOnLight,
shape = containerShape
)
.background(color =
Theme.colors.surfaceInteractive.enabledOnLight)
.padding(
top = Theme.spacing.x3
)
) {
TextField(
value = value,
onValueChange = onValueChange,
modifier = Modifier.fillMaxWidth(),
keyboardOptions = KeyboardOptions(capitalization =
KeyboardCapitalization.Sentences),
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
unfocusedLabelColor = Color.Transparent
),
textStyle = Theme.typography.textField.copy(
fontWeight = FontWeight.Medium,
fontSize = TEXT_FONT_SIZE.sp,
),
placeholder = {
Text(clause = placeholder)
},
trailingIcon = {
IconButton(
onClick = onSendButtonClick,
enabled = if (value.isNotBlank()) true else
false,
content = {
//                            SendButton()
}
)
},
maxLines = 6
)

Column(modifier = Modifier.height(25.dp)) {
AnimatedVisibility(
visible = value.isNotBlank(),
enter = scaleIn(),
exit = scaleOut()
) {
Row(modifier = Modifier.padding(start =
Theme.spacing.x4)) {
Image(
image =
Image.Drawable(R.drawable.ic_camera),
modifier = Modifier
.size(22.dp)
.clickable {
onCaptureImageClick.invoke()
}
)
Spacer(modifier =
Modifier.width(Theme.spacing.x3))
Image(
image = Image.Drawable(R.drawable.ic_upload),
modifier = Modifier
.size(22.dp)
.clickable {
onPickImageClick.invoke()
}
)
}
}
}

Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.navigationBars))
}

Row(
modifier = Modifier
.fillMaxWidth()
.horizontalScroll(rememberScrollState())
.align(Alignment.BottomStart)
.zIndex(2f)
.graphicsLayer {
translationX = 100f
translationY = -200f
}
) {
imageUri?.forEach {
DismissibleImage(
uri = it,
onRemove = { }
)
}

}
}
}

@Composable
private fun DismissibleImage(uri: Uri, onRemove: () ->  Unit) {
Box(
modifier = Modifier.wrapContentSize()
) {

Box(
modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.background(color = Theme.colors.surface.primaryDark)
.size(DISMISSABLE_IMAGE_SIZE.dp)
)

Icon(
image = Icons.Navigation.close,
modifier = Modifier
.size(Theme.spacing.x8)
.zIndex(1f)
.graphicsLayer {
translationX = -25f
translationY = -25f
},
onClick = onRemove
)
}
}

Тогда это результат кода. Это текущая проблема, с которой я столкнулся: что-то вроде как закрывает первую половину поля/изображения после использования переводаY 200f
[img]https:// i.sstatic.net/iWTcgBj8.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/787 ... ck-compose