How we can use clickable property for different icons with row in jetpack compose?

Question

I want to apply clickable for two different button in two different row in jetpack compose, but I did not find any way to do it, I know we can apply it like that

 modifier = Modifier
              .clickable {}

for Text or Image, but I have two

painter = painterResource(id = R.drawable.ic_icon)

and

painter = painterResource(id = R.drawable.ic_icon2)

in rows, is there any solution it?

  class MyActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyScreen()
        }
    }

}
@Composable
fun MyScreen(

) {

    val context = LocalContext.current


            Column(
                modifier = Modifier.fillMaxSize()
            ) {

               MainRow(

                painter = painterResource(id = R.drawable.ic_icon)

               )

                MainRow(
                    painter = painterResource(id = R.drawable.ic_icon2)
                )
          }
        }
@Composable
fun MainRow(
    painter: Painter
   

) {

        Row(
            modifier = Modifier
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {

           

            Image(

            painter = painter,
            contentDescription = null,
            modifier = Modifier
                .size(25.dp),
                


            )

        }
    }

Answer 1

Pass onClick to MainRow:

@Composable
fun MainRow(
    painter: Painter,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier.clickable(onClick = onClick),
    ){}
}