Compose 轮播图

Posted 2022-07-18 安果移不动

Guide - Accompanist

我们用过了Accompanist组件 在状态栏里面

导入方式如下

    var accompanist_version = "0.23.1"

   implementation "com.google.accompanist:accompanist-pager:<version>"

    // If using indicators, also depend on 
    implementation "com.google.accompanist:accompanist-pager-indicators:<version>"

 访问网址我们可以看到这个轮播组件

然后我们学习下如何加载图片

Compose 使用Coil加载网络图片_安果移不动的博客-CSDN博客

然后我们准备实体类

package com.anguomob.compose.model

data class SwiperEntity(val imageUrl: String)

准备好图片数据

    //类型数据
    val swipeData by mutableStateOf(listOf(
        SwiperEntity(imageUrl = "https://xxx/compose/assets/banner1.webp"),
        SwiperEntity(imageUrl = "https://xxx/compose/assets/banner2.webp"),
        SwiperEntity(imageUrl = "https://xxx/compose/assets/banner3.webp"),
        SwiperEntity(imageUrl = "https://xxx/compose/assets/banner4.webp"),
        SwiperEntity(imageUrl = "https://xxx/compose/assets/banner5.webp"),

        ))

这里你们可以随便找个图片数据代替下

      //轮播图
        HorizontalPager(count = vm.swipeData.size,
            modifier = Modifier
                .padding(8.dp)
                .clip(RoundedCornerShape(8.dp))
        )  index ->
            AsyncImage(model = vm.swipeData[index].imageUrl,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxWidth()
                    .aspectRatio(7 / 3f),
                contentScale = ContentScale.Crop

            )
        

效果

 我们抽取一下 ，顺便给予自动轮播 和长时间轮播功能。

package com.anguomob.compose.ui.components

import MainViewModel
import android.util.Log
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import coil.compose.AsyncImage
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.launch
import java.util.*

private const val TAG = "SwiperContent"

@OptIn(ExperimentalPagerApi::class)
@Composable
fun SwiperContent(vm: MainViewModel = viewModel()) 
    //虚拟页数
    val virtualCount = 99999
    //实际页数
    val actualCount = vm.swipeData.size

    //初始图片下标
    val initialIndex = virtualCount / 2 + (virtualCount / 2) % actualCount

    val pagerState = rememberPagerState(initialPage = initialIndex)
    val coroutineScope= rememberCoroutineScope()
    //控制轮播
    DisposableEffect(key1 = Unit, effect = 
        val timer = Timer()
        timer.schedule(object : TimerTask() 
            override fun run() 
                coroutineScope.launch 
                    pagerState.animateScrollToPage(pagerState.currentPage + 1)
                
            
        , 3000, 3000)
        onDispose 
            timer.cancel()
        
    )


    HorizontalPager(count = virtualCount,
        modifier = Modifier
            .padding(8.dp)
            .clip(RoundedCornerShape(8.dp)),
        state = pagerState
    )  index ->


        val actualIndex = index % actualCount


        AsyncImage(
            model = vm.swipeData[actualIndex].imageUrl,
            contentDescription = null,
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(7 / 3f),
            contentScale = ContentScale.Crop,
//
        )
    

    //类型数据
    val swipeData by mutableStateOf(listOf(
        SwiperEntity(imageUrl = "https://docs.bughub.icu/compose/assets/banner3.webp"),
        SwiperEntity(imageUrl = "https://docs.bughub.icu/compose/assets/banner1.webp"),

        SwiperEntity(imageUrl = "https://docs.bughub.icu/compose/assets/banner2.webp"),

        ))

这样既可以自动轮播 也可以无限轮播 向前滑动等。非常的时尚