Как я могу создать ModalBottomSheetLayout со строкой вверху в Compose

Как я могу создать ModalBottomSheetLayout со строкой вверху в Compose? У него есть решение для XML, но как я могу сделать это в Compose?

Примерно так

Я попытался получить строку, добавив Box на BottomSheet, но это не сработало. Я пробовал как в этом коде:

Box(
    modifier = Modifier.fillMaxSize()
) {
    Divider(
        Modifier
            .size(width = 50.dp, height = 4.5.dp)
            .align(Alignment.TopCenter)
            .clip(CircleShape),
        color = MaterialTheme.colors.onBackground,
        thickness = 2.dp
    )
    ModalBottomSheetLayout(
        modifier = Modifier.fillMaxSize(),
        sheetShape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
        sheetState = sheetState,
        sheetContent = {
            BasketBottomSheetContent()
        },
    ) {}
}
    ModalBottomSheetLayout(
        modifier = Modifier.fillMaxSize(),
        sheetShape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
        sheetState = sheetState,
        sheetContent = {
            Column(Modifier
                .navigationBarsPadding()
                .padding(10.dp)
            ) {
                LazyColumn(Modifier.fillMaxHeight(0.85f).fillMaxWidth()) {
                    items(3) {
                        Row(Modifier.fillMaxWidth()) {
                            Box(Modifier.fillMaxWidth()) {
                                Box {
                                    AsyncImage(
                                        modifier = Modifier
                                            .width(getWidth(divisionValue = 2.7))
                                            .padding(15.dp)
                                            .clip(RoundedCornerShape(10.dp)),
                                        model = ImageRequest.Builder(LocalContext.current)
                                            .data(imageURL)
                                            .scale(Scale.FIT)
                                            .build(),
                                        contentDescription = ""
                                    )
                                }

                                Text(
                                    text = "test",
                                    modifier = Modifier.align(Alignment.Center)
                                )
                                Text(
                                    text = "4.5 $",
                                    modifier = Modifier.align(Alignment.CenterEnd)
                                )
                                Divider(Modifier.align(Alignment.BottomCenter))
                            }
                        }
                    }
                }
            }
        } {}
1
0
166
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть такой пример, может он вам будет полезен, можете отредактировать коды под себя.

https://developersbreach.com/modal-bottom-sheet-jetpack-compose-android/

Другие вопросы по теме