add:location detail
This commit is contained in:
332
app/src/main/java/com/aiosman/riderpro/LocationDetail.kt
Normal file
332
app/src/main/java/com/aiosman/riderpro/LocationDetail.kt
Normal file
@@ -0,0 +1,332 @@
|
||||
package com.aiosman.riderpro
|
||||
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.gestures.ScrollableDefaults
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.ExperimentalLayoutApi
|
||||
import androidx.compose.foundation.layout.FlowRow
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
|
||||
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
|
||||
import androidx.compose.foundation.lazy.staggeredgrid.items
|
||||
import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Favorite
|
||||
import androidx.compose.material.icons.filled.LocationOn
|
||||
import androidx.compose.material3.BottomSheetScaffold
|
||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||
import androidx.compose.material3.HorizontalDivider
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.rememberBottomSheetScaffoldState
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.rememberCoroutineScope
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.layout.ContentScale
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.res.painterResource
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
|
||||
data class OfficialGalleryItem(
|
||||
val id: Int,
|
||||
val resId: Int,
|
||||
)
|
||||
|
||||
fun getOfficialGalleryItems(): List<OfficialGalleryItem> {
|
||||
return listOf(
|
||||
OfficialGalleryItem(1, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(2, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(3, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(4, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(5, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(6, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(7, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(8, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(9, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(10, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(11, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(12, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(13, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(14, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(15, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(16, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(17, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(18, R.drawable.default_moment_img),
|
||||
OfficialGalleryItem(19, R.drawable.default_moment_img),
|
||||
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,
|
||||
R.drawable.default_avatar,
|
||||
R.drawable.rider_pro_moment_demo_1,
|
||||
R.drawable.rider_pro_moment_demo_2,
|
||||
R.drawable.rider_pro_moment_demo_3,
|
||||
)
|
||||
return (1..100).map {
|
||||
FeedItem(it, image_pickups.random())
|
||||
}
|
||||
}
|
||||
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
|
||||
@Preview
|
||||
@Composable
|
||||
fun LocationDetail() {
|
||||
val scope = rememberCoroutineScope()
|
||||
val scaffoldState = rememberBottomSheetScaffoldState()
|
||||
val configuration = LocalConfiguration.current
|
||||
val officialGalleryItems = getOfficialGalleryItems()
|
||||
val feedItems = getFeedItems()
|
||||
|
||||
// 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
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier.fillMaxSize()
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(getNoPeekHeight() + 32.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_moment_img),
|
||||
contentDescription = "Location Image",
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(getNoPeekHeight() + 32.dp),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
}
|
||||
BottomSheetScaffold(
|
||||
scaffoldState = scaffoldState,
|
||||
sheetPeekHeight = getPeekHeight(),
|
||||
sheetContainerColor = Color.White,
|
||||
sheetContent = {
|
||||
Column(
|
||||
Modifier
|
||||
.fillMaxWidth()
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 16.dp)
|
||||
) {
|
||||
Text("Location Name", fontSize = 24.sp, fontWeight = FontWeight.Bold)
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
FlowRow(
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
verticalArrangement = Arrangement.spacedBy(8.dp)
|
||||
) {
|
||||
repeat(10) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.background(Color(0xFFF5F5F5))
|
||||
.padding(horizontal = 8.dp, vertical = 4.dp)
|
||||
|
||||
|
||||
) {
|
||||
Text("Tag $it", color = Color(0xFFb2b2b2))
|
||||
}
|
||||
}
|
||||
}
|
||||
HorizontalDivider(
|
||||
modifier = Modifier.padding(vertical = 16.dp),
|
||||
color = Color(0xFFF5F5F5)
|
||||
)
|
||||
Row(
|
||||
modifier = Modifier.padding(vertical = 16.dp)
|
||||
) {
|
||||
Column {
|
||||
Text(
|
||||
"Location name",
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Text("距离46KM,骑行时间77分钟")
|
||||
}
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
IconButton(
|
||||
onClick = { }
|
||||
) {
|
||||
Icon(
|
||||
Icons.Filled.LocationOn,
|
||||
contentDescription = "Location"
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(8.dp)
|
||||
.background(Color(0xFFF5F5F5))
|
||||
)
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.padding(horizontal = 16.dp)
|
||||
.padding(top = 16.dp)
|
||||
) {
|
||||
Row {
|
||||
Text("官方摄影师作品", fontSize = 16.sp, fontWeight = FontWeight.Bold)
|
||||
Spacer(modifier = Modifier.weight(1f))
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.rider_pro_nav_next),
|
||||
contentDescription = "Next",
|
||||
modifier = Modifier.size(24.dp)
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(modifier = Modifier.height(16.dp))
|
||||
Row(
|
||||
modifier = Modifier.height(240.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.weight(1f)
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_avatar),
|
||||
contentDescription = "Avatar",
|
||||
modifier = Modifier.fillMaxSize()
|
||||
.clip(MaterialTheme.shapes.medium),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
}
|
||||
Spacer(modifier = Modifier.width(16.dp))
|
||||
Box(
|
||||
modifier = Modifier.weight(1f)
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.default_avatar),
|
||||
contentDescription = "Avatar",
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.clip(MaterialTheme.shapes.medium),
|
||||
contentScale = ContentScale.Crop
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
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),
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
) { innerPadding ->
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user