将点击事件传递给 Android Jetpack Compose 中的函数

在 Jetpack Compose 中，我们可以创建函数来创建任何类型的 UI 元素。假设，我们创建一个函数来创建一个Button，我们可以多次使用它来创建多个按钮。在创建多个按钮时，我们可以向它们添加功能来执行任何给定的任务，我们称之为点击事件。因此，在本文中，我们将向您展示如何使用 Jetpack Compose 创建这样的函数并将 On-Click 事件传递给 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.jcpassonclicktofunction
 
import android.os.Bundle
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
 
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 | Change Button Size",
                color = Color.White)},
            backgroundColor = Color(0xff0f9d58)
        ) },
        content = { MyContent()}
    )
}
 
// Creating a composable function to create
// three buttons and add functionality to them
// to add or subtract from the counter value
// Calling this function as content in the above function
@Composable
fun MyContent() {
 
    // Declaring a value to store the counter value
    // Initially this value is set to 0
    val mCounter = remember { mutableStateOf(0)}
 
    Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
         
        // Displaying the mCounter value as Text
        Text(text = mCounter.value.toString(), fontSize = 50.sp)
 
        // Adding a space of 50dp
        Spacer(modifier = Modifier.height(50.dp))
 
        // Calling CreateButton function to create a button,
        // on click will increase counter value by 5
        CreateButton(text = "Add 5") {
            mCounter.value += 5
        }
 
        // Adding a space of 50dp
        Spacer(modifier = Modifier.height(50.dp))
 
        // Calling CreateButton function to create a button,
        // on click will increase counter value by 10
        CreateButton(text = "Add 10") {
            mCounter.value += 10
        }
 
        Spacer(modifier = Modifier.height(50.dp))
 
        // Calling CreateButton function to create a button,
        // on click will decrease counter value by 5
        CreateButton(text = "Subtract 5") {
            mCounter.value -= 5
        }
    }
}
 
// Creating a composable
// function to create a button
@Composable
fun CreateButton(text:String, onClick: ()-> Unit){
    Button(
        onClick = onClick,
        colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58))
    ){
        Text(text = text, color = Color.White)
    }
}
 
// For displaying preview in the
// Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

以下视频是我们的应用程序的工作。您可以看到所有按钮都正常工作，并在单击时更改计数器值。