Android?Jetpack?Compose如何實(shí)現(xiàn)列表吸頂效果

這篇文章主要介紹“Android Jetpack Compose如何實(shí)現(xiàn)列表吸頂效果”，在日常操作中，相信很多人在Android Jetpack Compose如何實(shí)現(xiàn)列表吸頂效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Android Jetpack Compose如何實(shí)現(xiàn)列表吸頂效果”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

安卓傳統(tǒng)的 Recyclerview 打造懸浮頭部StickyHeader的吸頂效果，十分麻煩，而在Compose中就簡單多了

stickyHeader

Compose設(shè)計(jì)的時候考慮得很周到，他們提供了stickyHeader

作用就是添加一個粘性標(biāo)題項(xiàng)，即使在它后面滾動時也會保持固定。標(biāo)頭將保持固定，直到下一個標(biāo)頭取而代之。

參數(shù)key - 表示唯一的密鑰鍵。

它不允許對列表出現(xiàn)使用相同的鍵。密鑰的類型應(yīng)該可以通過 Bundle 保存。如果傳遞了 null，則列表中的位置將代表鍵。當(dāng)指定鍵時，滾動位置將基于該鍵保持，這意味著如果在當(dāng)前可見項(xiàng)目之前添加刪除項(xiàng)目，則具有給定鍵的項(xiàng)目將保留為第一個可見項(xiàng)目。

參數(shù)content 傳入Composable控件就即可顯示

實(shí)體類

創(chuàng)建一個實(shí)體類標(biāo)題和內(nèi)容

data class Post(
    val title:String,
    val contentData:List<String>
)

加載假數(shù)據(jù)

val list : MutableList<Post> = mutableListOf()
for (index in 1..10) {
    val contentData :MutableList<String> = mutableListOf()
    for (i in 1..30){
        contentData.add("內(nèi)容 $i")
    }
    list.add(Post("標(biāo)題$index",contentData))
}

定義一個垂直滾動列表，僅構(gòu)成和布局當(dāng)前可見的項(xiàng)目

LazyColumn {
    list.forEachIndexed { position, post ->
        stickyHeader {
            ListTitle(title = post.title)
        }

        items(post.contentData.size) { route ->
            StructureItem(post.contentData)
        }
        if (position <= list.size - 1) {
            Divider()
        }
        Spacer(modifier = Modifier.height(10.dp))
    }
}

吸頂標(biāo)題

接著封裝一個吸頂標(biāo)題，并傳出點(diǎn)擊事件

@Composable
fun ListTitle(
    onSubtitleClick: () -> Unit = {}
) {
        MediumTitle(
            title = title,
            modifier = Modifier.align(Alignment.CenterVertically).clickable {
                onSubtitleClick.invoke()
            }
}

效果圖

二級條目

接著寫二級條目

FlowRow可以將其子項(xiàng)置于水平流中的可組合項(xiàng)。如果水平空間太小而無法將所有子項(xiàng)放在一行中，則可能會使用多行。傳統(tǒng)的流式布局

用法很簡單，和row一樣

FlowRow {
    for (item in bean) {
        TextButton(
           ....
        }
    }
}

在content可組控件里面添加多個TextButton即可

fun StructureItem{
    Column{
        FlowRow() {
            for (item in bean) {
                TextButton
                {
                    Text()
                }

            }
        }

    }
}

效果圖

接著吸頂標(biāo)題放在LazyColumn里面就完成了

LazyColumn() {
    list.forEachIndexed { position, post ->
        stickyHeader {
            ListTitle(title = post.title) {
                //點(diǎn)擊事件
            }
        }
        item {
            StructureItem(post.contentData)
            Spacer(modifier = Modifier.height(10.dp))
        }
    }
}

完整代碼

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun StickyHeaderScreen() {
    val list: MutableList<Post> = mutableListOf()
    for (index in 1..10) {
        val contentData: MutableList<String> = mutableListOf()
        for (i in 1..12) {
            contentData.add("內(nèi)容 $i")
        }
        list.add(Post("標(biāo)題$index", contentData))
    }
    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        contentPadding = PaddingValues(vertical = 10.dp)
    ) {
        list.forEachIndexed { position, post ->
            stickyHeader {
                ListTitle(title = post.title) {
                    //點(diǎn)擊事件
                }
            }
            item {
                StructureItem(post.contentData)
                Spacer(modifier = Modifier.height(10.dp))
            }
        }
    }
}

data class Post(
    val title: String,
    val contentData: List<String>
)

@Composable
fun ListTitle(
    modifier: Modifier = Modifier,
    title: String,
    isLoading: Boolean = false,
    onSubtitleClick: () -> Unit = {}
) {
    Row(
        modifier = modifier
            .placeholder(false)
            .fillMaxWidth()
            .height(ListTitleHeight)
            .background(color = Color.Gray)
    ) {
        Box(
            modifier = Modifier
                .padding(horizontal = 10.dp)
                .width(5.dp)
                .height(16.dp)
                .align(Alignment.CenterVertically)
                .background(color = Color.Black)
        )
        MediumTitle(
            title = title,
            color = Color.Black,
            modifier = Modifier.align(Alignment.CenterVertically).clickable {
                onSubtitleClick.invoke()
            },
            isLoading = isLoading
        )
        Spacer(modifier = Modifier.weight(1f))
    }

}


@Composable
fun StructureItem(
    bean: List<String>
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp)
    ) {

        FlowRow(
            modifier = Modifier.padding(horizontal = 6.dp)
        ) {


            for (item in bean) {
                Box(modifier = Modifier.padding(horizontal = 2.dp, vertical = 3.dp)) {
                    TextButton(
                        modifier = Modifier.padding(horizontal = 3.dp).height(34.dp),
                        shape = RoundedCornerShape(12.dp),
                        onClick = { },
                        colors = ButtonDefaults.textButtonColors(
                            backgroundColor = themeColor
                        )
                    )
                    {
                        Text(
                            item,
                            color = Color.White
                        )
                    }

                }
            }
        }

    }
}

效果圖

到此，關(guān)于“Android Jetpack Compose如何實(shí)現(xiàn)列表吸頂效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！