JetpackCompose快速制作轮播图(banner)

package com.example.jtcomposeview.ui.activities

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.RadioButton
import androidx.compose.material3.RadioButtonDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
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.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import coil.request.ImageRequest
import coil.size.Scale
import com.example.jtcomposeview.ui.activities.ui.theme.JtComposeViewTheme
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

val images = listOf<String>(
    "https://ts1.cn.mm.bing.net/th/id/R-C.5c8f29ad51f34d3b0adc3afdb291df93?rik=%2bhG3H5kH6s4iDA&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0716%2fpgjlg3.jpg&ehk=6C%2bwmXLxbeNFL6yxRnn1FEwx%2fLA50Y%2f3aisA53qH%2foQ%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.84291087968fbc9e882d32bb4486515f?rik=E7LGR3IVaSRfwA&riu=http%3a%2f%2fwww.33lc.com%2farticle%2fUploadPic%2f2012-8%2f2012849261381266.jpg&ehk=c9FedHL6SnoO61VDA8mKdvoadeswlhaJkULuq9iFgDc%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.15e970cd0765096178a6da16993cfbb1?rik=IT5KfevidZcTig&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1210%2f22%2fc0%2f14558824_1350879506501.jpg&ehk=X9ro%2fg%2fGTmsglVrbV%2bmy8c3wsAvcHseqcEhsf80RMWA%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.5c8f29ad51f34d3b0adc3afdb291df93?rik=%2bhG3H5kH6s4iDA&riu=http%3a%2f%2fpic.zsucai.com%2ffiles%2f2013%2f0716%2fpgjlg3.jpg&ehk=6C%2bwmXLxbeNFL6yxRnn1FEwx%2fLA50Y%2f3aisA53qH%2foQ%3d&risl=&pid=ImgRaw&r=0"
)

class CarouselActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JtComposeViewTheme {
                Banner()
            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Banner() {
    val pageState = rememberPagerState(initialPage = 0, initialPageOffsetFraction = 0F) {
        images.size
    }
    val scope = rememberCoroutineScope()
    Box() {
        LaunchedEffect(pageState.settledPage) {
            delay(1500)
            if (pageState.currentPage + 2 == images.size) {
                pageState.animateScrollToPage(pageState.currentPage + 1)
                pageState.scrollToPage(0)
            } else {
                pageState.animateScrollToPage(pageState.currentPage + 1)
            }

        }
        HorizontalPager(
            state = pageState,
            modifier = Modifier
                .height(180.dp)
                .padding(top = 15.dp),

            ) { index ->
            AsyncImage(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(horizontal = 10.dp)
                    .clip(RoundedCornerShape(10.dp)),
                model = ImageRequest
                    .Builder(LocalContext.current)
                    .data(images[index])
                    .scale(Scale.FILL)
                    .build(),
                contentDescription = "图片$index",
                contentScale = ContentScale.FillBounds
            )
        }
        Row(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 5.dp)
        )
        {
            (0..images.size - 2).forEach { radioIndex ->
                RadioButton(
                    colors = RadioButtonDefaults.colors(
                        selectedColor = Color.Green,
                        unselectedColor = Color.White
                    ),
                    // 添加后面的一段是为了让最后一页和第一页过度更加平滑
                    selected = (pageState.currentPage == radioIndex || (radioIndex == 0 && pageState.currentPage == images.size - 1)),
                    onClick = {
                        scope.launch {
                            if (radioIndex == 0) {
                                pageState.animateScrollToPage(images.size - 1)
                                pageState.scrollToPage(0)
                            } else {
                                pageState.animateScrollToPage(radioIndex)
                            }
                        }
                    }
                )
            }
        }
    }
}