如何设置Box内容垂直对齐至页面40%处？Compose进阶对齐需求

要让“全名”文本垂直对齐到页面40%的位置，有几种实用方案：

方案一：自定义Alignment参数 #

Box的contentAlignment支持自定义Alignment对象，通过垂直偏移系数直接指定位置——0代表顶部，1代表底部，0.4正好对应40%的垂直位置：

@Composable
fun Profile(){
  Box(
    modifier = Modifier
      .padding(16.dp)
      .fillMaxSize(),
    // 水平居中，垂直40%位置
    contentAlignment = Alignment(horizontalBias = 0f, verticalBias = 0.4f)
  ) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
      Text("图标占位", fontSize = 48.sp)
      // 全名
      Text("你的全名", fontSize = 48.sp)
      Text("职位头衔", fontSize = 48.sp)
    }
  }
}

方案二：利用Offset动态计算偏移量 #

如果需要更灵活的像素级控制，可以通过LocalDensity获取屏幕高度，计算出从居中位置到40%位置的偏移量，再用Modifier.offset调整Column位置：

@Composable
fun Profile(){
  val density = LocalDensity.current
  val screenHeight = LocalConfiguration.current.screenHeightDp.dp
  // 从居中(50%)到40%，需要向上偏移10%的屏幕高度
  val offsetY = with(density) { -(screenHeight * 0.1f).toPx() }

  Box(
    modifier = Modifier
      .padding(16.dp)
      .fillMaxSize(),
    contentAlignment = Alignment.Center
  ) {
    Column(
      horizontalAlignment = Alignment.CenterHorizontally,
      modifier = Modifier.offset(y = offsetY)
    ) {
      Text("图标占位", fontSize = 48.sp)
      Text("你的全名", fontSize = 48.sp)
      Text("职位头衔", fontSize = 48.sp)
    }
  }
}

方案三：使用ConstraintLayout精准约束 #

如果布局复杂度高，ConstraintLayout能更直观地绑定控件位置，直接让“全名”的中心对齐到父布局40%的垂直位置：

@Composable
fun Profile(){
  ConstraintLayout(Modifier.fillMaxSize().padding(16.dp)) {
    val (icon, fullName, title) = createRefs()

    Text("图标占位", fontSize = 48.sp, modifier = Modifier.constrainAs(icon) {
      top.linkTo(fullName.top, margin = (-48).sp) // 基于全名位置向上偏移
      centerHorizontallyTo(parent)
    })

    Text("你的全名", fontSize = 48.sp, modifier = Modifier.constrainAs(fullName) {
      // 垂直位置绑定到父布局40%高度处
      centerVerticallyTo(parent, bias = 0.4f)
      centerHorizontallyTo(parent)
    })

    Text("职位头衔", fontSize = 48.sp, modifier = Modifier.constrainAs(title) {
      top.linkTo(fullName.bottom, margin = 16.dp)
      centerHorizontallyTo(parent)
    })
  }
}

其中方案一最简单直接，完全贴合需求，推荐优先使用。

内容的提问来源于stack exchange，提问作者Peter Smith