Jetpack Compose注册页UI问题：文本对齐与TextField尺寸适配

问题描述 #

我是Jetpack Compose新手，搭建注册页时遇到两个UI问题，以下是当前实现的代码：

Column(
    modifier = Modifier
        .padding(0.dp, 50.dp, 0.dp, 0.dp)
        .width(Max)
        .verticalScroll(rememberScrollState()),
    horizontalAlignment = Alignment.CenterHorizontally
) {

    
    Row(
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
    ) {
        Spacer(modifier = Modifier.weight(0.1F))
        OutlinedTextField(
            label = {
                Text(
                    text = "First Name",
                    style = TextStyle(fontSize = Dimens.body4)
                )
            },
            value = firstName,
            onValueChange = { firstName = it },
            modifier = Modifier
                .weight(0.5F)
                .padding(1.dp)
        )
        Spacer(modifier = Modifier.weight(0.1F))

        OutlinedTextField(
            label = {
                Text(
                    text = "Last Name",
                    style = TextStyle(fontSize = Dimens.body4)
                )
            },
            value = lastName,
            onValueChange = { lastName = it },
            modifier = Modifier.weight(0.5F)
        )
        Spacer(modifier = Modifier.weight(0.1F))
    }
    Spacer(modifier = Modifier.height(Dimens.grid_3_5))
    OutlinedTextField(
        label = {
            if (isPhoneSignup)
                Text(
                    text = phone,
                    style = TextStyle(fontSize = Dimens.body4)
                )
            else
                Text(
                    text = email,
                    style = TextStyle(fontSize = Dimens.body4)
                )
        },
        leadingIcon = {
            if (isPhoneSignup)
            Icon(
                imageVector = Filled.Phone,
                contentDescription = null
            )
            else
                Icon(
                    imageVector = Filled.Email,
                    contentDescription = null
                )
        },
        value = login,
        onValueChange = { login = it },
    )

    Spacer(modifier = Modifier.height(Dimens.grid_1))

    ClickableText(text = AnnotatedString(loginTypeText),
        onClick = {
            isPhoneSignup = !isPhoneSignup
        }
    )
}

当前UI效果：

需要实现两个需求：

• 当TextField居中显示时，让“Login with Phone Number”文本与Email TextField左对齐；
• 使First Name和Last Name两个TextField的总宽度与Email TextField完全一致，目前这两个TextField占用空间更大。

解决方案 #

针对需求1：文本与TextField左对齐

将Email输入框和切换文本放在同一个Column容器内，设置该容器宽度自适应内容，同时保持在父容器中居中。这样切换文本就能和输入框左对齐，整体仍处于页面居中位置。

针对需求2：统一姓名输入框与邮箱输入框宽度

移除姓名输入框所在Row左右两侧带weight的Spacer，改用Arrangement.spacedBy设置两个输入框之间的间距；同时让Row宽度自适应内容，这样它的总宽度会和下方的Email输入框一致，实现对齐。

修改后的完整代码 #

Column(
    modifier = Modifier
        .padding(top = 50.dp)
        .fillMaxWidth()
        .verticalScroll(rememberScrollState()),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    // 姓名输入行：调整宽度与邮箱输入框一致
    Row(
        horizontalArrangement = Arrangement.spacedBy(Dimens.grid_1), // 替换中间的Spacer
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.fillMaxWidth(false) // 宽度自适应内容
    ) {
        OutlinedTextField(
            label = {
                Text(
                    text = "First Name",
                    style = TextStyle(fontSize = Dimens.body4)
                )
            },
            value = firstName,
            onValueChange = { firstName = it },
            modifier = Modifier.weight(1F) // 两个输入框均分宽度
        )
        OutlinedTextField(
            label = {
                Text(
                    text = "Last Name",
                    style = TextStyle(fontSize = Dimens.body4)
                )
            },
            value = lastName,
            onValueChange = { lastName = it },
            modifier = Modifier.weight(1F)
        )
    }

    Spacer(modifier = Modifier.height(Dimens.grid_3_5))

    // 将邮箱输入框和切换文本放在同一容器，实现左对齐
    Column(modifier = Modifier.fillMaxWidth(false)) {
        OutlinedTextField(
            label = {
                Text(
                    text = if (isPhoneSignup) phone else email,
                    style = TextStyle(fontSize = Dimens.body4)
                )
            },
            leadingIcon = {
                Icon(
                    imageVector = if (isPhoneSignup) Filled.Phone else Filled.Email,
                    contentDescription = null
                )
            },
            value = login,
            onValueChange = { login = it },
        )

        Spacer(modifier = Modifier.height(Dimens.grid_1))

        ClickableText(
            text = AnnotatedString(loginTypeText),
            onClick = { isPhoneSignup = !isPhoneSignup }
        )
    }
}

改动说明 #

1. 姓名输入Row：移除左右Spacer，用spacedBy设置间距，fillMaxWidth(false)让宽度自适应，两个输入框用weight(1F)均分空间，总宽度与下方Email输入框一致。
2. 邮箱输入区域：用Column包裹输入框和切换文本，fillMaxWidth(false)保证容器宽度匹配输入框，内部元素自然左对齐，同时整个Column在父容器中居中。

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