我们如何在 Jetpack Compose 的底部表单中使用 onLongClick 侦听器？

Question

I am try to learn jetpack compose, and I want to apply bottom sheet for on long click listener, I have example of code below, and I try to use bottom sheet for onLongClick listener, but I have some confused about how can I apply for row data? I had some example but I do not have an idea about this problem?

@Composable
fun BSDataScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(initialValue = 
 ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetContent = {

            SheetScreen()
        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 15.dp, topEnd = 15.dp),
        sheetBackgroundColor = Color.White,
      
    ) {
        Scaffold(

            backgroundColor =  Color.White,
        ) {
            DataScreen(
                scope = scope, state = modalBottomSheetState)}}}

@Composable
fun DataScreen(
    scope: CoroutineScope,
    state: ModalBottomSheetState
  ) {


    val listOfData = listOf(
        Data( painterResource(R.drawable.image1)),
        Data(painterResource(R.drawable.image2)),
        Data(painterResource(R.drawable.image3),)

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)

    ) {

        LazyColumn(
            modifier = Modifier

        ) {

            items(listOfData.size) { index ->
                DataListItem(listOfData[index])}}}}


@Composable
fun DataListItem(data: Data) {

    val context = LocalContext.current

    Column(
        modifier = Modifier.padding(5.dp)
    ) {

        Row(

            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp)
                .combinedClickable(
                    onLongClick= {
                scope.launch {
                    state.show()
                }},)

        ) {

            Image(
                painter = data.painter,
                contentDescription = null,)}}}
      

Answer 1

You can create a lambda onClick: (Data) -> Unit and hoist state from DataListItem to DataScreen for each item

@Composable
fun DataListItem(data: Data, onLongClick: (Data) -> Unit) {

    val context = LocalContext.current

    Column(
        modifier = Modifier.padding(5.dp)
    ) {

        Row(modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp)
                    .combinedClickable(
                    onClick = {

                    },
                    onLongClick = {
                      onLongClick(data)
                    }
                )
        ) {
        }
    }
}

And in DataScreen

  LazyColumn(
    modifier = Modifier

) {

    items(listOfData.size) { index ->
        DataListItem(listOfData[index]) { data: Data->
            // you can call bottom sheet or pass data if required
            scope.launch {
                state.show()
            }
        }
    }
}