新手求助：用Android Jetpack Compose实现带横向滚动与点指示器的横幅

以下是一个完整的可组合函数实现，基于Accompanist Pager组件（Compose官方推荐的轮播实现方案），包含横向滚动和点指示器功能：

1. 添加依赖 #

首先在你的build.gradle.kts（Module级）中添加Accompanist库依赖：

dependencies {
    implementation("com.google.accompanist:accompanist-pager:0.32.0")
    implementation("com.google.accompanist:accompanist-pager-indicators:0.32.0")
}

2. 数据类定义 #

先定义横幅数据结构：

data class BannerItem(
    val id: Int,
    val imageResId: Int,
    val title: String
)

3. 主可组合函数 #

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
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.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.rememberPagerState
import com.google.accompanist.pager.indicators.CirclePagerIndicator
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@OptIn(ExperimentalPagerApi::class)
@Composable
fun BannerCarousel(
    bannerItems: List<BannerItem>,
    autoScrollDelay: Long = 3000, // 自动轮播间隔，默认3秒
    modifier: Modifier = Modifier
) {
    val pagerState = rememberPagerState()
    val coroutineScope = rememberCoroutineScope()

    // 自动轮播逻辑（可选）
    LaunchedEffect(bannerItems.size) {
        while (bannerItems.isNotEmpty()) {
            delay(autoScrollDelay)
            coroutineScope.launch {
                pagerState.animateScrollToPage(
                    (pagerState.currentPage + 1) % bannerItems.size
                )
            }
        }
    }

    Box(modifier = modifier) {
        // 横向滚动的横幅容器
        HorizontalPager(
            count = bannerItems.size,
            state = pagerState,
            modifier = Modifier.fillMaxWidth().height(200.dp)
        ) { page ->
            BannerItemView(item = bannerItems[page])
        }

        // 底部点指示器
        CirclePagerIndicator(
            pagerState = pagerState,
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(16.dp),
            activeColor = MaterialTheme.colorScheme.primary,
            inactiveColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f),
            spacing = 8.dp // 指示器点之间的间距
        )
    }
}

@Composable
fun BannerItemView(item: BannerItem) {
    Box(modifier = Modifier.fillMaxSize()) {
        // 横幅背景图
        Image(
            painter = painterResource(id = item.imageResId),
            contentDescription = item.title,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        // 横幅标题（可根据需求调整样式或移除）
        Text(
            text = item.title,
            style = MaterialTheme.typography.titleLarge,
            color = MaterialTheme.colorScheme.onPrimary,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .align(Alignment.Center)
                .padding(horizontal = 16.dp)
        )
    }
}

4. 使用示例 #

在你的页面中调用这个组件：

@Composable
fun HomeScreen() {
    // 替换成你自己的图片资源和标题
    val banners = listOf(
        BannerItem(1, R.drawable.banner_summer, "夏日特惠专场"),
        BannerItem(2, R.drawable.banner_new_arrival, "新品抢先体验"),
        BannerItem(3, R.drawable.banner_discount, "限时8折起")
    )

    BannerCarousel(
        bannerItems = banners,
        modifier = Modifier.fillMaxWidth()
    )
}

关键说明 #

• HorizontalPager：提供成熟的横向页面切换逻辑，自带滚动动画和触摸交互
• CirclePagerIndicator：官方封装的点指示器，支持自定义颜色、间距等样式
• 自动轮播：通过LaunchedEffect实现循环滚动，可通过autoScrollDelay参数调整间隔
• 自定义扩展：如果需要更复杂的指示器样式，可以自己实现指示器组件，基于pagerState.currentPage和pagerState.pageCount来绘制

内容的提问来源于stack exchange，提问作者WALFAZ