向上滑动即可显示页面下方的一张纸

问题描述 投票:0回答:1

我正在 Android Studio 中使用 Jetpack Compose 制作一个应用程序。我的应用程序上有一个“欢迎页面”。 向上滑动将显示来自底部的工作表中的多个登录选项。但我希望它看起来像页面和工作表堆叠在彼此的顶部,并且通过向上滑动,用户将向上推页面和揭开床单。我添加了一些草图来向您展示我的意思。它们并不完美,但我希望你能理解。第一张是正常状态,第二张是打开状态。我的想法的粗略草图

我尝试使用 ModalBottomSheet,但由于它只是从底部出现到页面本身,所以这不是我想要的方式。

android kotlin user-interface android-jetpack-compose
1个回答
0
投票

没有可以使用的独立

BottomSheet
可组合项,但使用
OutlinedCard
可以获得非常相似的结果。

请看下面的代码:

@Composable
fun WelcomeScreen() {

    val cornerRadius = 50.dp

    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            OutlinedCard(
                modifier = Modifier.wrapContentSize(Alignment.Center, unbounded = true),
                shape = RoundedCornerShape(0.dp, 0.dp, cornerRadius, cornerRadius),
                onClick = {}
            ) {
                Column(
                    modifier = Modifier
                        .padding(start = 4.dp, top = 4.dp, end = 4.dp, bottom = cornerRadius)
                        .fillParentMaxSize()
                        .padding(24.dp),
                    verticalArrangement = Arrangement.SpaceBetween,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text("\nWELCOME\n", fontSize = 32.sp, fontWeight = FontWeight.Bold)
                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text("Log in or Sign up")
                        Icon(
                            imageVector = Icons.Default.KeyboardArrowDown,
                            "Login"
                        )
                    }
                }
            }
        }
        item {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                FilledTonalButton(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {}
                ) {
                    Text("LOG IN")
                }
                OutlinedButton(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {}
                ) {
                    Text("REGISTER")
                }
            }
        }
    }
}

我们使用

LazyColumn
以便
content
可以轻松滚动。然后我们可以在
fillParentMaxSize
content
上使用
OutlinedCard
修改器,使其一开始就充满整个屏幕。

此外,我们使用

unbounded = true
,以便将卡片边框绘制在屏幕之外。

输出:

Screen Recording

© www.soinside.com 2019 - 2024. All rights reserved.