title: How can I keep expand item of a column control in Compose?
body: <p>The Code A is from the official sample code <a href="https://developer.android.com/codelabs/jetpack-compose-basics#10" rel="nofollow noreferrer">here</a>.</p>
  <p>And author told me the following content:</p>
  <p><em>If you expand item number 1, you scroll away to number 20 and come back to 1, you'll notice that 1 is back to the original size.</em></p>
  <p><strong>Question 1</strong>: Why will the expand item be restored to original size after scroll forward then backward items with Code A?</p>
  <p><strong>Question 2</strong>: How can I keep expand item after scroll forward then backward items ?</p>
  <p><strong>Code A</strong></p>
  <pre><code>@Composable
  private fun Greetings(names: List&lt;String&gt; = List(1000) { &quot;$it&quot; } ) {
      LazyColumn(modifier = Modifier.padding(vertical = 4.dp)) {
          items(items = names) { name -&gt;
              Greeting(name = name)
          }
      }
  }
  
  @Composable
  private fun Greeting(name: String) {    
      var expanded by remember { mutableStateOf(false) }    
      val extraPadding by animateDpAsState(                
          if (expanded) 48.dp else 0.dp
      ) 
  
      Surface(
          color = MaterialTheme.colors.primary,
          modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
      ) {
          Row(modifier = Modifier.padding(24.dp)) {
              Column(modifier = Modifier
                  .weight(1f)
                  .padding(bottom = extraPadding)
              ) {
                  Text(text = &quot;Hello, &quot;)
                  Text(text = name)
              }
              OutlinedButton(
                  onClick = { expanded = !expanded }
              ) {
                  Text(if (expanded) &quot;Show less&quot; else &quot;Show more&quot;)
              }
  
          }
      }
  }
  </code></pre>
  <p><strong>Added Content</strong></p>
  <p><strong>Question 3</strong>: If I use Code B, I find the expand items can be kept after I scroll forward then backward items. why ?</p>
  <p><strong>Code B</strong></p>
  <pre><code>@Composable
  private fun Greetings(names: List&lt;String&gt; = List(50) { &quot;$it&quot; } ) {
      Column(
          modifier = Modifier.fillMaxSize().verticalScroll(rememberScrollState())
      )
      {
          for (name in names) {
              Greeting(name = name)
          }
      }
  }
  
  ... 
  </code></pre>
  <p><strong>Again:</strong></p>
  <p>I rewrite Code C by jVCODE's suggestion, it works, the expand items can be kept after I scroll forward then backward items after I replace <code>var expanded by remember { mutableStateOf(false) }</code> with <code>var expanded by rememberSaveable { mutableStateOf(false) }</code>.</p>
  <p>According to Arpit Shukla's view point:</p>
  <p><em>When you scroll in LazyColumn, the composables that are no longer visible get removed from the composition tree and when you scroll back to them, they are composed again from scratch. That is why expanded is initialized to false again.</em></p>
  <p>In my mind, the <code>rememberSaveable</code> will only be available when I rotate screen.</p>
  <p>So I think <code>var expanded by rememberSaveable { mutableStateOf(false) }</code> will be relaunched and assigned as false when I scroll forward then backward items, and the expand items will be restored to original size. But in fact the expand items can be kept after I scroll forward then backward items.</p>
  <p><strong>Question 4</strong>:  Why can <code>rememberSaveable</code> work well in this scenarios?</p>
  <p><strong>Code C</strong></p>
  <pre><code>  @Composable
      private fun Greetings(names: List&lt;String&gt; = List(1000) { &quot;$it&quot; } ) {
          LazyColumn(modifier = Modifier.padding(vertical = 4.dp)) {
              items(items = names) { name -&gt;
                  Greeting(name = name)
              }
          }
      }
  
      @Composable
      private fun Greeting(name: String) {    
        var expanded by rememberSaveable { mutableStateOf(false) }
         ...
      }
  </code></pre>