Consider window insets for AniNavigationSuiteLayout and AniListDetail…

…PaneScaffold
open-ani · Nov 10, 2024 · b481942 · b481942
1 parent cb564ab
commit b481942
Show file tree

Hide file tree

Showing 19 changed files with 298 additions and 132 deletions.
diff --git a/app/shared/src/commonMain/kotlin/ui/cache/CacheManagementPage.kt b/app/shared/src/commonMain/kotlin/ui/cache/CacheManagementPage.kt
@@ -13,18 +13,14 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.lazy.staggeredgrid.LazyStaggeredGridState
 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.material3.Scaffold
-import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.Surface
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
@@ -69,6 +65,7 @@ import me.him188.ani.app.ui.cache.components.CacheGroupState
 import me.him188.ani.app.ui.cache.components.CacheManagementOverallStats
 import me.him188.ani.app.ui.foundation.AbstractViewModel
 import me.him188.ani.app.ui.foundation.ifThen
+import me.him188.ani.app.ui.foundation.layout.AniWindowInsets
 import me.him188.ani.app.ui.foundation.produceState
 import me.him188.ani.app.ui.foundation.stateOf
 import me.him188.ani.app.ui.foundation.theme.AniThemeDefaults
@@ -242,14 +239,14 @@ fun CacheManagementPage(
     vm: CacheManagementViewModel,
     showBack: Boolean,
     modifier: Modifier = Modifier,
-    windowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
+    contentWindowInsets: WindowInsets = AniWindowInsets.forPageContent(),
 ) {
     CacheManagementPage(
         vm.state,
         showBack = showBack,
         modifier = modifier,
         lazyGridState = vm.lazyGridState,
-        windowInsets = windowInsets,
+        contentWindowInsets = contentWindowInsets,
     )
 }
 
