Horizo​​ntalPager 中的额外填充

Question

我正在尝试处理水平分页器，但我在使用顶部的额外填充时遇到了问题。只有当我将 HorizontalPager() 添加到我的布局时才会发生。

正如您在附件中看到的，我有灰色指示器，我想将其放在寻呼机下方，但是当我这样做时，寻呼机变低并且指示器变得不可见。看起来 HorizontalPager() 有一些顶部填充 (?)

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(350.dp)
        .clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
        .background(MaterialTheme.colors.onBackground)
) {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(10.dp)
    ) {
        val (backButton, favouriteButton, photosPager) = createRefs()

        BackNavigationSingleButton(
            backButtonSelected = { }, modifier = Modifier
                .height(42.dp)
                .width(60.dp)
                .clip(RoundedCornerShape(10.dp))
                .background(Color.Red)
                .constrainAs(backButton) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
        )

        IconButton(onClick = {}, modifier = Modifier
            .size(42.dp)
            .constrainAs(favouriteButton) {
                top.linkTo(parent.top)
                end.linkTo(parent.end)
            }) {
            Icon(
                imageVector = Icons.Outlined.Favorite
            )
        }


        Column(
            modifier = Modifier
                .constrainAs(photosPager) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }) {
            val pagerState = rememberPagerState()
            val items = 3
            HorizontalPager(
                count = items,
                state = pagerState,
                contentPadding = PaddingValues(0.dp)
            ) { page ->
                Box(
                    modifier = Modifier
                        .size(100.dp)
                        .background(Color.Green)
                )
            }

            Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
                for (i in 1..items) {
                    Canvas(modifier = Modifier.size(20.dp)) {
                        drawCircle(
                            color =  Color.Gray,
                            center = Offset(x = 10f, y = 10f),
                            radius = size.minDimension / 4,
                        )
                    }
                }
            }
        }
    }
}

Answer 1

HorizontalPager 中的每个页面都使用 Modifier.fillParentMaxSize，这使其填充所有可用高度，与 Modifier.fillMaxHeight 相同。

当Column有一个项目Modifier.fillMaxHeight时，该项目将推送所有下一个项目。为防止这种情况，您可以使用 Modifier.weight：在这种情况下，此视图的高度将在所有其他 Column 个子项之后计算。

---

而且大多数时候 ConstraintLayout 在 Compose 中是多余的，这里是你如何在没有它的情况下构建相同的布局：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(350.dp)
        .clip(RoundedCornerShape(0.dp, 0.dp, 12.dp, 12.dp))
        .background(MaterialTheme.colors.onBackground.copy(0.5f))
        .padding(10.dp)
) {
    Row {
        TextButton(
            onClick = { },
            modifier = Modifier
                .clip(RoundedCornerShape(10.dp))
                .background(Color.Red)
        ) {
            Text("button")
        }
        Spacer(Modifier.weight(1f))
        IconButton(
            onClick = {},
            modifier = Modifier
                .size(42.dp)
        ) {
            Icon(
                imageVector = Icons.Outlined.Favorite,
                contentDescription = null
            )
        }
    }

    Column {
        val pagerState = rememberPagerState()
        val items = 3
        HorizontalPager(
            count = items,
            state = pagerState,
            contentPadding = PaddingValues(0.dp),
            modifier = Modifier.weight(1f)
        ) { page ->
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(Color.Green)
            )
        }

        Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
            for (i in 1..items) {
                Canvas(modifier = Modifier.size(20.dp)) {
                    drawCircle(
                        color = Color.Gray,
                        center = Offset(x = 10f, y = 10f),
                        radius = size.minDimension / 4,
                    )
                }
            }
        }
    }
}

结果：