Refactor(ToolBar): Optimize top bar and bottom bar

Completely hide the top bar and bottom bar when scrolling
This commit is contained in:
2024-04-23 15:04:00 +08:00
parent 8ed9d6942a
commit 54a7625c1b
2 changed files with 15 additions and 3 deletions

View File

@@ -111,7 +111,8 @@ fun OxygenApp(appState: OxygenAppState) {
visible = appState.shouldShowBottomBar && destination != null, visible = appState.shouldShowBottomBar && destination != null,
enter = slideInVertically { it }) { enter = slideInVertically { it }) {
BottomAppBar( BottomAppBar(
scrollBehavior = bottomAppBarScrollBehavior scrollBehavior = bottomAppBarScrollBehavior,
windowInsets = WindowInsets(0)
) { ) {
OxygenBottomBar( OxygenBottomBar(
destinations = appState.topLevelDestinations, destinations = appState.topLevelDestinations,
@@ -154,7 +155,8 @@ fun OxygenApp(appState: OxygenAppState) {
actionIcon = OxygenIcons.MoreVert, actionIcon = OxygenIcons.MoreVert,
actionIconContentDescription = stringResource(R.string.feature_settings_top_app_bar_action_icon_description), actionIconContentDescription = stringResource(R.string.feature_settings_top_app_bar_action_icon_description),
colors = TopAppBarDefaults.centerAlignedTopAppBarColors( colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
containerColor = Color.Transparent containerColor = Color.Transparent,
scrolledContainerColor = Color.Transparent
), ),
onNavigationClick = { appState.navigateToSearch() }, onNavigationClick = { appState.navigateToSearch() },
onActionClick = { showSettingsDialog = true } onActionClick = { showSettingsDialog = true }

View File

@@ -1,6 +1,8 @@
package top.fatweb.oxygen.toolbox.ui.component package top.fatweb.oxygen.toolbox.ui.component
import androidx.annotation.StringRes import androidx.annotation.StringRes
import androidx.compose.animation.core.animateIntAsState
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.material3.CenterAlignedTopAppBar import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
@@ -11,10 +13,13 @@ import androidx.compose.material3.TopAppBarColors
import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.material3.TopAppBarScrollBehavior
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import top.fatweb.oxygen.toolbox.icon.OxygenIcons import top.fatweb.oxygen.toolbox.icon.OxygenIcons
import top.fatweb.oxygen.toolbox.ui.theme.OxygenTheme import top.fatweb.oxygen.toolbox.ui.theme.OxygenTheme
import android.R as androidR import android.R as androidR
@@ -33,6 +38,10 @@ fun OxygenTopAppBar(
onNavigationClick: () -> Unit = {}, onNavigationClick: () -> Unit = {},
onActionClick: () -> Unit = {} onActionClick: () -> Unit = {}
) { ) {
val topInset by animateIntAsState(
if (-scrollBehavior?.state?.heightOffset!! >= with(LocalDensity.current) { 64.0.dp.toPx() }) 0
else TopAppBarDefaults.windowInsets.getTop(LocalDensity.current), label = ""
)
CenterAlignedTopAppBar( CenterAlignedTopAppBar(
modifier = modifier, modifier = modifier,
scrollBehavior = scrollBehavior, scrollBehavior = scrollBehavior,
@@ -55,7 +64,8 @@ fun OxygenTopAppBar(
) )
} }
}, },
colors = colors colors = colors,
windowInsets = WindowInsets(top = topInset)
) )
} }