title: Jetpack Compose Dynamic Spacer Height
body: <p>I'm using Jetpack Compose version 1.0.2 (latest stable as of today).</p>
  <p>I have a <code>Column</code> of multiple <code>LazyRows</code>, which has an <code>Image</code> and two <code>Text</code>.</p>
  <p><a href="https://i.stack.imgur.com/eVBVM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eVBVM.png" alt="image" /></a></p>
  <p>See the structure below (simplified)</p>
  <pre class="lang-kotlin prettyprint-override"><code>val topicList: List&lt;Topics&gt;
  
  
  Column {
      topicList.forEach { topic -&gt;
  
          val showList: List&lt;Show&gt; = topic.shows
  
          Column {
              Text(text = topic.title)
  
              LazyRow {
                  items(showList) { show -&gt;
                      Column {
                          Image()
                          Text(text = show.title)
                          Text(text = show.info)
                      }
                  }
              }
  
              Spacer(Modifier.height(32.dp))
          }
      }
  }
  </code></pre>
  <p>The problem is the <code>Text</code> composables with <code>show.title</code> and <code>show.info</code> can be multiple lines, and as each item is lazy loaded, the height is not calculated until it shows up on the screen. As a result, the next row's <code>y</code> position jumps around.</p>
  <p>To understand what's going on, please see this video: <a href="https://drive.google.com/file/d/1cZKP9x8gqAgiXcH7BwGuoGSk6iOR7KVo/view?usp=sharing" rel="nofollow noreferrer">Video link</a></p>
  <p>How can I dynamically calculate the <code>Spacer</code>'s height so that they are not jumping? I know the easy solution would be just giving a fixed height, but some texts are just one liner and those will have bigger gaps so it's not really ideal for me I think.</p>