我正在 Android Studio 中使用 Jetpack Compose 制作一个应用程序。我的应用程序上有一个“欢迎页面”。 向上滑动将显示来自底部的工作表中的多个登录选项。但我希望它看起来像页面和工作表堆叠在彼此的顶部,并且通过向上滑动,用户将向上推页面和揭开床单。我添加了一些草图来向您展示我的意思。它们并不完美,但我希望你能理解。第一张是正常状态,第二张是打开状态。我的想法的粗略草图
我尝试使用 ModalBottomSheet,但由于它只是从底部出现到页面本身,所以这不是我想要的方式。
没有可以使用的独立
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
,以便将卡片边框绘制在屏幕之外。
输出: