title: LazyColumn with ConstraintLayout in android jetpack compose
body: <p>I'm going to put a label on the top for each column and a <code>LazyСolumn</code> on the bottom. As follows.</p>
  <p><a href="https://i.stack.imgur.com/uckGJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uckGJ.png" alt="enter image description here" /></a></p>
  <p>However, when I filled it out, the screen other than I expected appeared:</p>
  <p><a href="https://i.stack.imgur.com/pV0FA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pV0FA.png" alt="enter image description here" /></a></p>
  <p>Is there anything else I need to set up? Here is my code</p>
  <pre><code>@Composable
  fun MenuDetailList(
      loading: Boolean,
      type: String,
      items: List&lt;Any&gt;,
      page: Int,
      onChangeScrollPosition: (Int) -&gt; Unit,
      onTriggerNextPage: () -&gt; Unit,
      onCallCacheDialog: (Int) -&gt; Unit
  ) {
      val configuration = LocalConfiguration.current
      val screenHeight = configuration.screenHeightDp.dp
  
      Box(
          modifier = Modifier
              .background(color = MaterialTheme.colors.surface)
      ) {
          if (loading &amp;&amp; items.isEmpty()) {
              LoadingShimmer(imageHeight = screenHeight)
          }else if (items.isEmpty()) {
              NothingHere()
          }else {
              ConstraintLayout(
                  modifier = Modifier
                      .fillMaxSize()
                      .background(color = Color.White)
              ) {
                  val (label, list) = createRefs()
                  TopAppBar(
                      modifier = Modifier
                          .constrainAs(label) {
                              top.linkTo(parent.top)
                              start.linkTo(parent.start)
                              end.linkTo(parent.end)
                          }
                  ) {
                      MenuDetailLabel()
                  }
                  LazyColumn(
                      modifier = Modifier
                          .background(color = Color.Blue)
                  ) {
                      itemsIndexed(
                          items = items
                      ) { index, detail -&gt;
                          onChangeScrollPosition(index)
                          if ((index + 1) &gt;= (page * PAGE_SIZE) &amp;&amp; !loading) {
                              onTriggerNextPage()
                          }
                          when(type) {
                              &quot;purchase&quot; -&gt; {
                                  PurchaseCard(
                                      purchase = detail as Purchase,
                                      onClick = onCallCacheDialog
                                  )
                              }
                          }
                      }
                  }
              }
          }
      }
  }
  </code></pre>