如何使用 Jetpack Compose 在 Android 中创建折叠工具栏？

Android 中的工具栏是应用程序屏幕顶部的一个元素，通常显示应用程序名称。在我们的示例中，我们正在创建一个修改过的工具栏，即折叠工具栏，当应用程序向下滚动时它会折叠起来，而当应用程序向上滚动到顶部时它会保持不动。下面是折叠工具栏出现的动画：

在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 中创建折叠工具栏。 IDE 准备就绪后，请按照以下步骤操作。

分步实施

第 1 步：在 Android Studio 中创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。选择模板时，选择Empty Compose Activity 。如果您没有找到此模板，请尝试将 Android Studio 升级到最新版本。我们在Kotlin中演示了该应用程序，因此请确保在创建新项目时选择 Kotlin 作为主要语言。

第 2 步：使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

Kotlin

package com.geeksforgeeks.jccollapsingtoolbar
  
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
  
            // Creating a Simple Scaffold
            // Layout for the application
            Scaffold(
  
                // Creating a Top Bar
                topBar = { TopAppBar(title = { Text("GFG | Collapsing Toolbar", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
  
                // Creating Content
                content = {
  
                    // Creating a Column Layout
                    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
  
                        // Creating a Scrollable list of 100 items
                        val items = (1..100).map { "Item $it" }
                        val lazyListState = rememberLazyListState()
                        var scrolledY = 0f
                        var previousOffset = 0
                        LazyColumn(
                            Modifier.fillMaxSize(),
                            lazyListState,
                        ) {
                            // Setting the Image as the first
                            // item and making it collapsable
                            item {
                                Image(
                                    painter = painterResource(id = R.drawable.sample_image),
                                    contentDescription = null,
                                    contentScale = ContentScale.FillWidth,
                                    modifier = Modifier
                                        .graphicsLayer {
                                            scrolledY += lazyListState.firstVisibleItemScrollOffset - previousOffset
                                            translationY = scrolledY * 0.5f
                                            previousOffset = lazyListState.firstVisibleItemScrollOffset
                                        }
                                        .height(240.dp)
                                        .fillMaxWidth()
                                )
                            }
                              
                            // Displaying the remaining 100 items
                            items(items) {
                                Text(
                                    text = it,
                                    Modifier
                                        .background(Color.White)
                                        .fillMaxWidth()
                                        .padding(8.dp)
                                )
                            }
                        }
                    }
                }
            )
        }
    }
}

输出：

在下面录制的视频中，您可以看到工具栏在向下滚动时折叠并在滚动回顶部时保持。