@@ -260,15 +257,14 @@ fun CacheManagementPage(
     showBack: Boolean,
     modifier: Modifier = Modifier,
     lazyGridState: CacheGroupGridLayoutState = rememberLazyStaggeredGridState(),
-    windowInsets: WindowInsets = WindowInsets.systemBars,
+    contentWindowInsets: WindowInsets = AniWindowInsets.forPageContent(),
 ) {
     val appBarColors = AniThemeDefaults.topAppBarColors()
     Scaffold(
         modifier,
         topBar = {
             AniTopAppBar(
                 title = { AniTopAppBarDefaults.Title("缓存管理") },
-                windowInsets = windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
                 navigationIcon = {
                     if (showBack) {
                         TopAppBarGoBackButton()
@@ -278,7 +274,7 @@ fun CacheManagementPage(
             )
         },
         containerColor = Color.Unspecified,
-        contentWindowInsets = windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom),
+        contentWindowInsets = contentWindowInsets,
     ) { paddingValues ->
         Column(Modifier.padding(paddingValues)) {
             Surface(

diff --git a/app/shared/src/commonMain/kotlin/ui/main/AniAppContent.kt b/app/shared/src/commonMain/kotlin/ui/main/AniAppContent.kt
@@ -18,7 +18,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
-import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.getValue
@@ -116,7 +115,7 @@ private fun AniAppContentImpl(
                 popEnterTransition = popEnterTransition,
                 popExitTransition = popExitTransition,
             ) { // 由 SessionManager.requireAuthorize 跳转到
-                WelcomeScene(viewModel { WelcomeViewModel() }, Modifier.fillMaxSize(), windowInsets)
+                WelcomeScene(viewModel { WelcomeViewModel() }, Modifier.fillMaxSize())
             }
             composable<NavRoutes.Main>(
                 enterTransition = enterTransition,
@@ -145,11 +144,6 @@ private fun AniAppContentImpl(
                 ) {
                     MainScene(
                         page = currentPage,
-                        windowInsets =
-                        // macOS 上的手机状态需要有顶部的 insets
-                        if (navigationLayoutType == NavigationSuiteType.NavigationBar) windowInsets
-                        // 横屏状态不需要有
-                        else windowInsetsWithoutTitleBar,
                         onNavigateToPage = { currentPage = it },
                         navigationLayoutType = navigationLayoutType,
                     )
@@ -230,7 +224,6 @@ private fun AniAppContentImpl(
                         SettingsViewModel()
                     },
                     Modifier.fillMaxSize(),
-                    windowInsets = windowInsets,
                     route.tab,
                     showNavigationIcon = true,
                 )
@@ -245,7 +238,6 @@ private fun AniAppContentImpl(
                     viewModel { CacheManagementViewModel(aniNavigator) },
                     showBack = true,
                     Modifier.fillMaxSize(),
-                    windowInsets = windowInsets,
                 )
             }
             composable<NavRoutes.CacheDetail>(

diff --git a/app/shared/src/commonMain/kotlin/ui/main/MainScene.kt b/app/shared/src/commonMain/kotlin/ui/main/MainScene.kt
@@ -14,7 +14,6 @@ import androidx.compose.animation.core.snap
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.togetherWith
-import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CornerSize
@@ -24,7 +23,6 @@ import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.FloatingActionButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
@@ -78,7 +76,6 @@ fun MainScene(
     page: MainScenePage,
     modifier: Modifier = Modifier,
     onNavigateToPage: (MainScenePage) -> Unit,
-    windowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets, // Compose for Desktop 目前不会考虑这个
     navigationLayoutType: NavigationSuiteType = AniNavigationSuiteDefaults.calculateLayoutType(
         currentWindowAdaptiveInfo(),
     ),
@@ -91,13 +88,12 @@ fun MainScene(
         }
     }
 
-    MainSceneContent(page, windowInsets, onNavigateToPage, modifier, navigationLayoutType)
+    MainSceneContent(page, onNavigateToPage, modifier, navigationLayoutType)
 }
 
 @Composable
 private fun MainSceneContent(
     page: MainScenePage,
-    windowInsets: WindowInsets,
     onNavigateToPage: (MainScenePage) -> Unit,
     modifier: Modifier = Modifier,
     navigationLayoutType: NavigationSuiteType = AniNavigationSuiteDefaults.calculateLayoutType(
@@ -107,7 +103,12 @@ private fun MainSceneContent(
     AniNavigationSuiteLayout(
         navigationSuite = {
             AniNavigationSuite(
-                windowInsets,
+                layoutType = navigationLayoutType,
+                colors = NavigationSuiteDefaults.colors(
+                    navigationDrawerContainerColor = AniThemeDefaults.navigationContainerColor,
+                    navigationBarContainerColor = AniThemeDefaults.navigationContainerColor,
+                    navigationRailContainerColor = AniThemeDefaults.navigationContainerColor,
+                ),
                 navigationRailHeader = {
                     FloatingActionButton(
                         { onNavigateToPage(MainScenePage.Search) },
@@ -122,13 +123,7 @@ private fun MainSceneContent(
                         Icon(Icons.Rounded.Search, "搜索")
                     }
                 },
-                colors = NavigationSuiteDefaults.colors(
-                    navigationDrawerContainerColor = AniThemeDefaults.navigationContainerColor,
-                    navigationBarContainerColor = AniThemeDefaults.navigationContainerColor,
-                    navigationRailContainerColor = AniThemeDefaults.navigationContainerColor,
-                ),
                 navigationRailItemSpacing = 8.dp,
-                layoutType = navigationLayoutType,
             ) {
                 for (entry in MainScenePage.visibleEntries) {
                     item(
@@ -163,7 +158,6 @@ private fun MainSceneContent(
                             onSearch = { onNavigateToPage(MainScenePage.Search) },
                             onClickSettings = { navigator.navigateSettings() },
                             modifier.fillMaxSize(),
-                            windowInsets = windowInsets,
                         )
                     }
 
@@ -172,7 +166,6 @@ private fun MainSceneContent(
                         CollectionPage(
                             state = vm.state,
                             items = vm.items,
-                            windowInsets = windowInsets,
                             onClickSearch = { onNavigateToPage(MainScenePage.Search) },
                             onClickSettings = { navigator.navigateSettings() },
                             Modifier.fillMaxSize(),
@@ -185,7 +178,6 @@ private fun MainSceneContent(
                         viewModel { CacheManagementViewModel(navigator) },
                         showBack = false,
                         Modifier.fillMaxSize(),
-                        windowInsets = windowInsets,
                     )
 
                     MainScenePage.Search -> {
@@ -198,7 +190,6 @@ private fun MainSceneContent(
                         val toaster = LocalToaster.current
                         SearchPage(
                             vm.searchPageState,
-                            windowInsets,
                             detailContent = {
                                 vm.subjectDetailsStateLoader.subjectDetailsStateFlow?.let { stateFlow ->
                                     val state by stateFlow.collectAsStateWithLifecycle()

diff --git a/app/shared/src/commonMain/kotlin/ui/profile/auth/WelcomePage.kt b/app/shared/src/commonMain/kotlin/ui/profile/auth/WelcomePage.kt
@@ -39,7 +39,6 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.ScaffoldDefaults
 import androidx.compose.material3.SuggestionChip
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -68,6 +67,7 @@ import me.him188.ani.app.ui.foundation.icons.AniIcons
 import me.him188.ani.app.ui.foundation.icons.GithubMark
 import me.him188.ani.app.ui.foundation.icons.QqRoundedOutline
 import me.him188.ani.app.ui.foundation.icons.Telegram
+import me.him188.ani.app.ui.foundation.layout.AniWindowInsets
 import me.him188.ani.app.ui.foundation.navigation.BackHandler
 import me.him188.ani.app.ui.settings.tabs.AniHelpNavigator
 import org.koin.core.component.KoinComponent
@@ -92,7 +92,7 @@ class WelcomeViewModel : AbstractViewModel(), KoinComponent {
 fun WelcomeScene(
     vm: WelcomeViewModel,
     modifier: Modifier = Modifier,
-    windowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
+    windowInsets: WindowInsets = AniWindowInsets.forPageContent(),
 ) {
     val navigator = LocalNavigator.current
     val goBack = {
@@ -113,7 +113,7 @@ fun WelcomeScene(
             }
         },
         modifier = modifier,
-        windowInsets = windowInsets,
+        contentWindowInsets = windowInsets,
     )
 }
 
@@ -122,7 +122,7 @@ fun WelcomePage(
     onClickLogin: () -> Unit,
     onClickGuest: () -> Unit,
     modifier: Modifier = Modifier,
-    windowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
+    contentWindowInsets: WindowInsets = AniWindowInsets.forPageContent(),
 ) {
     var showDetails by rememberSaveable { mutableStateOf(false) }
     Column(modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
@@ -133,7 +133,7 @@ fun WelcomePage(
             },
             bottomBar = {
                 if (showDetails) {
-                    Column(Modifier.windowInsetsPadding(windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom))) {
+                    Column(Modifier.windowInsetsPadding(contentWindowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom))) {
                         HorizontalDivider(Modifier.padding(horizontal = 4.dp))
                         Column(
                             Modifier.padding(all = 16.dp).fillMaxWidth(),
@@ -158,7 +158,7 @@ fun WelcomePage(
                     }
                 }
             },
-            contentWindowInsets = windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
+            contentWindowInsets = contentWindowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
         ) { contentPadding ->
             var isContentReady by rememberSaveable {
                 mutableStateOf(false)

diff --git a/app/shared/src/commonMain/kotlin/ui/subject/collection/CollectionPage.kt b/app/shared/src/commonMain/kotlin/ui/subject/collection/CollectionPage.kt
@@ -83,6 +83,7 @@ import me.him188.ani.app.navigation.LocalNavigator
 import me.him188.ani.app.ui.adaptive.AniTopAppBar
 import me.him188.ani.app.ui.adaptive.AniTopAppBarDefaults
 import me.him188.ani.app.ui.foundation.LocalPlatform
+import me.him188.ani.app.ui.foundation.layout.AniWindowInsets
 import me.him188.ani.app.ui.foundation.layout.isAtLeastMedium
 import me.him188.ani.app.ui.foundation.layout.paneHorizontalPadding
 import me.him188.ani.app.ui.foundation.session.SelfAvatar
@@ -176,16 +177,15 @@ class UserCollectionsState(
 fun CollectionPage(
     state: UserCollectionsState,
     items: LazyPagingItems<SubjectCollectionInfo>,
-    windowInsets: WindowInsets,
     onClickSearch: () -> Unit,
     onClickSettings: () -> Unit,
     modifier: Modifier = Modifier,
+    windowInsets: WindowInsets = AniWindowInsets.forPageContent(),
     enableAnimation: Boolean = true,
     lazyGridState: LazyGridState = rememberLazyGridState(),
 ) {
     // 如果有缓存, 列表区域要展示缓存, 错误就用图标放在角落
     CollectionPageLayout(
-        windowInsets,
         onClickSettings = onClickSettings,
         sessionError = {
             SessionTipsIcon(state.authState)
@@ -222,6 +222,7 @@ fun CollectionPage(
             items.refresh()
         },
         modifier,
+        windowInsets,
     ) {
         when {
             // 假设没登录, 但是有缓存, 需要展示缓存
@@ -266,14 +267,14 @@ fun CollectionPage(
  */
 @Composable
 private fun CollectionPageLayout(
-    windowInsets: WindowInsets,
     onClickSettings: () -> Unit,
     sessionError: @Composable () -> Unit,
     avatar: @Composable (recommendedSize: DpSize) -> Unit,
     filters: @Composable CollectionPageFilters.() -> Unit,
     isRefreshing: () -> Boolean,
     onRefresh: () -> Unit,
     modifier: Modifier = Modifier,
+    windowInsets: WindowInsets = AniWindowInsets.forPageContent(),
     content: @Composable () -> Unit,
 ) {
     Scaffold(
@@ -282,7 +283,6 @@ private fun CollectionPageLayout(
             Column(modifier = Modifier.fillMaxWidth()) {
                 AniTopAppBar(
                     title = { AniTopAppBarDefaults.Title("追番") },
-                    windowInsets = windowInsets.only(WindowInsetsSides.Top + WindowInsetsSides.Horizontal),
                     modifier = Modifier,
                     actions = {
                         sessionError()
@@ -313,7 +313,7 @@ private fun CollectionPageLayout(
                 filters(CollectionPageFilters)
             }
         },
-        contentWindowInsets = windowInsets.only(WindowInsetsSides.Top),
+        contentWindowInsets = windowInsets.only(WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom),
         containerColor = AniThemeDefaults.pageContentBackgroundColor,
     ) { topBarPaddings ->
         Box(modifier = Modifier.padding(topBarPaddings).fillMaxSize()) {

diff --git a/app/shared/ui-adaptive/src/androidMain/kotlin/ui/adaptive/AniTopAppBar.android.kt b/app/shared/ui-adaptive/src/androidMain/kotlin/ui/adaptive/AniTopAppBar.android.kt
@@ -35,7 +35,6 @@ private fun PreviewAniTopAppBar() = ProvideFoundationCompositionLocalsForPreview
     val scope = rememberCoroutineScope()
     AniTopAppBar(
         title = { Text("MyTitle") },
-        windowInsets = WindowInsets.Zero,
         navigationIcon = { TopAppBarGoBackButton() },
         actions = {
             IconButton({}) {
@@ -55,5 +54,6 @@ private fun PreviewAniTopAppBar() = ProvideFoundationCompositionLocalsForPreview
                 Icon(Icons.Rounded.Search, null)
             }
         },
+        windowInsets = WindowInsets.Zero,
     )
 }
diff --git a/app/shared/ui-adaptive/src/commonMain/kotlin/ui/adaptive/AdaptiveSearchBar.kt b/app/shared/ui-adaptive/src/commonMain/kotlin/ui/adaptive/AdaptiveSearchBar.kt
@@ -20,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
 import androidx.window.core.layout.WindowWidthSizeClass
 import me.him188.ani.app.ui.foundation.LocalPlatform
+import me.him188.ani.app.ui.foundation.layout.AniWindowInsets
 import me.him188.ani.app.ui.foundation.layout.compareTo
 import me.him188.ani.utils.platform.isMobile
 
@@ -36,7 +37,7 @@ fun AdaptiveSearchBar(
     colors: SearchBarColors = SearchBarDefaults.colors(),
     tonalElevation: Dp = SearchBarDefaults.TonalElevation,
     shadowElevation: Dp = SearchBarDefaults.ShadowElevation,
-    windowInsets: WindowInsets = SearchBarDefaults.windowInsets,
+    windowInsets: WindowInsets = AniWindowInsets.forSearchBar(),
     content: @Composable ColumnScope.() -> Unit,
 ) {
     if (currentWindowAdaptiveInfo().windowSizeClass.windowWidthSizeClass >= WindowWidthSizeClass.MEDIUM
@@ -50,7 +51,7 @@ fun AdaptiveSearchBar(
             colors,
             tonalElevation,
             shadowElevation,
-            content,
+            content = content,
         )
     } else {
         SearchBar(