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

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),
                


            )

        }
    }

CodePudding user response：

You need to set your click listener at the point where you are calling the composable function with Modifier MainRow(), so that different click action can be called.

Add extra parameter Modifier to MainRow()

    MainRow(
        painter = painterResource(id = R.drawable.ic_icon),
        modifier = Modifier.clickable(onClick = {
            // Action to perform
        })
    )

    MainRow(
        painter = painterResource(id = R.drawable.ic_icon2),
        modifier = Modifier.clickable(onClick = {
            // Action to perform
        })
    )

Now added that Modifier argument for invoked function to make use of existing Modifier.

@Composable
fun MainRow(
    painter: Painter,
    modifier: Modifier
) {
    Row(
        modifier = modifier.padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painter,
            contentDescription = null,
            modifier = modifier.size(25.dp))
    }
}

Final changes

@Composable
fun MyScreen() {
    
    val context = LocalContext.current

    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        MainRow(
            painter = painterResource(id = R.drawable.ic_icon),
            modifier = Modifier.clickable(onClick = {
                // Action to perform
            })
        )

        MainRow(
            painter = painterResource(id = R.drawable.ic_icon2),
            modifier = Modifier.clickable(onClick = {
                // Action to perform
            })
        )
    }
}

CodePudding user response：

Pass onClick to MainRow:

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