如何在Android Jetpack Compose中将IconButton置于左上角？

你的返回IconButton之所以显示在中间，是因为包裹它的外层Column设置了horizontalAlignment = Alignment.CenterHorizontally，这个属性会让Column内所有子元素默认水平居中对齐。要让返回按钮固定在左上角，只需要给IconButton添加Modifier.align(Alignment.Start)，覆盖Column的默认对齐规则即可。

修改后的关键代码片段 #

// Back icon at the top-left corner
IconButton(
    onClick = {
        navController.popBackStack()
    },
    modifier = Modifier
        .padding(start = 2.dp, top = 8.dp)
        .align(Alignment.Start) // 新增这一行，让按钮靠左对齐
) {
    Icon(
        imageVector = Icons.Default.ArrowBack,
        contentDescription = "返回上一页",
        tint = Color(0xFF039be5)
    )
}

完整修改后的页面代码 #

package com.mayoclinic.ecg_frontend_android.screens

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.mayoclinic.ecg_frontend_android.R
import com.mayoclinic.ecg_frontend_android.constants.Destinations

@Composable
fun OnBoardingScreen3(navController: NavController) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
            .padding(top = 36.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        // Back icon at the top-left corner
        IconButton(
            onClick = {
                navController.popBackStack()
            },
            modifier = Modifier
                .padding(start = 2.dp, top = 8.dp)
                .align(Alignment.Start) // 新增对齐修饰符
        ) {
            Icon(
                imageVector = Icons.Default.ArrowBack,
                contentDescription = "返回上一页",
                tint = Color(0xFF039be5)
            )
        }

        // Add bold text below the image
        Spacer(modifier = Modifier.height(50.dp))
        Column(
            horizontalAlignment = Alignment.Start, // Align the text to the left
            modifier = Modifier.padding(start = 8.dp)
        ) {
            Text(
                text = "你的数据与隐私",
                // mc-serif/headline-large
                style = TextStyle(
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(700),
                    color = Color(0xFF000000),
                )
            )

            Spacer(modifier = Modifier.height(10.dp))
            Text(
                text = "你可以选择共享的数据内容，所有数据都会通过安全方式传输和存储",
                fontWeight = FontWeight.SemiBold,
                fontSize = 16.sp
            )
            Spacer(modifier = Modifier.height(10.dp))
            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.padding(start = 8.dp)
            ) {
                Image(
                    painter = painterResource(id = R.drawable.safety),
                    contentDescription = "安全标识",
                    modifier = Modifier.size(50.dp),
                    contentScale = ContentScale.Fit
                )

                Text(
                    text = "梅奥诊所高度重视数据隐私保护",
                    // mc-serif/display-small-light
                    style = TextStyle(
                        fontSize = 40.sp,
                        lineHeight = 44.sp,
                        fontFamily = FontFamily.Serif,
                        fontWeight = FontWeight(300),
                        color = Color(0xFF080808),
                    )
                )
            }
            Spacer(modifier = Modifier.height(10.dp))
            Text(
                text = "参与研究是自愿行为，你可以随时退出",
                fontWeight = FontWeight.SemiBold,
                fontSize = 16.sp
            )
            Spacer(modifier = Modifier.height(10.dp))
            Text(
                text = "如果研究结果对外公开，不会泄露你的个人身份信息",
                fontWeight = FontWeight.SemiBold,
                fontSize = 16.sp
            )

            Spacer(modifier = Modifier.height(20.dp))
        }

        Spacer(modifier = Modifier.height(20.dp))
    }
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp)
    ) {
        Spacer(modifier = Modifier.weight(1f))

        Button(
            onClick = {
                navController.navigate(Destinations.OnBoardingScreen4)
            },
            modifier = Modifier
                .width(120.dp)
                .padding(top = 40.dp, bottom = 40.dp)
                .height(50.dp),
            shape = RoundedCornerShape(percent = 50),
            colors = ButtonDefaults.buttonColors(Color(0xFF039be5))
        ) {
            Text(text = "下一步", fontWeight = FontWeight.Bold, style = TextStyle(Color.White))
        }
    }
}

补充说明 #

除了给IconButton添加align(Alignment.Start)，你也可以考虑调整外层Column的horizontalAlignment为Alignment.Start，但这样会让Column内所有子元素默认靠左，可能需要给其他需要居中的元素单独添加align(Alignment.CenterHorizontally)，所以前者是更精准的解决方案。

内容的提问来源于stack exchange，提问作者Tejas Khartude