Jetpack Compose多设备设计一致性问题及解决方案咨询

我正在开发一个Jetpack Compose项目，目标是基于Sketch设计稿实现像素级还原的界面。但在Pixel 6 Pro与Infix Mobility设备上运行时，界面显示差异显著，Infix设备出现按钮溢出到其他布局的问题。

我的代码如下

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Blue)
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            .weight(1f)
            .padding(30.dp)
    ) {
        val (backImg, headerTextId, subHeaderTextId, profileImageId, txtAddProfilePicId, firstNameId, lastNameId, phoneNumberId, nextBtnId) = createRefs()

        Image(painter = painterResource(id = R.drawable.img_back),
            contentDescription = "Back",
            modifier = Modifier
                .clickable {}
                .constrainAs(backImg) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                })

        Column(modifier = Modifier.constrainAs(headerTextId) {
            top.linkTo(backImg.bottom, margin = 10.dp)
            start.linkTo(parent.start)
        }) {

            CommonHeaderText(
                text = stringResource(id = R.string.complete_profile), textSize = 26.sp
            )

        }

        Column(modifier = Modifier.constrainAs(subHeaderTextId) {
            top.linkTo(headerTextId.bottom)
            start.linkTo(parent.start)
        }) {
            CommonSubHeaderText(stringResource(id = R.string.complete_profile_desc))
        }

        AsyncImage(model = ImageRequest.Builder(LocalContext.current).data(
            R.drawable.camera_round
        ).crossfade(true).build(),
            contentDescription = "Profile Image",
            placeholder = painterResource(id = R.drawable.camera_round),
            modifier = Modifier
                .constrainAs(profileImageId) {
                    top.linkTo(subHeaderTextId.bottom, margin = 15.dp)
                    start.linkTo(parent.start)
                }
                .clip(CircleShape)
                .size(100.dp)
                .clickable {},
            contentScale = ContentScale.Crop
        )

        Text(
            stringResource(id = R.string.add_profile_pic),
            modifier = Modifier
                .padding(vertical = 5.dp)
                .constrainAs(txtAddProfilePicId) {
                    top.linkTo(profileImageId.top)
                    bottom.linkTo(profileImageId.bottom)
                    start.linkTo(profileImageId.end, margin = 15.dp)
                },
            fontSize = 16.sp,
            color = Color.White,
            fontFamily = avenirFamily,
            fontWeight = FontWeight.Bold
        )


        OutlinedTextField(keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Words, imeAction = ImeAction.Next
        ),
            shape = RoundedCornerShape(7.dp),
            isError = false,
            value = "",
            onValueChange = {},
            placeholder = {
                EditTextPlaceHolder(
                    stringResource(id = R.string.first_name), TextGreenColor
                )
            },
            modifier = Modifier
                .constrainAs(firstNameId) {
                    top.linkTo(profileImageId.bottom, margin = 30.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
                .fillMaxWidth()
                .clip(shape = RoundedCornerShape(7.dp)),
            colors = TextFieldDefaults.textFieldColors(
                errorIndicatorColor = Red,
                backgroundColor = Color.White,
                cursorColor = ScreenBackgroundColor,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                focusedLabelColor = Color.Transparent
            ),
            singleLine = true,
            textStyle = TextStyle(
                fontSize = 16.sp,
                color = Color.Black.copy(alpha = 0.7f),
                fontFamily = avenirFamily,
                fontWeight = FontWeight.Medium
            ))

        OutlinedTextField(keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Words, imeAction = ImeAction.Next
        ),
            isError = false,
            shape = RoundedCornerShape(7.dp),
            value = "",
            onValueChange = {},
            placeholder = {
                EditTextPlaceHolder(stringResource(id = R.string.last_name), TextGreenColor)
            },
            modifier = Modifier
                .constrainAs(lastNameId) {
                    top.linkTo(firstNameId.bottom, margin = 20.dp)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
                .fillMaxWidth()
                .clip(shape = RoundedCornerShape(7.dp)),
            colors = TextFieldDefaults.textFieldColors(
                errorIndicatorColor = Red,
                backgroundColor = Color.White,
                cursorColor = ScreenBackgroundColor,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                focusedLabelColor = Color.Transparent
            ),
            singleLine = true,
            textStyle = TextStyle(
                fontSize = 16.sp,
                color = Color.Black.copy(alpha = 0.7f),
                fontFamily = avenirFamily,
                fontWeight = FontWeight.Medium
            ))

        Column(modifier = Modifier
            .constrainAs(phoneNumberId) {
                top.linkTo(lastNameId.bottom, margin = 20.dp)
                start.linkTo(parent.start)
                end.linkTo(parent.end)
            }
            .clip(shape = RoundedCornerShape(7.dp))
            .background(Color.White)) {
            MaterialCountryCodePicker(
                pickedCountry = {

                },
                showErrorText = false,
                showCountryCodeInDIalog = true,
                showDropDownAfterFlag = false,
                textFieldShapeCornerRadiusInPercentage = 10,
                searchFieldShapeCornerRadiusInPercentage = 20,
                countryItemBgShape = RoundedCornerShape(12.dp),
                focusedBorderColor = Color.Transparent,
                unfocusedBorderColor = Color.Transparent,
                cursorColor = ScreenBackgroundColor,
                showCountryFlag = false,
                showCountryCode = true,
                countrytextstyle = TextStyle(
                    fontSize = 16.sp,
                    color = Color.Black,
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.Medium
                ),
                countrycodetextstyle = TextStyle(
                    fontSize = 16.sp,
                    color = Color.Black,
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.Medium
                ),
                phonenumbertextstyle = TextStyle(
                    fontSize = 16.sp,
                    color = Color.Black,
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.Medium
                ),
                phonehintnumbertextstyle = TextStyle(
                    fontSize = 16.sp,
                    color = TextGreenColor,
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.Medium
                ),
                searchFieldTextStyle = TextStyle(
                    fontSize = 16.sp,
                    color = Color.Black,
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.Medium
                ),
                dialogcountrycodetextstyle = TextStyle(
                    fontSize = 16.sp,
                    color = Color.Black,
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.Medium
                ),
                searchFieldPlaceHolderTextStyle = TextStyle(
                    fontSize = 16.sp,
                    color = Color.Black.copy(alpha = 0.5f),
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.Medium
                ),
                appbartitleStyle = TextStyle(
                    fontSize = 18.sp,
                    color = Color.Black,
                    fontFamily = poppinsFamily,
                    fontWeight = FontWeight.SemiBold
                ),
                defaultCountry = CountryData("+91"),
                onValueChange = {

                },
                text = ""
            )
        }
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .weight(0.35f)
            .padding(horizontal = 40.dp)
    ) {
        CommonShadowButton(
            text = stringResource(id = R.string.next), backgroundColor = Color.White
        ) {

        }
    }
}

