How to set Box(contentAlignment=CenterVertically40%DownThePage)? Need advanced alignment option for Box

Question

I'm building this screeen from the Android Jetpack Compose lessons, and I want to somewhat-center-vertically the middle / 'Full Name' red box -- but I don't want it fully centered (i.e. 50% down the page), I want it 40% down the page, but the built-in 'contentAlignment' modifiers only cover 'Top', 'Center', and 'Bottom' -- I want something in between.

This is my current code, and it looks fine-ish, but I want to know how to manipulate the vertical alignment of the contents of the Box more fine-grained.

@Composable
fun Profile(){
  Box(
    modifier = Modifier
      .padding(16.dp)
      .fillMaxSize(),
    contentAlignment = Alignment.Center
  ,
  ) {
    Column() {
      // icon
      Text("aslkjdf",
        fontSize = 48.sp)
      // Full Name
      Text("aslkjdf",
        fontSize = 48.sp)
      // Title
      Text("aslkjdf",
        fontSize = 48.sp)
    }
  }
}

Answer 1

You can use the BiasAlignment.
A bias of -1 represents alignment to the start/top, a bias of 0 will represent centering, and a bias of 1 will represent end/bottom.

Just note that the Alignment.Center is defined as:

val Center: Alignment = BiasAlignment(0f, 0f)

You can use something like:

Box(
    modifier = Modifier
        .padding(16.dp)
        .fillMaxSize(),
    contentAlignment =  BiasAlignment(
        horizontalBias = 0f,
        verticalBias = -0.2f
    )
) {
    Column(
        modifier = Modifier.fillMaxWidth().border(1.dp,Red),
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        // icon
        Icon(Icons.Default.Email,"", modifier = Modifier.size(64.dp))
        // Full Name
        Text("FullName",
            fontSize = 36.sp)
        // Title
        Text("Title",
            fontSize = 24.sp)
    }
}

Inside the -1, 1 range, the obtained alignment will position the aligned size fully inside the available space, using as center

val y = centerY * (1 + verticalBias)