我对Jetpack Compose很熟悉,并试图像下面这样得到Horizontal Pager.但不能获得准确的外观和感觉.

我试着设置了PageSizeContentPaddingsCustomOffset等,但没有奏效.

Current Output. current

Expected Output. expected

我当前的代码:

@Composable
fun LoadingScreen() {

    val state = rememberPagerState { 3 }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = AppColor)
            .padding(12.dp)
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        HorizontalPager(
            state = state,
            beyondBoundsPageCount = 2,
            modifier = Modifier
                .fillMaxWidth()
        ) {page->
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(
                    modifier = Modifier
                        .size(240.dp)
                        .clip(RoundedCornerShape(12.dp))
                        .background(
                            brush = Brush.verticalGradient(
                                listOf(
                                    Color(0xFFFFFFFF),
                                    Color(0x00FFFFFF)
                                )
                            )
                        )
                        ,
                    contentAlignment = Alignment.Center
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.rafiki),
                        contentDescription = "Slider"
                    )
                }
                Text(
                    modifier = Modifier.padding(5.dp),
                    text = "FOOD",
                    style = MaterialTheme.typography.NormalText.copy(
                        fontSize = 20.sp,
                        fontWeight = FontWeight.ExtraBold,
                        color = Color.White
                    )
                )
            }
    }
}

推荐答案

您可以根据需要调整内容填充和项目间距

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PagerDemo3(modifier: Modifier = Modifier) {
    BoxWithConstraints(modifier = Modifier.fillMaxWidth()) {

        val itemSpacing = 16.dp
        val pagerState = rememberPagerState(pageCount = {
            10
        })

        val scope = rememberCoroutineScope()
        HorizontalPager(
            modifier = modifier,
            state = pagerState,
            flingBehavior = PagerDefaults.flingBehavior(
                state = pagerState,
                pagerSnapDistance = PagerSnapDistance.atMost(0)
            ),
            contentPadding = PaddingValues(horizontal = 32.dp),
            pageSpacing = itemSpacing
        ) { page ->
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                contentDescription = "",
                contentScale = ContentScale.FillWidth,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(300.dp)
                    .clickable(
                        interactionSource = MutableInteractionSource(),
                        indication = null,
                        enabled = true,
                    ) {
                        scope.launch {
                            pagerState.animateScrollToPage(page)
                        }
                    }.graphicsLayer {
                        val pageOffSet = (
                                (pagerState.currentPage - page) + pagerState
                                    .currentPageOffsetFraction
                                ).absoluteValue
                        alpha = lerp(
                            start = 0.5f,
                            stop = 1f,
                            fraction = 1f - pageOffSet.coerceIn(0f, 1f)
                        )
                        scaleY =   lerp(
                            start = 0.75f,
                            stop = 1f,
                            fraction = 1f - pageOffSet.coerceIn(0f, 1f)
                        )
                    }
            )
        }
    }
}

输出:

enter image description here

Android相关问答推荐

为什么使用. DeliverveAsState()时会出现空指针异常?

以正确的方式从房间收集流量

在Jetpack Compose中的隐藏状态栏后面绘制

OverridePendingTransition已弃用,我该怎么办?

弹出导航堆栈后,Compose 无法访问 Hilt View Model

警告:应用必须面向 Android 13(API 级别 33)或更高版本.确实如此

如何在Android Studio中删除项目

更改当前活动并返回后,Android webview 滚动不起作用

当父布局的背景为浅色时,Android ProgressBar 背景 colored颜色 变为灰色

浏览器未命中断点判断 USB 连接设备

CoroutineScope 与挂起函数

如何以编程方式通过 whatsapp android 共享图像和文本

如何添加到先前预填充的 Room 数据库?

从活动共享视图模型以使用 hilt 组合函数

ImageBitmap 使用 Glide/Coil 到画布

Jetpack compose 为网络检索视频帧导致延迟

Android Jetpack Compose - 每次文本字段值更改时,可组合函数都会重新组合

如何使用 ConstraintLayout 链接两个文本

我可以在不解密的情况下使用 JSch 获取加密的 SSH 私钥的类型或 fingerprint 吗?

lambda 函数中的类型不匹配 - Kotlin