使用 Jetpack Compose 在 Android 中切换按钮

Android 中的 Switch 或 Switch Button 是一种 UI 元素，用于在单击时在两种状态之间切换。可以将其假定为具有两个不同值的布尔按钮。您可能会在您的 Android 设备中找到 Switch 的一些状态可以是 Wi-fi 开和关、蓝牙开和关、暗模式和亮模式等。

在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 中实现 Switch Button 并检查其 CheckedState。 IDE 准备就绪后，请按照以下步骤操作。

分步实施

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

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

第 2 步：使用 MainActivity.kt 文件

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

Kotlin

package com.geeksforgeeks.jcswitch
  
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
  
class MainActivity : ComponentActivity() {
    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
@Composable
fun MainContent() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("GFG | Switch", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
        content = { MyContent() }
    )
}
  
// Creating a composable function to 
// create two Images and a spacer between them
// Calling this function as content 
// in the above function
@Composable
fun MyContent(){
  
    // Fetching the Local Context
    val mContext = LocalContext.current
  
    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
  
        // Declaring a boolean value for storing checked state
        val mCheckedState = remember{ mutableStateOf(false)}
  
        // Creating a Switch, when value changes,
        // it updates mCheckedState value
        Switch(checked = mCheckedState.value, onCheckedChange = {mCheckedState.value = it})
  
        // Adding a Space of 100dp height
        Spacer(modifier = Modifier.height(100.dp))
          
        // Creating a Button to display mCheckedState
        // value in a Toast when clicked
        Button(onClick = {
            Toast.makeText(mContext, mCheckedState.value.toString(), Toast.LENGTH_SHORT).show()
        },
            colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58)),
        ) {
            Text("Show Checked State", color = Color.White)
        }
    }
}
  
// For displaying preview in 
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

当您运行应用程序时，您会看到 Switch 最初为 false。当您单击按钮时，它将显示一个写有“假”的 Toast。现在，当您单击 Switch 时，它变为 true，如果单击 Button，它将显示一个写有“true”的 Toast。您可以在此应用程序的以下视频中看到这种情况。