Как создать аналогичный раздел комментариев, найденный на YouTube, Reddit и т. д. в Jetpack Compose? ⇐ Android

[Anonymous]

Я пытаюсь создать визуальный и функциональный раздел комментариев в Jetpack Compose, аналогичный YouTube или Reddit, см. изображения ниже. Я попробовал несколько подходов, но не могу точно воспроизвести, как он содержит одну основную строку, которую можно расширить, а также включить другие комментарии.
Это означает, что одна основная строка «включает» весь разговор, а затем переходит к ответным комментариям. Я пробовал использовать обычные карты и создавал дизайн таким образом, но затем линии «обрезались» между карточками и не было нормального потока. Я также пробовал использовать поля костюмов, как показано в коде ниже. Любые рекомендации о том, как я могу реализовать эту функцию с помощью Jetpack Compose? Благодарим за любые отзывы!
Неразвернутый комментарий:


Развернутый комментарий:


Мой код ниже — изображение;


Мой код на данный момент использует поля и параметры костюма:
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun TestReply3CostumScreen() {
Scaffold(
modifier = Modifier.fillMaxSize()
) { innerPadding ->

Box(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding) // apply scaffold padding
.background(Color.White)
) {
ConstraintLayout(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight() // REQUIRED
.padding(20.dp)

) {
val (profileImage, username, mentionName, icon, postText, verticalLine, nextImage, horizontalLine) = createRefs()

CustomImage(
image = R.drawable.profpicguy3,
modifier = Modifier
.size(50.dp)
.constrainAs(profileImage) {
top.linkTo(parent.top)
start.linkTo(parent.start)
}
)

VerticalLShapedLine(
color = Color.Black,
modifier = Modifier.constrainAs(verticalLine) {
top.linkTo(profileImage.bottom, margin = 40.dp) // starts below avatar
bottom.linkTo(parent.bottom) // goes to bottom of parent
centerHorizontallyTo(profileImage) // aligns horizontally under avatar
}
)

CustomText(
text = "James Holden",
modifier = Modifier
.constrainAs(username) {
top.linkTo(profileImage.top) // align top with image
start.linkTo(profileImage.end, margin = 15.dp) // place to the right of image
}
)

CustomIcon(
icon = Icons.Rounded.MoreVert,
modifier = Modifier
.size(24.dp)
.constrainAs(icon) {
top.linkTo(username.top) // same vertical line as name
bottom.linkTo(username.bottom) // keeps it vertically centered
end.linkTo(parent.end) // right edge of screen
}
)

// Mention BELOW name
CustomText(
text = "@jamesholden",
color = Color.Gray,
modifier = Modifier
.constrainAs(mentionName) {
top.linkTo(username.bottom, margin = 4.dp) // key line
start.linkTo(username.start) // align with name
}

)

CustomTextField(
text = "This is a textfield that should span atleast 2 rows but should not have a limit since you should be able to write what you want in the comment field without having any issue ...",
onTextChange = {},
color = Color.Gray,
modifier = Modifier.constrainAs(postText) {
top.linkTo(mentionName.bottom, margin = 25.dp) // small spacing below @name
start.linkTo(verticalLine.start, margin = 15.dp)
end.linkTo(parent.end, margin = 15.dp)
// remove bottom link if you don't want it stretching
}
)

CustomImage(
image = R.drawable.profpicguy3,
modifier = Modifier
.size(50.dp)
.constrainAs(nextImage) {
top.linkTo(postText.top, margin = 100.dp)
start.linkTo(parent.start, margin = 35.dp)
}
)

HorizontalLShapedLine(
color = Color.Black,
modifier = Modifier
.constrainAs(horizontalLine) {
top.linkTo(parent.top, margin = 100.dp)
start.linkTo(parent.start, margin = 25.dp)
bottom.linkTo(nextImage.bottom)
}
)
}
}
}
}

@Composable
fun CustomImage(
image: Int,
modifier: Modifier = Modifier
) {
Box(
contentAlignment = Alignment.TopCenter,
modifier = modifier
) {
Image(
painter = painterResource(image),
contentDescription = stringResource(R.string.app_name),
contentScale = ContentScale.Crop,
modifier = modifier
.size(40.dp)
.clip(CircleShape)
)

}
}

@Composable
fun CustomText(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Black
) {

Text(
text = text,
fontWeight = FontWeight.SemiBold,
color = color,
fontSize = 14.sp,
modifier = modifier
)

}

@Composable
fun CustomIcon(
icon: ImageVector,
modifier: Modifier = Modifier,
color: Color = Color.Black
) {
Icon(
imageVector = icon,
contentDescription = "Icon",
tint = color,
modifier = modifier
)
}

@Composable
fun CustomTextField(
text: String,
onTextChange: () -> Unit,
modifier: Modifier = Modifier,
color: Color = Color.Black
) {
BasicTextField(
value = text,
onValueChange = { onTextChange() },
modifier = modifier
.fillMaxWidth(0.8f)
.background(Color(0xFFBEBBBB), RoundedCornerShape(8.dp))
.padding(8.dp),
textStyle = TextStyle(fontSize = 14.sp, color = Color.Black),
decorationBox = { innerTextField ->
Box {
if (text.isEmpty()) {
Text(
text = "Write a reply...",
color = Color.Gray,
fontSize = 14.sp
)
}
innerTextField()
}
}
)
}

@Composable
fun VerticalLShapedLine(
modifier: Modifier = Modifier,
color: Color
) {

// Vertical line
Box(
modifier = modifier
.width(1.dp)
.fillMaxHeight() //

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