kotlin 我如何创建ModalBottomSheetLayout与线的顶部在撰写

mbzjlibv  于 2023-10-23  发布在  Kotlin
关注(0)|答案(2)|浏览(208)

我如何在编写中创建ModalBottomSheetLayout,并在顶部添加行?它有XML的解决方案,但我如何在Compose中做到这一点?
Something like this
我试图通过在BottomSheet上添加Box来获得一条线,但没有成功。我试着在这段代码中:

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

jdzmm42g1#

有一个这样的例子,也许它会对你有用,你可以根据你编辑的代码。
https://developersbreach.com/modal-bottom-sheet-jetpack-compose-android/

uujelgoq

uujelgoq2#

使用ModalBottomSheet而不是ModalBottomSheetLayout,默认情况下,这将使该行位于其顶部。

相关问题