快捷導(dǎo)航

Jetpack Compose實(shí)現(xiàn)列表和動(dòng)畫效果詳解

更新時(shí)間：2022年06月01日 09:31:26 作者：大前端之旅

這篇文章主要為大家詳細(xì)講講Jetpack Compose實(shí)現(xiàn)列表和動(dòng)畫效果的方法步驟，文中的代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

創(chuàng)建一個(gè)列表消息卡片

到目前為止，我們只有一個(gè)消息的卡片，看上去有點(diǎn)單調(diào)，所以讓我們來改善它，讓它擁有多條信息。我們需要?jiǎng)?chuàng)建一個(gè)能夠顯示多條消息的函數(shù)。對(duì)于這種情況，我們可以使用 Compose 的 LazyColumn 和 LazyRow。這些 Composable 只渲染屏幕上可見的元素，所以它們的設(shè)計(jì)對(duì)于長(zhǎng)列表來說很有效果。同時(shí)，它們避免了 RecyclerView 與 XML 布局的復(fù)雜性。

import androidx.compose.foundation.lazy.items
?
@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(msg = message)
        }
    }
}
?
@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        Conversation(messages = MsgData.messages)
    }
}

你可以在這里獲取 MsgData 的代碼

MsgData.kt

?
?
object MsgData {
    private const val author = "大前端之旅"
    val messages = listOf(
        Message(author, "我們開始更新啦"),
        Message(author, "秋刀魚會(huì)過期嗎？"),
        Message(author, "下周就是端午了"),
        Message(author, "男人最好的狀態(tài)是，25歲的時(shí)候能帶著30歲的成熟去經(jīng)營(yíng)愛情，30歲的時(shí)候還帶著18歲的不怕，去勇敢愛\uD83D\uDCAA"),
        Message(author, "Android之旅"),
?
    )
}

在這個(gè)代碼片段中，你可以看到 LazyColumn 有一個(gè) items 子項(xiàng)。它接收一個(gè) List 作為參數(shù)，它的 lambda 接收一個(gè)我們命名為 message 的參數(shù)（我們可以隨便命名）。而這個(gè) lambda 將會(huì)調(diào)用每個(gè) List 中里面提供的 item。

可交互的動(dòng)畫效果

我們的對(duì)話越來越有趣了，是時(shí)候玩玩動(dòng)畫了! 我們將會(huì)實(shí)現(xiàn)當(dāng)點(diǎn)擊一個(gè)卡片查看詳細(xì)內(nèi)容的時(shí)候，使內(nèi)容的大小和背景顏色都有動(dòng)畫效果。為了存儲(chǔ)這個(gè)本地 UI 狀態(tài)，我們需要跟蹤一條消息是否已經(jīng)展開了。為了跟蹤這種狀態(tài)變化，我們必須使用 remember 和 mutableStateOf 函數(shù)。

Composable 函數(shù)可以通過使用 remember 將本地狀態(tài)存儲(chǔ)在內(nèi)存中，并跟蹤傳遞給 mutableStateOf 的值的變化。當(dāng)值被更新時(shí)，使用該狀態(tài)的 Composable 函數(shù)（及其子函數(shù)）將被自動(dòng)重新繪制。我們把這稱為重組（recomposition）。

通過使用 Compose 的狀態(tài) API，如 remember 和 mutableStateOf，任何對(duì)狀態(tài)的改變都會(huì)自動(dòng)更新 UI。

@Composable
fun MessageCard(msg: Message) {
?
    var isExpanded by remember { mutableStateOf(false) } // 創(chuàng)建一個(gè)能夠檢測(cè)卡片是否被展開的變量
?
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 5.dp,
        modifier = Modifier
            .padding(all = 8.dp)
            .clickable { // 添加一個(gè)新的 Modifier 擴(kuò)展方法，可以讓元素具有點(diǎn)擊的效果
                isExpanded = !isExpanded // 編寫點(diǎn)擊的事件內(nèi)容
            }
    ) {
        Row(
            modifier = Modifier.padding(all = 8.dp)
        ) {
            Image(
                painterResource(id = R.drawable.profile_picture),
                contentDescription = "profile picture",
                modifier = Modifier
                    .size(50.dp)
                    .clip(CircleShape)
                    .border(1.5.dp, MaterialTheme.colors.secondary, shape = CircleShape)
            )
            Spacer(Modifier.padding(horizontal = 8.dp))
            Column {
                Text(
                    text = msg.author,
                    color = MaterialTheme.colors.secondaryVariant,
                    style = MaterialTheme.typography.subtitle2
                )
                Spacer(Modifier.padding(vertical = 4.dp))
                Text(
                    text = msg.body,
                    style = MaterialTheme.typography.body2,
                    // 修改 maxLines 參數(shù)，在默認(rèn)情況下，只顯示一行文本內(nèi)容
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    // Composable 大小的動(dòng)畫效果
                    modifier = Modifier.animateContentSize()
                )
            }
        }
    }
}

現(xiàn)在我們已經(jīng)能夠完成每個(gè)卡片的檢測(cè)了，讓我們繼續(xù)使用 isExpanded 來做點(diǎn)其他的事情吧！比如改變卡片的顏色

    // 創(chuàng)建一個(gè)能夠根據(jù) isExpanded 變量值而改變顏色的變量
    val surfaceColor by animateColorAsState(
        targetValue = if (isExpanded) Color(0xFFCCCCCC) else MaterialTheme.colors.surface
    )
?
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 5.dp,
        modifier = Modifier
            .padding(all = 8.dp)
            .clickable {
                isExpanded = !isExpanded
            },
        color = surfaceColor
    ) {
        ...
        ...
    }

到此這篇關(guān)于Jetpack Compose實(shí)現(xiàn)列表和動(dòng)畫效果詳解的文章就介紹到這了,更多相關(guān)Jetpack Compose列表動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: