Compose 可组合项 - 轮播图 Carousel

一、概念

HorizontalMultiBrowseCarousel 多浏览轮播	item宽度逐渐变小，可以单独设置最小那个item的最小/最大宽度。有吸附效果，容器左边界不会部分显示item。
HorizontalUncontainedCarousel 非容器化轮播	item宽度固定。没有吸附效果，滑到哪里是哪里。

二、使用

@Composable fun rememberCarouselState(     initialItem: Int = 0,        //需要初始就滚动到的item索引     itemCount: () -> Int,        //item数量 ): CarouselState

2.1 多浏览轮播 HorizontalMultiBrowseCarousel

@Composable fun HorizontalMultiBrowseCarousel(     state: CarouselState,     preferredItemWidth: Dp,        //item理想宽度     modifier: Modifier = Modifier,     itemSpacing: Dp = 0.dp,        //item间隔     flingBehavior: TargetedFlingBehavior = CarouselDefaults.singleAdvanceFlingBehavior(state = state),     minSmallItemWidth: Dp = CarouselDefaults.MinSmallItemSize,        //末尾最小那个item的最小宽度     maxSmallItemWidth: Dp = CarouselDefaults.MaxSmallItemSize,        //末尾最小那个item的最大宽度     contentPadding: PaddingValues = PaddingValues(0.dp),     content: @Composable CarouselItemScope.(itemIndex: Int) -> Unit ) 把 preferredItemWidth 设置成和 item 宽度一致就行，item宽度更大会无效，更小会留白。

@Composable
fun CarouselDemo() {
    val items = listOf(
        Color.Red,
        Color.Blue,
        Color.Yellow,
        Color.Magenta,
        Color.Green
    )

    val state = rememberCarouselState { items.count() }
    HorizontalMultiBrowseCarousel(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray),
        state = state,
        preferredItemWidth = 150.dp,
        itemSpacing = 5.dp,
        contentPadding = PaddingValues(5.dp)
    ) { index ->
        Box(
            modifier = Modifier
                .height(200.dp)
                .width(150.dp)  //对比preferredItemWidth，大于无效，小于会留白
                .maskClip(RoundedCornerShape(30))   //使用clip无效要用这个
                .background(items[index]),
            contentAlignment = Alignment.Center
        ) {
            Text("$index")
        }
    }
}

2.2 非容器化轮播 HorizontalUncontainedCarouse

@Composable fun HorizontalUncontainedCarousel(     state: CarouselState,     itemWidth: Dp,        //item固定宽度     modifier: Modifier = Modifier,     itemSpacing: Dp = 0.dp,        //item间隔     flingBehavior: TargetedFlingBehavior = CarouselDefaults.noSnapFlingBehavior(),     contentPadding: PaddingValues = PaddingValues(0.dp),        //容器内边距     content: @Composable CarouselItemScope.(itemIndex: Int) -> Unit )  把 itemWidth 设置成和 item 宽度一致就行，item宽度更大会无效，更小会留白。

@Composable
fun CarouselDemo() {
    val items = listOf(
        Color.Red,
        Color.Blue,
        Color.Yellow,
        Color.Magenta,
        Color.Green
    )
    val state = rememberCarouselState { items.count() }
    HorizontalUncontainedCarousel(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray),
        state = state,
        itemWidth = 150.dp,
        itemSpacing = 5.dp,
        contentPadding = PaddingValues(5.dp)
    ) { index ->
        Box(
            modifier = Modifier
                .height(200.dp)
                .width(150.dp)  //对比itemWidth，大于无效，小于会留白
                .maskClip(RoundedCornerShape(30))   //使用clip无效要用这个
                .background(items[index]),
            contentAlignment = Alignment.Center
        ) {
            Text("$index")
        }
    }
}