更新 UI

app/src/main/java/com/aiosman/riderpro/LikePage.kt

@@ -6,18 +6,21 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -30,6 +33,23 @@ import androidx.compose.ui.unit.sp
 @Preview
 @Composable
 fun LikePage() {
+    val model = LikePageViewModel
+    val coroutineScope = rememberCoroutineScope()
+    val listState = rememberLazyListState()
+
+    // observe list scrolling
+    val reachedBottom: Boolean by remember {
+        derivedStateOf {
+            val lastVisibleItem = listState.layoutInfo.visibleItemsInfo.lastOrNull()
+            lastVisibleItem?.index != 0 && lastVisibleItem?.index == listState.layoutInfo.totalItemsCount - 3
+        }
+    }
+    LaunchedEffect(Unit) {
+        model.loader.loadData()
+    }
+    LaunchedEffect(reachedBottom) {
+        if (reachedBottom) model.loader.loadMore()
+    }
     StatusBarMaskLayout(
         darkIcons = true,
         maskBoxBackgroundColor = Color(0xFFFFFFFF)
@@ -43,26 +63,28 @@ fun LikePage() {
             NoticeScreenHeader("LIKES")
             Spacer(modifier = Modifier.height(28.dp))
             LazyColumn(
-                modifier = Modifier.weight(1f)
+                modifier = Modifier.weight(1f),
-            ) {
+                state = listState,
-                item {
-                    repeat(20) {
-                        LikeItem()
 
+                ) {
+                items(model.loader.list, key = { it.id }) {
+                    LikeItem(it)
                 }
+                item {
                     BottomNavigationPlaceholder()
                 }
-
             }
 
+
         }
     }
 
+
 }
 
 
 @Composable
-fun LikeItem() {
+fun LikeItem(itemData: LikeItemData) {
     Box(
         modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
     ) {
@@ -79,7 +101,7 @@ fun LikeItem() {
             Column(
                 modifier = Modifier.weight(1f)
             ) {
-                Text("Username", fontWeight = FontWeight.Bold, fontSize = 16.sp)
+                Text(itemData.name, fontWeight = FontWeight.Bold, fontSize = 16.sp)
                 Spacer(modifier = Modifier.height(5.dp))
                 Text("Username", fontSize = 12.sp, color = Color(0x99000000))
             }

app/src/main/java/com/aiosman/riderpro/LikePageViewModel.kt

@@ -0,0 +1,65 @@
+package com.aiosman.riderpro
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+
+class LikeDataSource : MockDataSource<LikeItemData>() {
+    init {
+        var newList = mutableListOf<LikeItemData>()
+        for (i in 0..999) {
+            newList.add(LikeItemData(i, "Like $i"))
+        }
+        list = newList
+    }
+}
+abstract class DataLoader<T> {
+    var list = mutableListOf<T>()
+    var page by mutableStateOf(1)
+    var pageSize by mutableStateOf(20)
+    var total by mutableStateOf(0)
+    var noMoreData by mutableStateOf(false)
+
+    suspend fun loadData() {
+        val resp = fetchData(page, pageSize)
+        if (resp.success) {
+            resp.data?.let {
+                total = it.total
+                list = it.list.toMutableList()
+                if (it.list.size < pageSize) {
+                    noMoreData = true
+                }
+            }
+        }
+    }
+    suspend fun loadMore(){
+        if (list.size >= total) return
+        page++
+        val resp = fetchData(page, pageSize)
+        if (resp.success) {
+            resp.data?.let {
+                total = it.total
+                list.addAll(it.list)
+                if (it.list.size < pageSize) {
+                    noMoreData = true
+                }
+            }
+        }
+    }
+    abstract suspend fun fetchData(page: Int, pageSize: Int): MockDataContainer<MockListContainer<T>>
+}
+class LikeListLoader : DataLoader<LikeItemData>() {
+    var mockDataSource = LikeDataSource()
+    override suspend fun fetchData(page: Int, pageSize: Int): MockDataContainer<MockListContainer<LikeItemData>> {
+        return mockDataSource.fetchData(page, pageSize)
+    }
+}
+object LikePageViewModel : ViewModel() {
+    val loader = LikeListLoader()
+}
+
+data class LikeItemData(
+    val id: Int,
+    val name: String,
+)

app/src/main/java/com/aiosman/riderpro/LocationDetail.kt

@@ -17,7 +17,6 @@ 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.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -34,7 +33,6 @@ 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.SheetState
 import androidx.compose.material3.SheetValue
@@ -43,7 +41,6 @@ import androidx.compose.material3.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -54,8 +51,6 @@ 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.layout.onGloballyPositioned
-import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
@@ -64,7 +59,6 @@ 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
-import kotlinx.coroutines.launch
 
 data class OfficialGalleryItem(
     val id: Int,
@@ -153,6 +147,7 @@ fun LocationDetail() {
                 // Assuming index 0 corresponds to the top of the feed
                 showGalleryAndInfo = index == 0
             }
+
     }
     Box(
         modifier = Modifier.fillMaxSize()
@@ -200,6 +195,7 @@ fun LocationDetail() {
                         )
 
                     }
+                    Spacer(modifier = Modifier.height(16.dp))
 
                     GalleryAndInfo(showGalleryAndInfo)
                     // feed
@@ -234,6 +230,7 @@ fun LocationDetail() {
                         contentPadding = PaddingValues(16.dp),
                         horizontalArrangement = Arrangement.spacedBy(16.dp),
                         flingBehavior = ScrollableDefaults.flingBehavior(),
+
                     ) {
                         items(feedItems) { item ->
                             Column(

app/src/main/java/com/aiosman/riderpro/MainActivity.kt

@@ -8,6 +8,7 @@ import androidx.activity.enableEdgeToEdge
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -20,16 +21,26 @@ import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemColors
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -37,6 +48,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowCompat
+import androidx.navigation.NavGraph
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -45,6 +57,7 @@ import androidx.navigation.compose.rememberNavController
 import com.aiosman.riderpro.ui.theme.RiderProTheme
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.google.android.libraries.places.api.Places
+import kotlinx.coroutines.launch
 
 
 class MainActivity : ComponentActivity() {
@@ -73,12 +86,7 @@ fun NavigationController(navController: NavHostController) {
     NavHost(
         navController = navController,
         startDestination = NavigationItem.Home.route,
-        enterTransition = {
+    ) {
-            fadeIn(animationSpec = tween(0))
-        },
-        exitTransition = {
-            fadeOut(animationSpec = tween(0))
-        }) {
         // 带底部导航栏的路由：
         listOf(
             NavigationItem.Home,
@@ -111,12 +119,8 @@ fun NavigationController(navController: NavHostController) {
             }
         }
         composable(route = "OfficialPhoto") {
-            Box(
-                modifier = Modifier.padding(bottom = navigationBarHeight)
-            ) {
             OfficialGalleryPage()
         }
-        }
         composable(route = "OfficialPhotographer") {
             OfficialPhotographer()
         }
@@ -128,12 +132,8 @@ fun NavigationController(navController: NavHostController) {
             }
         }
         composable(route = "ModificationList") {
-            Box(
-                modifier = Modifier.padding(bottom = navigationBarHeight)
-            ) {
             ModificationListScreen()
         }
-        }
         composable(route = "MyMessage") {
 
             NotificationsScreen()
@@ -205,26 +205,31 @@ fun ScaffoldWithNavigationBar(
                     NavigationBarItem(
                         selected = currentRoute == it.route,
                         onClick = {
+                            // Check if the current route is not the same as the tab's route to avoid unnecessary navigation
                             if (currentRoute != it.route) {
-                                navController.navigate(it.route)
+                                navController.navigate(it.route) {
+                                    // Avoid creating a new layer on top of the navigation stack
+                                    launchSingleTop = true
+                                    // Attempt to pop up to the existing instance of the destination, if present
+                                    popUpTo(navController.graph.startDestinationId) {
+                                        saveState = true
                                     }
+                                    // Restore state when navigating back to the composable
+                                    restoreState = true
+                                }
+                            }
+                            // Additional logic for system UI color changes
                             when (it.route) {
                                 NavigationItem.Add.route -> {
-                                    systemUiController.setSystemBarsColor(
+                                    systemUiController.setSystemBarsColor(color = Color.Black)
-                                        color = Color.Black
-                                    )
                                 }
 
                                 NavigationItem.Message.route -> {
-                                    systemUiController.setSystemBarsColor(
+                                    systemUiController.setSystemBarsColor(color = Color.Black)
-                                        color = Color.Black
-                                    )
                                 }
 
                                 else -> {
-                                    systemUiController.setSystemBarsColor(
+                                    systemUiController.setSystemBarsColor(color = Color.Transparent)
-                                        color = Color.Transparent
-                                    )
                                 }
                             }
                         },

app/src/main/java/com/aiosman/riderpro/MockDataSource.kt

@@ -0,0 +1,31 @@
+package com.aiosman.riderpro
+
+import kotlin.math.min
+
+class MockDataContainer<T>(
+    val success: Boolean,
+    val data: T?
+) {
+
+}
+
+class MockListContainer<T>(
+    val total: Int,
+    val page: Int,
+    val pageSize: Int,
+    val list: List<T>
+) {
+
+}
+
+abstract class MockDataSource<T> {
+    var list = mutableListOf<T>()
+    suspend fun fetchData(page: Int, pageSize: Int): MockDataContainer<MockListContainer<T>> {
+        // over page return empty
+        if (page * pageSize > list.size) {
+            return MockDataContainer(false, MockListContainer(0, page, pageSize, emptyList()))
+        }
+        val backData = list.subList((page - 1) * pageSize, min(page * pageSize, list.size))
+        return MockDataContainer(true, MockListContainer(list.size, page, pageSize, backData))
+    }
+}

app/src/main/java/com/aiosman/riderpro/ModificationList.kt

@@ -1,4 +1,5 @@
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -23,33 +24,28 @@ 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.sp
+import com.aiosman.riderpro.BottomNavigationPlaceholder
 import com.aiosman.riderpro.LocalNavController
+import com.aiosman.riderpro.NoticeScreenHeader
 import com.aiosman.riderpro.R
+import com.aiosman.riderpro.StatusBarMask
+import com.aiosman.riderpro.StatusBarMaskLayout
 
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Preview
 @Composable
 fun ModificationListScreen() {
     val navController = LocalNavController.current
     val modifications = getModifications()
-    Column(modifier = Modifier.fillMaxSize().background(Color(0xFFF8F8F8))) {
+    StatusBarMaskLayout {
-        TopAppBar(
+        Column(
-            title = { Text("Modification List") },
+            modifier = Modifier
-            navigationIcon = {
+                .weight(1f)
-                IconButton(onClick = {
+                .padding(horizontal = 16.dp)
-                    navController.popBackStack()
+                .background(Color(0xFFF8F8F8))
-                }) {
+
-                    Icon(
+        ) {
-                        painter = painterResource(id = R.drawable.rider_pro_nav_back), // Replace with your back icon
+            NoticeScreenHeader("Modification List")
-                        contentDescription = "Back"
-                    )
-                }
-            },
-            colors = TopAppBarDefaults.topAppBarColors(
-                containerColor = Color(0xFFF8F8F8),
-            )
-        )
             Spacer(modifier = Modifier.height(8.dp))
             LazyColumn(modifier = Modifier.padding(16.dp)) {
                 items(modifications.size) { index ->
@@ -57,10 +53,16 @@ fun ModificationListScreen() {
                     ModificationItem(name = modification.name, price = modification.price)
                     Spacer(modifier = Modifier.height(8.dp))
                 }
+                item {
+                    BottomNavigationPlaceholder()
+                }
+            }
         }
     }
 }
+
 data class Modification(val name: String, val price: String)
+
 fun getModifications(): List<Modification> {
     return listOf(
         Modification("Modification name", "$74.00"),
@@ -85,6 +87,7 @@ fun getModifications(): List<Modification> {
         Modification("Modification name", "$74.00"),
     )
 }
+
 @Composable
 fun ModificationItem(name: String, price: String) {
     Card(

app/src/main/java/com/aiosman/riderpro/OfficialGallery.kt

@@ -36,16 +36,18 @@ import androidx.compose.ui.unit.sp
 @Preview
 @Composable
 fun OfficialGalleryPage() {
+    StatusBarMaskLayout {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-            .padding(top = 16.dp, start = 16.dp, end = 16.dp)
+                .padding(start = 16.dp, end = 16.dp)
         ) {
             OfficialGalleryPageHeader()
-//        CertificationSection()
             Spacer(modifier = Modifier.height(16.dp))
             ImageGrid()
         }
+    }
+
 }
 
 @Composable
@@ -141,6 +143,9 @@ fun ImageGrid() {
         items(photographers.size) { index ->
             PhotographerCard(photographers[index].first, photographers[index].second)
         }
+        item{
+            BottomNavigationPlaceholder()
+        }
     }
 }
 

app/src/main/java/com/aiosman/riderpro/OfficialPhotographer.kt

@@ -84,12 +84,15 @@ fun OfficialPhotographer() {
             alp
         }
     }
-    Scaffold { paddingValues ->
+    StatusBarMaskLayout(
-
+        maskBoxBackgroundColor = Color.Black,
+        darkIcons = false
+    ) {
+        Column {
             Box(
                 modifier = Modifier
                     .background(Color.Black)
-                .padding(paddingValues)
+
 
             ) {
                 LazyColumn(
@@ -108,7 +111,12 @@ fun OfficialPhotographer() {
                                 contentScale = ContentScale.Crop,
                                 modifier = Modifier.fillMaxSize()
                             )
-                        // top bar
+                            // dark alpha overlay
+                            Box(
+                                modifier = Modifier
+                                    .fillMaxSize()
+                                    .background(Color.Black.copy(alpha = alpha))
+                            )
 
                             // on bottom of box
                             Box(
@@ -206,6 +214,7 @@ fun OfficialPhotographer() {
 
                             }
 
+
                         }
                         val screenWidth = LocalConfiguration.current.screenWidthDp.dp
                         val imageSize =
@@ -234,6 +243,7 @@ fun OfficialPhotographer() {
                                     )
                                 }
                             }
+                            BottomNavigationPlaceholder()
 
                         }
                     }
@@ -276,4 +286,6 @@ fun OfficialPhotographer() {
             }
 
         }
+    }
+
 }