Home > database >  How to recompose a composable after an event occured in the main Activity?
How to recompose a composable after an event occured in the main Activity?

Time:11-10

I created an event listener to catch when a physical button is pressed, and it works well. But I would want to update a list used in a LazyColumn

class MainActivity : ComponentActivity() {
   @OptIn(ExperimentalComposeUiApi::class)
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           Theme {
               Surface(
                   modifier = Modifier                   .fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Column(modifier = Modifier.fillMaxSize()) {
                       Greeting("Android")
                   }
               }
           }
       }
   }

   @SuppressLint("RestrictedApi")
   override fun dispatchKeyEvent(event: KeyEvent?): Boolean {
      // Handling event to get a text (type String)
      // ......

      //then updating my list
      myList =newValue
   }


var myList: List<String> = mutableListOf()

@OptIn(ExperimentalFoundationApi::class, ExperimentalComposeUiApi::class)
@Composable
fun Greeting(name: String, paramBarcode: String) {
   var mutableList by remember {mutableStateOf(myList)}
   
   Button(onClick = {
      myList = "new item"
      mutableList = myList
   }) {
      Text(text = "Add")
   }

   LazyColumn(Modifier.fillMaxSize()            .padding(16.dp)
   ) {
       stickyHeader {Row(Modifier.fillMaxSize()                  .background(Color.Green)
           ) {
               TableCell(text = "Code", width = 264)
           }
       }
       itemsIndexed(items = mutableList, itemContent = {
          index, item ->
           Row(Modifier.fillMaxSize(),
           ) {
               TableCell(text = item, width = 256)
           }
       })
   }
}

If I try to add or remove an element of the list from my composable, everything is fine, but I can't get the same behaviour from my event.

I also tried to pass the list as a parameter to my composable, but it didn't help at all.

CodePudding user response:

Try using a SnapshotStateList instead of an ordinary list as mutable state.

So instead of this

var myList: List<String> = mutableListOf()

try this,

var myList = mutableStateListOf("Item1")

and instead of using your ordinary list setting it with a new one every time you add an item, you can simply add new elements to a SnapshotStateList.

I modified your code and any changes coming from outside Greeting and inside of it reflects to LazyColumn

@Composable
fun Greeting(
     list: SnapshotStateList<String>
) {
    Button(onClick = {
        list.add("Item inside greeting")
    }) {
        Text(text = "Add")
    }

    LazyColumn(
        Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) { ... }
}

Usage

setContent {
     Column {
          Button(onClick = {
                  myList.add("New Item Outside greeting")
          }) {}

          Greeting(myList)
     }
}
  • Related