新增 LocationDetail的折叠动画
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
package com.aiosman.riderpro
|
||||
|
||||
import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.animation.animateContentSize
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.clickable
|
||||
@@ -93,10 +95,12 @@ fun getOfficialGalleryItems(): List<OfficialGalleryItem> {
|
||||
OfficialGalleryItem(20, R.drawable.default_moment_img),
|
||||
)
|
||||
}
|
||||
|
||||
data class FeedItem(
|
||||
val id: Int,
|
||||
val resId: Int,
|
||||
)
|
||||
|
||||
fun getFeedItems(): List<FeedItem> {
|
||||
val image_pickups = listOf(
|
||||
R.drawable.default_moment_img,
|
||||
@@ -109,6 +113,7 @@ fun getFeedItems(): List<FeedItem> {
|
||||
FeedItem(it, image_pickups.random())
|
||||
}
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
|
||||
@Preview
|
||||
@Composable
|
||||
@@ -125,17 +130,30 @@ fun LocationDetail() {
|
||||
val officialGalleryItems = getOfficialGalleryItems()
|
||||
val feedItems = getFeedItems()
|
||||
val navController = LocalNavController.current
|
||||
|
||||
// 2/3 height of the screen
|
||||
fun getPeekHeight(): Dp {
|
||||
val screenHeight = configuration.screenHeightDp
|
||||
val peekHeight = (screenHeight * 2 / 3).dp
|
||||
return peekHeight
|
||||
}
|
||||
|
||||
fun getNoPeekHeight(): Dp {
|
||||
val screenHeight = configuration.screenHeightDp
|
||||
val peekHeight = (screenHeight * 1 / 3).dp
|
||||
return peekHeight
|
||||
}
|
||||
|
||||
val staggeredGridState = rememberLazyStaggeredGridState()
|
||||
val coroutineScope = rememberCoroutineScope()
|
||||
var showGalleryAndInfo by remember { mutableStateOf(true) }
|
||||
LaunchedEffect(staggeredGridState) {
|
||||
snapshotFlow { staggeredGridState.firstVisibleItemIndex }
|
||||
.collect { index ->
|
||||
// Assuming index 0 corresponds to the top of the feed
|
||||
showGalleryAndInfo = index == 0
|
||||
}
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier.fillMaxSize()
|
||||
) {
|
||||
@@ -163,6 +181,7 @@ fun LocationDetail() {
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp)
|
||||
) {
|
||||
Spacer(modifier = Modifier.height(12.dp))
|
||||
@@ -171,12 +190,141 @@ fun LocationDetail() {
|
||||
modifier = Modifier
|
||||
.width(32.dp) // 修改宽度
|
||||
.height(4.dp) // 修改高度
|
||||
.background(Color(0f,0f,0f,0.4f), RoundedCornerShape(3.dp)) // 修改颜色和圆角
|
||||
.background(
|
||||
Color(0f, 0f, 0f, 0.4f),
|
||||
RoundedCornerShape(3.dp)
|
||||
) // 修改颜色和圆角
|
||||
.padding(top = 12.dp) // 调整位置
|
||||
.align(Alignment.CenterHorizontally)
|
||||
|
||||
)
|
||||
Text("Location Name", modifier = Modifier.padding(top = 24.dp), fontSize = 18.sp, fontWeight = FontWeight.Bold)
|
||||
|
||||
}
|
||||
|
||||
GalleryAndInfo(showGalleryAndInfo)
|
||||
// feed
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp, vertical = 16.dp)
|
||||
.animateContentSize()
|
||||
) {
|
||||
AnimatedVisibility(visible = !showGalleryAndInfo) {
|
||||
Row {
|
||||
Icon(
|
||||
Icons.Filled.LocationOn,
|
||||
contentDescription = "Location",
|
||||
modifier = Modifier.size(24.dp)
|
||||
)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Text("在云龟山景区的", fontSize = 16.sp)
|
||||
}
|
||||
}
|
||||
Text(
|
||||
"车友动态",
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.weight(1f)
|
||||
)
|
||||
}
|
||||
LazyVerticalStaggeredGrid(
|
||||
columns = StaggeredGridCells.Fixed(2), // Set to 2 columns
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
state = staggeredGridState,
|
||||
contentPadding = PaddingValues(16.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(16.dp),
|
||||
flingBehavior = ScrollableDefaults.flingBehavior(),
|
||||
) {
|
||||
items(feedItems) { item ->
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(bottom = 16.dp)
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = item.resId),
|
||||
contentDescription = "Feed",
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.clip(MaterialTheme.shapes.medium)
|
||||
.clickable {
|
||||
navController.navigate("Post")
|
||||
},
|
||||
contentScale = ContentScale.FillWidth
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 8.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Text("Some text")
|
||||
|
||||
}
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_avatar),
|
||||
contentDescription = "Avatar",
|
||||
modifier = Modifier
|
||||
.size(18.dp)
|
||||
.clip(CircleShape),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Text(
|
||||
"Username",
|
||||
color = Color(0xFF666666),
|
||||
fontSize = 14.sp
|
||||
)
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
Icon(
|
||||
Icons.Filled.Favorite,
|
||||
contentDescription = "Location"
|
||||
)
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
Text("100K", fontSize = 14.sp)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@OptIn(ExperimentalLayoutApi::class)
|
||||
@Composable
|
||||
fun GalleryAndInfo(showGalleryAndInfo: Boolean) {
|
||||
val navController = LocalNavController.current
|
||||
Column(modifier = Modifier.animateContentSize()) {
|
||||
AnimatedVisibility(visible = showGalleryAndInfo) {
|
||||
Column {
|
||||
// info panel
|
||||
Column(
|
||||
modifier = Modifier.padding(horizontal = 16.dp)
|
||||
) {
|
||||
Text(
|
||||
"Location Name",
|
||||
modifier = Modifier.padding(top = 24.dp),
|
||||
fontSize = 18.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
FlowRow(
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
@@ -212,7 +360,10 @@ fun LocationDetail() {
|
||||
Text("距离46KM,骑行时间77分钟", fontSize = 12.sp)
|
||||
}
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
Image(painter = painterResource(id = R.drawable.rider_pro_location_map), contentDescription = "")
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.rider_pro_location_map),
|
||||
contentDescription = ""
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -222,6 +373,7 @@ fun LocationDetail() {
|
||||
.height(8.dp)
|
||||
.background(Color(0xFFF5F5F5))
|
||||
)
|
||||
// official gallery
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 16.dp)
|
||||
@@ -273,92 +425,14 @@ fun LocationDetail() {
|
||||
}
|
||||
}
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(8.dp)
|
||||
.background(Color(0xFFF5F5F5))
|
||||
)
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 16.dp, vertical = 16.dp)
|
||||
) {
|
||||
Text("车友动态", fontSize = 16.sp, fontWeight = FontWeight.Bold)
|
||||
}
|
||||
LazyVerticalStaggeredGrid(
|
||||
columns = StaggeredGridCells.Fixed(2), // Set to 2 columns
|
||||
modifier = Modifier.fillMaxSize(),
|
||||
state = rememberLazyStaggeredGridState(),
|
||||
contentPadding = PaddingValues(16.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(16.dp),
|
||||
flingBehavior = ScrollableDefaults.flingBehavior(),
|
||||
) {
|
||||
items(feedItems) { item ->
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(bottom = 16.dp)
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = item.resId),
|
||||
contentDescription = "Feed",
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
.clip(MaterialTheme.shapes.medium).clickable {
|
||||
navController.navigate("Post")
|
||||
},
|
||||
contentScale = ContentScale.FillWidth
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 8.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Text("Some text")
|
||||
|
||||
}
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_avatar),
|
||||
contentDescription = "Avatar",
|
||||
modifier = Modifier
|
||||
.size(18.dp)
|
||||
.clip(CircleShape),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
Spacer(modifier = Modifier.width(8.dp))
|
||||
Text("Username", color = Color(0xFF666666), fontSize = 14.sp)
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
Icon(
|
||||
Icons.Filled.Favorite,
|
||||
contentDescription = "Location"
|
||||
)
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
Text("100K", fontSize = 14.sp)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user