android compose利用pager写一个引导页

本文来自bitCoder的视频翻译，原视频请观看哔哩哔哩上博主BitCoder的Jectpack Compose 引导页案例一
效果图：

gradle配置：

//pager库
    implementation("com.google.accompanist:accompanist-pager:0.24.12-rc")

实现代码

package com.example.androidcomposetest.pages

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowForward
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.androidcomposetest.R
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.rememberPagerState

//引导页案例1
@Preview
@OptIn(ExperimentalPagerApi::class)
@Composable
fun PagerContent1() {
    val items = listOf(
        ItemData(R.drawable.ic_launcher_background, "测试黑暗势力看大家", "换个环境骄傲的是捷克首都的杀杀杀杀杀杀水水水水水水水水水水水水水水水水水水水"),
        ItemData(R.drawable.ic_launcher_background, "发送给对方的身份是", "顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶"),
        ItemData(R.drawable.ic_launcher_background, "让他我热爱", "日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日"),
        ItemData(R.drawable.ic_launcher_background, "公司制度是", "她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她她"),
        ItemData(R.drawable.ic_launcher_background, "哈哈嘎嘎嘎嘎嘎嘎", "33333333333333333333333344444444444444444444444444444444444444444444"),
        ItemData(R.drawable.ic_launcher_background, "忒恶恶", "她她她她她她她她她她她她她她她她她她她呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃"),
        ItemData(R.drawable.ic_launcher_background, "音乐艺术风格士大夫士大夫士大夫胜多负少", "斤斤计较急急急急急急急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急急"),
        ItemData(R.drawable.ic_launcher_background, "三个地方的地方", "急急急急急急急急急急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急斤斤计较急急急急急急急急急急急急急急急"),
        ItemData(R.drawable.ic_launcher_background, "耶特瑞特", "咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩"),
        ItemData(R.drawable.ic_launcher_background, "我是个是法国", "钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱"),
    )
    val state = rememberPagerState(initialPage = 0)

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        HorizontalPager(count = items.size, state = state) { pager ->
            pagerContent(items[pager])
        }
        Indicator(size = items.size, index = state.currentPage)

        val width = animateDpAsState(
            targetValue = if (state.currentPage.inc() == items.size) 60.dp else 0.dp,
            animationSpec = if (state.currentPage.inc() == items.size)
                spring(dampingRatio = Spring.DampingRatioHighBouncy)
            else
                spring(dampingRatio = Spring.DampingRatioMediumBouncy)
        )
        Row(
            modifier = Modifier.height(100.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            FloatingActionButton(
                onClick = {

                },
                Modifier
                    .size(width.value)
            ) {
                Icon(
                    imageVector = Icons.Default.ArrowForward,
                    contentDescription = "",
                    tint = Color.Black
                )
            }
        }
    }
}

@Composable
private fun pagerContent(itemData: ItemData) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .height(420.dp)
            .background(Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = itemData.image),
            contentDescription = ""
        )
        Text(
            text = itemData.title,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.headlineLarge
        )
        Text(
            text = itemData.content,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.bodyMedium
        )
    }
}

@Composable
private fun IndicatorHorizontal(isSelected: Boolean) {
    val width = animateDpAsState(
        targetValue = if (isSelected) 30.dp else 10.dp,
        animationSpec = spring(dampingRatio = Spring.DampingRatioHighBouncy)
    )
    Box(
        modifier = Modifier
            .height(10.dp)
            .width(width.value)
            .clip(CircleShape)
            .background(if (isSelected) Color.Black else Color.LightGray)
    )
}

@Composable
private fun Indicator(size: Int, index: Int) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(10.dp)
    ) {
        repeat(size) {
            IndicatorHorizontal(it == index)
        }
    }
}

private data class ItemData(
    val image: Int,
    val title: String,
    val content: String
)