Jetpack Compose實現(xiàn)列表和動畫效果詳解

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

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

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

到目前為止，我們只有一個消息的卡片，看上去有點單調(diào)，所以讓我們來改善它，讓它擁有多條信息。我們需要創(chuàng)建一個能夠顯示多條消息的函數(shù)。對于這種情況，我們可以使用 Compose 的 LazyColumn 和 LazyRow。這些 Composable 只渲染屏幕上可見的元素，所以它們的設(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, "秋刀魚會過期嗎？"),
        Message(author, "下周就是端午了"),
        Message(author, "男人最好的狀態(tài)是，25歲的時候能帶著30歲的成熟去經(jīng)營愛情，30歲的時候還帶著18歲的不怕，去勇敢愛\uD83D\uDCAA"),
        Message(author, "Android之旅"),
?
    )
}

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

可交互的動畫效果

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

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

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

@Composable
fun MessageCard(msg: Message) {
?
    var isExpanded by remember { mutableStateOf(false) } // 創(chuàng)建一個能夠檢測卡片是否被展開的變量
?
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 5.dp,
        modifier = Modifier
            .padding(all = 8.dp)
            .clickable { // 添加一個新的 Modifier 擴(kuò)展方法，可以讓元素具有點擊的效果
                isExpanded = !isExpanded // 編寫點擊的事件內(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 大小的動畫效果
                    modifier = Modifier.animateContentSize()
                )
            }
        }
    }
}

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

    // 創(chuàng)建一個能夠根據(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
    ) {
        ...
        ...
    }