请问为何不同设备界面显示不同？如何在Jetpack Compose中实现多设备一致的设计？

补充说明1：
我使用weight属性是为了让按钮在各屏幕保持固定位置，若直接布局按钮无法在所有屏幕处于同一位置，因此使用Column的weight，并在每个屏幕都添加了如下代码：

Column(
        modifier = Modifier
            .fillMaxSize()
            .weight(0.35f)
            .padding(horizontal = 40.dp)
    ) {
        CommonShadowButton(
            text = stringResource(id = R.string.next), backgroundColor = Color.White
        ) {

        }
    }

一、界面显示差异的原因 #

1. 屏幕比例与密度差异：Pixel 6 Pro和Infix设备的屏幕比例、dpi参数不同，固定dp值和weight比例分配空间时，会在不同比例屏幕上出现布局挤压或溢出——比如小屏设备上，ConstraintLayout内的元素总高度超过分配的weight(1f)空间，导致按钮区域被覆盖。
2. weight分配的局限性：外层Column的weight是按比例分配剩余空间，若ConstraintLayout内的内容高度本身超过了它的分配空间，就会和按钮区域重叠，无法保证元素位置的一致性。
3. 第三方控件的不确定性：MaterialCountryCodePicker作为第三方控件，可能在不同设备上自带默认内边距或自适应尺寸，导致整体布局高度超出预期。

二、实现多设备一致设计的方案 #

1. 统一用ConstraintLayout管理所有元素 #

把按钮区域纳入外层ConstraintLayout，通过精准约束替代weight，确保按钮位置在所有设备上一致：

Column(
    modifier = Modifier.fillMaxSize().background(Blue)
) {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize().padding(30.dp)
    ) {
        val (backImg, headerTextId, subHeaderTextId, profileImageId, txtAddProfilePicId, firstNameId, lastNameId, phoneNumberId, nextBtnId) = createRefs()

        // 原有元素的约束保持不变...

        // 按钮固定在屏幕底部，设置固定边距
        CommonShadowButton(
            text = stringResource(id = R.string.next), 
            backgroundColor = Color.White,
            modifier = Modifier
                .constrainAs(nextBtnId) {
                    bottom.linkTo(parent.bottom, margin = 20.dp)
                    start.linkTo(parent.start, margin = 40.dp)
                    end.linkTo(parent.end, margin = 40.dp)
                }
        ) {
            // 点击事件逻辑
        }
    }
}

2. 添加滚动处理内容溢出 #

针对小屏设备，给ConstraintLayout添加滚动能力，避免元素重叠：

ConstraintLayout(
    modifier = Modifier
        .fillMaxSize()
        .padding(30.dp)
        .verticalScroll(rememberScrollState())
) {
    // 所有元素约束不变，按钮仍固定在底部
}

如果希望按钮随内容滚动，可调整约束并修改布局尺寸：

ConstraintLayout(
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .verticalScroll(rememberScrollState())
        .padding(30.dp)
) {
    // 按钮的top约束改为绑定phoneNumberId的bottom，不绑定parent.bottom
    CommonShadowButton(
        text = stringResource(id = R.string.next), 
        backgroundColor = Color.White,
        modifier = Modifier
            .constrainAs(nextBtnId) {
                top.linkTo(phoneNumberId.bottom, margin = 20.dp)
                start.linkTo(parent.start, margin = 40.dp)
                end.linkTo(parent.end, margin = 40.dp)
            }
    ) {}
}

3. 规范第三方控件尺寸 #

给MaterialCountryCodePicker添加明确的尺寸约束，和其他TextField保持一致：

MaterialCountryCodePicker(
    // 原有参数...
    modifier = Modifier.fillMaxWidth().height(56.dp)
)

4. 动态适配边距与字体 #

• 可根据屏幕高度动态计算边距，避免固定dp在小屏上的挤压问题：

  val screenHeight = LocalConfiguration.current.screenHeightDp
  val dynamicMargin = (screenHeight * 0.05).dp // 按屏幕高度的5%设置边距
  

• 字体使用sp单位，同时可通过LocalDensity统一管理系统字体缩放适配。

5. 多设备预览测试 #

使用Compose的@Preview注解，模拟不同设备的屏幕尺寸，提前发现适配问题：

@Preview(device = Devices.PIXEL_6_PRO)
@Preview(widthDp = 360, heightDp = 640) // 模拟小屏设备
@Preview(widthDp = 412, heightDp = 915) // 模拟常规大屏设备
@Composable
fun ProfileScreenPreview() {
    // 你的界面代码
}

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