更新 UI

2024-07-17 14:35:18 +08:00
parent 3f9bfb1254
commit 5b530f3ef6
8 changed files with 393 additions and 253 deletions
--- a/app/src/main/java/com/aiosman/riderpro/LikePage.kt
+++ b/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)
-            ) {
-                item {
-                    repeat(20) {
-                        LikeItem()
+                modifier = Modifier.weight(1f),
+                state = listState,

+                ) {
+                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))
            }
--- a/app/src/main/java/com/aiosman/riderpro/LikePageViewModel.kt
+++ b/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,
+)
--- a/app/src/main/java/com/aiosman/riderpro/LocationDetail.kt
+++ b/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(
--- a/app/src/main/java/com/aiosman/riderpro/MainActivity.kt
+++ b/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(
-                                        color = Color.Black
-                                    )
+                                    systemUiController.setSystemBarsColor(color = Color.Black)
                                }

                                NavigationItem.Message.route -> {
-                                    systemUiController.setSystemBarsColor(
-                                        color = Color.Black
-                                    )
+                                    systemUiController.setSystemBarsColor(color = Color.Black)
                                }

                                else -> {
-                                    systemUiController.setSystemBarsColor(
-                                        color = Color.Transparent
-                                    )
+                                    systemUiController.setSystemBarsColor(color = Color.Transparent)
                                }
                            }
                        },
--- a/app/src/main/java/com/aiosman/riderpro/MockDataSource.kt
+++ b/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))
+    }
+}
--- a/app/src/main/java/com/aiosman/riderpro/ModificationList.kt
+++ b/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))) {
-        TopAppBar(
-            title = { Text("Modification List") },
-            navigationIcon = {
-                IconButton(onClick = {
-                    navController.popBackStack()
-                }) {
-                    Icon(
-                        painter = painterResource(id = R.drawable.rider_pro_nav_back), // Replace with your back icon
-                        contentDescription = "Back"
-                    )
-                }
-            },
-            colors = TopAppBarDefaults.topAppBarColors(
-                containerColor = Color(0xFFF8F8F8),
-            )
-        )
+    StatusBarMaskLayout {
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(horizontal = 16.dp)
+                .background(Color(0xFFF8F8F8))
+
+        ) {
+            NoticeScreenHeader("Modification List")
            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(
--- a/app/src/main/java/com/aiosman/riderpro/OfficialGallery.kt
+++ b/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()
+        }
    }
 }

--- a/app/src/main/java/com/aiosman/riderpro/OfficialPhotographer.kt
+++ b/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() {
            }

        }
+    }
+
 }