如何在可滚动列中保持可组合项相对于其固有高度的重量？

Question

我有这样的布局，其中

Box

中的第一个

Column

的高度设置为

360.dp

，但也将

weight

设置为

1f

，以便它填充可用空间：

@Composable
fun Test() {
    Scaffold { paddingValues ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues = paddingValues)
        ) {
            Column(
                modifier = Modifier
                    .matchParentSize()
                    .verticalScroll(rememberScrollState())
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(360.dp)
                        .weight(1f)
                        .background(brush = Brush.verticalGradient(listOf(Color.Blue, Color.Green)))
                )

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(360.dp)
                        .background(brush = Brush.verticalGradient(listOf(Color.Blue, Color.Green)))
                )
            }
        }
    }
}

看起来像这样：

现在，当布局在较小的屏幕上呈现时，加权

Box

正在缩小，这不是我想要的：

我想要的是第一个

Box

在这种情况下保留其固有高度（

360.dp

），以便第二个

Box

可以通过滚动到达，就像这样：

注意：我不想在这两个

Spacer

之间使用任何

Boxes

来填充剩余空间 - 我真的需要让第一个

Box

始终填充至少

360.dp

，如果空间可用，则填充更多。

我怎样才能实现这个目标？

Answer 1

您可以通过用

BoxWithConstraints

包裹它来测量列的高度，在获得高度后，您可以设置一个条件修饰符，然后如果父级的总高度大于 720.dp 则设置重量

@Preview
@Composable
fun Test() {
    Scaffold { paddingValues ->
        BoxWithConstraints(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues = paddingValues)
        ) {

            val height = maxHeight

            Column(
                modifier = Modifier
                    .matchParentSize()
                    .verticalScroll(rememberScrollState())
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(360.dp)
                        .then(
                            if (height > 720.dp) Modifier.weight(1f) else Modifier
                        )
                        .background(brush = Brush.verticalGradient(listOf(Color.Blue, Color.Green)))
                )

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(360.dp)
                        .background(brush = Brush.verticalGradient(listOf(Color.Blue, Color.Green)))
                )
            }
        }
    }
}