title: How to bring a widget front when it is focused(or selected ) in jetpack compose
body: <p>I have a page like this:</p>
  <p><a href="https://i.stack.imgur.com/Ao8Nf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ao8Nf.png" alt="enter image description here" /></a></p>
  <p>When one box is focused, it will be scaled. I use <code>Modifier.graphicsLayer()</code> to scale it.</p>
  <p>but the scaled box will be covered by other boxes(box01 is covered by box02,box04 and box 05)</p>
  <p><a href="https://i.stack.imgur.com/vM9ST.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vM9ST.png" alt="enter image description here" /></a></p>
  <p>what I actually need is: the scaled box covers other boxes,like this:</p>
  <p><a href="https://i.stack.imgur.com/hxeAs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hxeAs.png" alt="enter image description here" /></a></p>
  <p>My Sample Code:</p>
  <pre><code>@Composable
  fun FocusBox(
      title:String,
      requester: FocusRequester = FocusRequester(),
      modifier: Modifier = Modifier
  ) {
      var boxColor by remember { mutableStateOf(Color.White) }
      var scale by remember { mutableStateOf(1f) }
      Box(
          Modifier
              .focusRequester(requester)
              .onFocusChanged {
                  boxColor = if (it.isFocused) Color.Green else Color.Gray
                  scale = if (it.isFocused) { 1.3f } else { 1f }
              }
              .focusable()
              .graphicsLayer(
                  scaleX = scale,
                  scaleY = scale
              ).background(boxColor)
      ) {
          Text(
              text = title,
              modifier = Modifier.padding(30.dp),
              color = Color.White,
              style = MaterialTheme.typography.subtitle2
          )
      }
  }
  
  @Composable
  fun FocusScaleBoxDemo(){
      Row(modifier = Modifier.padding(30.dp)){
          Column{
              FocusBox(title = &quot;Box_01&quot;)
              Spacer(modifier = Modifier.padding(5.dp))
              FocusBox(title = &quot;Box_02&quot;)
              Spacer(modifier = Modifier.padding(5.dp))
              FocusBox(title = &quot;Box_03&quot;)
              Spacer(modifier = Modifier.padding(5.dp))
          }
          Spacer(modifier = Modifier.padding(5.dp))
          Column{
              FocusBox(title = &quot;Box_04&quot;)
              Spacer(modifier = Modifier.padding(5.dp))
              FocusBox(title = &quot;Box_05&quot;)
              Spacer(modifier = Modifier.padding(5.dp))
              FocusBox(title = &quot;Box_06&quot;)
              Spacer(modifier = Modifier.padding(5.dp))
          }
      }
  }
  </code></pre>