Horizo​​ntalPager 中的额外填充

Posted 2023-04-18

【中文标题】Horizo​​ntalPager 中的额外填充

【英文标题】：Extra padding in HorizontalPager

【发布时间】：2021-12-23 23:26:32

【问题描述】：

我正在尝试处理水平寻呼机，但我遇到了从顶部添加额外填充的问题。只有当我将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,
                        )
                    
                
            
        
    

【问题讨论】：

您说您希望您的指标“放在我的寻呼机下方” - 但它们显示在寻呼机的顶部。那么它是哪一个？您希望指示器位于寻呼机“上方”的顶部，还是位于寻呼机“下方”的底部？

【参考方案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,
                    )
                
            
        
    

结果：

【讨论】：

感谢您的回答。工作正常，但我对此有点困惑。我尝试将绿色框移到顶部，并将指示器移到更靠近绿色框的位置，但它根本不起作用。我怎么能这样做？我试图改变所有组件的重量，但正如我所说它不起作用：/

@Wafi_ck 你是怎么尝试的？您可以使用Modifier.padding 或Modifier.offset