我在jetpack compose中使用运动布局制作了一个可折叠的顶部应用程序栏。应用栏实际上包含一个带有可滑动修饰符的框,其锚点Map到滑动状态COLLAPSED
和EXPANDED
。问题是,应该在顶部应用程序栏下对齐的内容实际上在顶部应用程序栏展开时隐藏在顶部应用程序栏下。
有什么建议可以让我用顶部的应用程序栏来限制内容,这样内容就可以根据滑动状态改变它的高度了。
Kotlin
@OptIn(ExperimentalMotionApi::class, ExperimentalMaterialApi::class)
@Composable
fun UserData(
user: User
) {
val swipingState = rememberSwipeableState(initialValue = SwipingStates.EXPANDED)
val context = LocalContext.current
val motionScene = remember {
context.resources
.openRawResource(R.raw.motion_scene)
.readBytes()
.decodeToString()
}
MotionLayout(
progress = if (swipingState.progress.to == SwipingStates.COLLAPSED) swipingState.progress.fraction
else 1f - swipingState.progress.fraction,
motionScene = MotionScene(content = motionScene),
modifier = Modifier.fillMaxWidth()
)
{
Box(
modifier = Modifier
.fillMaxWidth()
.background(LightBlue)
.layoutId("box")
.swipeable(
state = swipingState,
thresholds = { _, _ -> FractionalThreshold(0.5f) },
orientation = Orientation.Vertical,
anchors = mapOf(
0f to SwipingStates.EXPANDED,
400f to SwipingStates.COLLAPSED,
)
)
)
val painter = rememberAsyncImagePainter(
model =
ImageRequest
.Builder(LocalContext.current)
.data(user.imageUrl)
.build()
)
Image(
painter = painter,
contentDescription = null,
modifier = Modifier
.clip(CircleShape)
.border(2.dp, Color.White, CircleShape)
.layoutId("profile_pic"),
contentScale = ContentScale.Crop
)
Column(
modifier = Modifier
.layoutId("details"),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
)
{
Text(
modifier = Modifier.padding(start = 13.dp),
text = user.email,
fontSize = 18.sp,
color = Color.White
)
Spacer(modifier = Modifier.height(5.dp))
Text(text = "Boards : ", fontSize = 18.sp, color = Color.White)
Spacer(modifier = Modifier.height(5.dp))
Text(text = "Cards : ", fontSize = 18.sp, color = Color.White)
Spacer(modifier = Modifier.height(8.dp))
androidx.compose.material3.Button(
modifier = Modifier
.width(110.dp)
.padding(start = 10.dp),
colors = ButtonDefaults.buttonColors(Color.Blue.copy(0.2f)),
onClick = {
}) {
Text(text = "LogOut", color = Color.White)
}
}
Text(
text = user.userName,
fontSize = 24.sp,
color = Color.White,
modifier = Modifier.layoutId("username")
)
}
}
这是我的组合,其中包含运动布局。
1条答案
按热度按时间mqkwyuun1#
我已经解决了这个问题,把整个屏幕视图内的框组合和管理滑动使用nestedScrollConnection。这些是帮助我的链接
https://youtu.be/XS7G3iSVWNE
和上面评论中提到的github链接。