Jetpack Compose 行绘制顺序问题

Question

我对 Jetpack Compose Row 有疑问。

@Composable
private fun TopBar() {
    val height = 50.dp

    @Composable
    fun LeftLongBar() {
        Card(
            backgroundColor = Color.White,
            modifier = Modifier
                .fillMaxHeight()
                .fillMaxWidth(1f)
                .padding(end = 10.dp),
            elevation = 5.dp
        ) {
            Row(
                modifier = Modifier.fillMaxHeight(),
                horizontalArrangement = Arrangement.SpaceAround,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "37 / 142",
                    color = CustomColors.dark,
                    fontSize = 25.sp
                )
                Text(
                    text = "B2",
                    color = CustomColors.dark,
                    fontSize = 25.sp
                )
            }

        }
    }

    @Composable
    fun RightSettingsBar() {
        Card(
            backgroundColor = Color.White,
            modifier = Modifier
                .size(height),
            elevation = 5.dp
        ) {
            Icon(
                Icons.Outlined.Settings,
                contentDescription = "Settings",
                modifier = Modifier.size(height),
                tint = CustomColors.dark
            )
        }
    }

    Row(
        modifier = Modifier
            .height(height)
            .fillMaxWidth()
            .padding(horizontal = height)
    ) {
        LeftLongBar()
        RightSettingsBar()
    }
}

第一张图片是我的代码的结果。第二个图像是改变条形顺序的渲染结果。第二张图片首先被称为 RightSettingsBar()，其次是 LeftLongBar()。

在我的默认代码中，我看不到右侧的设置按钮。我认为这是因为 LeftLongBar() 卡中的 Modifier.fillMaxWidth() 。 LeftLongBar() 首先渲染并取行的所有宽度。但我想填充其剩余空间的宽度。我该如何解决这个问题？

Answer 1

将这两个项目包装在一个约束布局中。确保将您的卡设置为使用 fillMaxSize：

@Composable
private fun TopBar() {
    val height = 50.dp

    @Composable
    fun LeftLongBar() {
        Card(
            backgroundColor = Color.White,
            modifier = Modifier
                .fillMaxSize()
                .padding(end = 10.dp),
            elevation = 5.dp
        ) {
            Row(
                modifier = Modifier.fillMaxHeight(),
                horizontalArrangement = Arrangement.SpaceAround,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "37 / 142",
                    color = Color.Blue,
                    fontSize = 25.sp
                )
                Text(
                    text = "B2",
                    color = Color.Blue,
                    fontSize = 25.sp
                )
            }
        }

    }

    @Composable
    fun RightSettingsBar() {
        Card(
            backgroundColor = Color.White,
            modifier = Modifier
                .size(height),
            elevation = 5.dp
        ) {
            Icon(
                Icons.Outlined.Settings,
                contentDescription = "Settings",
                modifier = Modifier.size(height),
                tint = Color.Blue
            )
        }
    }

    Row(
        modifier = Modifier
            .height(height)
            .fillMaxWidth()
            .padding(horizontal = height)
    ) {

        ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
            val (left, right) = createRefs()

            Column(modifier = Modifier.constrainAs(right) {
                end.linkTo(parent.end)
            }) {
                RightSettingsBar()
            }

            Column(modifier = Modifier.constrainAs(left) {
                start.linkTo(parent.start)
                end.linkTo(right.start)
                width = Dimension.fillToConstraints
            }) {
                LeftLongBar()
            }
        }
    }
}