使用 Jetpack Compose 在 Android 中滑动底页

Bottom Sheet 是一个材料设计组件，它从屏幕底部向上滑动以显示应用程序的附加内容。它就像一条消息，在用户操作时被调用或出现。底板广泛用于现代应用中。例如，底部表格出现在需要进行应用内购买的游戏中。

在本文中，我们将向您展示如何使用 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.jcbottomsheet
  
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch
  
class MainActivity : ComponentActivity() {
    @ExperimentalMaterialApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Calling the composable function
            // to display element and its contents
            MainContent()
        }
    }
}
  
// Creating a composable 
// function to display Top Bar
@ExperimentalMaterialApi
@Composable
fun MainContent() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("GFG | Bottom Sheet", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
        content = { MyContent() }
    )
}
  
// Creating a composable function to
// create a Button and a Bottom Sheet
// Calling this function as content 
// in the above function
@ExperimentalMaterialApi
@Composable
fun MyContent(){
  
    // Declaring a Boolean value to 
    // store bottom sheet collapsed state
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = 
      BottomSheetState(BottomSheetValue.Collapsed))
  
    // Declaing Coroutine scope
    val coroutineScope = rememberCoroutineScope()
  
    // Creating a Bottom Sheet
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent =  {
            Box(Modifier.fillMaxWidth().height(200.dp).background(Color(0XFF0F9D58))) {
                Column(Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
                    Text(text = "Hello Geek!", fontSize = 20.sp, color = Color.White)
                }
            }
        },
        sheetPeekHeight = 0.dp
    ){}
  
    Column(
        Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
  
        // Creating a button that changes 
        // bottomSheetScaffoldState value upon click
        // when bottomSheetScaffoldState is collpased, 
        // it expands and vice-versa
        Button(onClick = {
            coroutineScope.launch {
                if (bottomSheetScaffoldState.bottomSheetState.isCollapsed){
                    bottomSheetScaffoldState.bottomSheetState.expand()
                }else{
                    bottomSheetScaffoldState.bottomSheetState.collapse()
                }
            }
        }, colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58))) {
            Text(text = "Click Me", color = Color.White)
        }
    }
}
  
// For displaying preview in 
// the Android Studio IDE emulator
@ExperimentalMaterialApi
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

您可以在下面的视频中看到单击按钮时底部工作表会向上滑动。