Kotlin Compose 函数屏幕对于相同的结构代码渲染不同

Question

我有两个可组合函数，它们具有几乎相同的结构代码，但它们在 Android Studio 模拟器中的渲染方式不同。

我正在使用：

源兼容性Java版本.VERSION_1_8

目标兼容性Java版本.VERSION_1_8

kotlinOptions.jvmTarget = "1.8"

kotlinCompilerExtension版本'1.4.6'

实现平台('androidx.compose:compose-bom:2023.03.00')

androidTestImplementation 平台('androidx.compose:compose-bom:2023.03.00')

首屏代码：

@Composable
fun BuildScreenHouse(viewModel: InventoryViewModel, navController: NavHostController, houseId: String?, name: String?, use: String?, location: String?)  {

val house = houseId!!.toLong()

ScreenLandscape()

Column {


    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(top = 22.dp, start = 6.dp, end = 6.dp)
            .fillMaxWidth()
        //.verticalScroll(state = scrollState)

    ) {

        Row(verticalAlignment = Alignment.CenterVertically) {


            Text(
                text = "Nick Name", fontSize = 20.sp,
                modifier = Modifier.fillMaxWidth(0.50f),
                color = Color.Black,
                fontWeight = FontWeight.Bold

            )

            Text(
                text = "Use", fontSize = 20.sp,
                modifier = Modifier.fillMaxWidth(0.50f),
                color = Color.Black,
                fontWeight = FontWeight.Bold

            )
        }

        Row(verticalAlignment = Alignment.CenterVertically) {

            Text(
                text = name!!, fontSize = 20.sp,
                modifier = Modifier.fillMaxWidth(0.50f),
                color = Color.Black

            )

            Text(
                text = use!!, fontSize = 20.sp,
                modifier = Modifier.fillMaxWidth(0.50f),
                color = Color.Black

            )
        }


        Button(
            onClick = { navController.navigate("InsertScreenFloor/${houseId}/${URLEncoder.encode(location, "utf-8")}") },
            //Modifier.align(Alignment.CenterHorizontally),
            colors = ButtonDefaults.buttonColors(Color.Blue)

        ) {
            Text(text = "Insert Floor into House")
        }
    }

    Column(
        //horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(top = 22.dp, start = 6.dp, end = 6.dp)
            .fillMaxWidth()
        //.verticalScroll(state = scrollState)

    ) {
        // The House List
        FloorsList(viewModel = viewModel, navController, house, location!!)

    }
}

}

渲染图像：

第二屏代码：

@Composable
fun BuildScreenFloor(viewModel: InventoryViewModel, navController: NavHostController, floorId: String?, floorname: String?, location: String?) {

val floor = floorId!!.toLong()

ScreenLandscape()

Column {

    Column(horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(top = 22.dp, start = 6.dp, end = 6.dp)
            .fillMaxWidth()
        //.verticalScroll(state = scrollState)


    ) {


        Row(verticalAlignment = Alignment.CenterVertically) {

            Text(
                text = "Floor Name", fontSize = 20.sp,
                modifier = Modifier.fillMaxWidth(),
                color = Color.Black,
                fontWeight = FontWeight.Bold

            )

        }

        Row(verticalAlignment = Alignment.CenterVertically) {

            Text(
                text = floorname!!, fontSize = 20.sp,
                modifier = Modifier.fillMaxWidth(),
                color = Color.Black

            )
        }
    }

    Button(
        onClick = { navController.navigate("InsertScreenRoom/${floorId}/${URLEncoder.encode(location, "utf-8")}") },
        colors = ButtonDefaults.buttonColors(Color.Blue)

    ) {
        Text(text = "Insert Room into Floor")
    }

    Column(
        //horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .padding(top = 22.dp, start = 6.dp, end = 6.dp)
            .fillMaxWidth()
        //.verticalScroll(state = scrollState)

    ) {

        // The House List
        RoomsList(viewModel = viewModel, navController, floor, location!!)

    }
}

}

渲染图像：

我不明白为什么第二个屏幕中的第一段呈现在左侧而不是中心。

Answer 1

我发现按钮位置错误，但没有找到文本响应不一样的原因（Alignment.CenterHorizontally）。但我找到了一种解决方法，可以让他们以令人满意的方式做出回应。

按钮超出了格式正确的列的范围。

对于文本，我添加了 TextAlign 属性。

这是代码更改：

) {


        Row(verticalAlignment = Alignment.CenterVertically,
            //horizontalArrangement = Arrangement.Absolute.Center,
            //modifier = Modifier.fillMaxWidth()
            ) {

            Text(
                text = "Floor Name", fontSize = 20.sp,
                textAlign = TextAlign.Center, //Added property
                modifier = Modifier.fillMaxWidth(),
                color = Color.Black,
                fontWeight = FontWeight.Bold

            )

        }

        Row(verticalAlignment = Alignment.CenterVertically
            ) {

            Text(
                text = floorname!!, fontSize = 20.sp,
                textAlign = TextAlign.Center, //Added property
                modifier = Modifier.fillMaxWidth(),
                color = Color.Black

            )
        }

        Button(
            onClick = { navController.navigate("InsertScreenRoom/${floorId}/${URLEncoder.encode(location, "utf-8")}") },
            colors = ButtonDefaults.buttonColors(Color.Blue)

        ) {
            Text(text = "Insert Room into Floor")
        }
    }