Refactor(TopBar): Optimize TopBar

Optimize TopBar in AboutScreen and LibrariesScreen

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/AboutScreen.kt

@@ -4,19 +4,31 @@ import androidx.compose.foundation.Image
 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.WindowInsetsSides
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.safeDrawingPadding
-import androidx.compose.material3.Icon
+import androidx.compose.foundation.layout.windowInsetsPadding
-import androidx.compose.material3.IconButton
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
@@ -24,6 +36,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import top.fatweb.oxygen.toolbox.R
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
+import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar
 import top.fatweb.oxygen.toolbox.ui.theme.OxygenPreviews
 import top.fatweb.oxygen.toolbox.ui.theme.OxygenTheme
 import top.fatweb.oxygen.toolbox.ui.util.ResourcesUtils
@@ -39,43 +52,56 @@ internal fun AboutRoute(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun AboutScreen(
     modifier: Modifier = Modifier, onBackClick: () -> Unit, onNavigateToLibraries: () -> Unit
 ) {
-    Column(
+    val scrollState = rememberScrollState()
-        modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally
+    val topAppBarScrollBehavior =
-    ) {
+        TopAppBarDefaults.enterAlwaysScrollBehavior(canScroll = { scrollState.maxValue > 0 })
-        AboutToolBar(
-            onBackClick = onBackClick
-        )
-        Spacer(
-            modifier = Modifier.height(64.dp)
-        )
-        AboutAppInfo()
-        Spacer(
-            modifier = Modifier.weight(1f)
-        )
-        AboutFooter(
-            onNavigateToLibraries = onNavigateToLibraries
-        )
-    }
-}
 
-@Composable
+    Scaffold(
-private fun AboutToolBar(
+        modifier = Modifier
-    modifier: Modifier = Modifier, onBackClick: () -> Unit
+            .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection),
-) {
+        containerColor = Color.Transparent,
-    Row(
+        contentWindowInsets = WindowInsets(0, 0, 0, 0),
-        modifier = modifier
+        topBar = {
-            .fillMaxWidth()
+            OxygenTopAppBar(
-            .padding(8.dp),
+                scrollBehavior = topAppBarScrollBehavior,
-        verticalAlignment = Alignment.CenterVertically
+                titleRes = R.string.feature_settings_more_about,
-    ) {
+                navigationIcon = OxygenIcons.Back,
-        IconButton(onClick = onBackClick) {
+                navigationIconContentDescription = stringResource(R.string.core_back),
-            Icon(
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-                imageVector = OxygenIcons.ArrowBack,
+                    containerColor = Color.Transparent,
-                contentDescription = stringResource(R.string.core_back)
+                    scrolledContainerColor = Color.Transparent
+                ),
+                onNavigationClick = onBackClick
+            )
+        }
+    ) { padding ->
+        Column(
+            modifier = modifier
+                .fillMaxWidth()
+                .fillMaxHeight()
+                .padding(padding)
+                .consumeWindowInsets(padding)
+                .windowInsetsPadding(
+                    WindowInsets.safeDrawing.only(
+                        WindowInsetsSides.Horizontal
+                    )
+                )
+                .verticalScroll(scrollState), horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Spacer(
+                modifier = Modifier.height(64.dp)
+            )
+            AboutAppInfo()
+            Spacer(
+                modifier = Modifier.weight(1f)
+            )
+            AboutFooter(
+                onNavigateToLibraries = onNavigateToLibraries
             )
         }
     }
@@ -136,14 +162,6 @@ private fun AboutFooter(
     }
 }
 
-@OxygenPreviews
-@Composable
-fun AboutToolBarPreview() {
-    OxygenTheme {
-        AboutToolBar(onBackClick = {})
-    }
-}
-
 @OxygenPreviews
 @Composable
 fun AboutAppInfoPreview() {

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/about/LibrariesScreen.kt

@@ -11,10 +11,13 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.safeDrawingPadding
@@ -29,11 +32,12 @@ import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridS
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Icon
+import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -41,6 +45,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
@@ -49,6 +55,7 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import top.fatweb.oxygen.toolbox.R
 import top.fatweb.oxygen.toolbox.icon.OxygenIcons
+import top.fatweb.oxygen.toolbox.ui.component.OxygenTopAppBar
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.DraggableScrollbar
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.rememberDraggableScroller
 import top.fatweb.oxygen.toolbox.ui.component.scrollbar.scrollbarState
@@ -70,6 +77,7 @@ internal fun LibrariesRoute(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun LibrariesScreen(
     modifier: Modifier = Modifier,
@@ -93,16 +101,39 @@ internal fun LibrariesScreen(
     var dialogContent by remember { mutableStateOf("") }
     var dialogUrl by remember { mutableStateOf("") }
 
-    Column(
+    val topAppBarScrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
-        modifier = modifier
+
-    ) {
+    Scaffold(
-        LibrariesToolBar(
+        modifier = Modifier
-            onBackClick = onBackClick
+            .nestedScroll(topAppBarScrollBehavior.nestedScrollConnection),
-        )
+        containerColor = Color.Transparent,
+        contentWindowInsets = WindowInsets(0, 0, 0, 0),
+        topBar = {
+            OxygenTopAppBar(
+                scrollBehavior = topAppBarScrollBehavior,
+                titleRes = R.string.feature_settings_open_source_license,
+                navigationIcon = OxygenIcons.Back,
+                navigationIconContentDescription = stringResource(R.string.core_back),
+                actionIcon = OxygenIcons.Search,
+                actionIconContentDescription = stringResource(R.string.core_search),
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                    containerColor = Color.Transparent,
+                    scrolledContainerColor = Color.Transparent
+                ),
+                onNavigationClick = onBackClick
+            )
+        }
+    ) { padding ->
         Box(
             modifier
                 .fillMaxWidth()
-                .weight(1f)
+                .padding(padding)
+                .consumeWindowInsets(padding)
+                .windowInsetsPadding(
+                    WindowInsets.safeDrawing.only(
+                        WindowInsetsSides.Horizontal
+                    )
+                )
         ) {
             when (librariesScreenUiState) {
                 LibrariesScreenUiState.Loading -> {
@@ -192,25 +223,6 @@ internal fun LibrariesScreen(
     }
 }
 
-@Composable
-private fun LibrariesToolBar(
-    modifier: Modifier = Modifier, onBackClick: () -> Unit
-) {
-    Row(
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(8.dp),
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        IconButton(onClick = onBackClick) {
-            Icon(
-                imageVector = OxygenIcons.ArrowBack,
-                contentDescription = stringResource(R.string.core_back)
-            )
-        }
-    }
-}
-
 fun howManyItems(librariesScreenUiState: LibrariesScreenUiState) =
     when (librariesScreenUiState) {
         LibrariesScreenUiState.Loading -> 0

app/src/main/kotlin/top/fatweb/oxygen/toolbox/ui/component/OxygenTopAppBar.kt

@@ -30,10 +30,10 @@ fun OxygenTopAppBar(
     modifier: Modifier = Modifier,
     scrollBehavior: TopAppBarScrollBehavior? = null,
     @StringRes titleRes: Int,
-    navigationIcon: ImageVector,
+    navigationIcon: ImageVector? = null,
-    navigationIconContentDescription: String,
+    navigationIconContentDescription: String? = null,
-    actionIcon: ImageVector,
+    actionIcon: ImageVector? = null,
-    actionIconContentDescription: String,
+    actionIconContentDescription: String? = null,
     colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(),
     onNavigationClick: () -> Unit = {},
     onActionClick: () -> Unit = {}
@@ -47,21 +47,25 @@ fun OxygenTopAppBar(
         scrollBehavior = scrollBehavior,
         title = { Text(stringResource(titleRes)) },
         navigationIcon = {
-            IconButton(onClick = onNavigationClick) {
+            navigationIcon?.let {
-                Icon(
+                IconButton(onClick = onNavigationClick) {
-                    imageVector = navigationIcon,
+                    Icon(
-                    contentDescription = navigationIconContentDescription,
+                        imageVector = navigationIcon,
-                    tint = MaterialTheme.colorScheme.onSurface
+                        contentDescription = navigationIconContentDescription,
-                )
+                        tint = MaterialTheme.colorScheme.onSurface
+                    )
+                }
             }
         },
         actions = {
-            IconButton(onClick = onActionClick) {
+            actionIcon?.let {
-                Icon(
+                IconButton(onClick = onActionClick) {
-                    imageVector = actionIcon,
+                    Icon(
-                    contentDescription = actionIconContentDescription,
+                        imageVector = actionIcon,
-                    tint = MaterialTheme.colorScheme.onSurface
+                        contentDescription = actionIconContentDescription,
-                )
+                        tint = MaterialTheme.colorScheme.onSurface
+                    )
+                }
             }
         },
         colors = colors,

app/src/main/res/values-zh/strings.xml

@@ -8,6 +8,7 @@
     <string name="core_close">关闭</string>
     <string name="core_unknown">未知</string>
     <string name="core_website">网站</string>
+    <string name="core_search">搜索</string>
     <string name="core_no_connect">⚠️ 无法连接至互联网</string>
     <string name="feature_tools_title">工具</string>
     <string name="feature_star_title">收藏</string>

app/src/main/res/values/strings.xml

@@ -7,6 +7,7 @@
     <string name="core_close">Close</string>
     <string name="core_unknown">Unknown</string>
     <string name="core_website">Website</string>
+    <string name="core_search">Search</string>
     <string name="core_no_connect">⚠️ Unable to connect to the internet</string>
     <string name="feature_tools_title">Tools</string>
     <string name="feature_star_title">Star</string>