Jetpack Compose實現列表和動畫效果詳解

Posted on by

創建一個列表消息卡片

到目前為止，我們隻有一個消息的卡片，看上去有點單調，所以讓我們來改善它，讓它擁有多條信息。我們需要創建一個能夠顯示多條消息的函數。對於這種情況，我們可以使用 Compose 的 LazyColumn 和 LazyRow。這些 Composable 隻渲染屏幕上可見的元素，所以它們的設計對於長列表來說很有效果。同時，它們避免瞭 RecyclerView 與 XML 佈局的復雜性。

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, "男人最好的狀態是，25歲的時候能帶著30歲的成熟去經營愛情，30歲的時候還帶著18歲的不怕，去勇敢愛\uD83D\uDCAA"),
        Message(author, "Android之旅"),
​
    )
}

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

可交互的動畫效果

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

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

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

@Composable
fun MessageCard(msg: Message) {
​
    var isExpanded by remember { mutableStateOf(false) } // 創建一個能夠檢測卡片是否被展開的變量
​
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 5.dp,
        modifier = Modifier
            .padding(all = 8.dp)
            .clickable { // 添加一個新的 Modifier 擴展方法，可以讓元素具有點擊的效果
                isExpanded = !isExpanded // 編寫點擊的事件內容
            }
    ) {
        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 參數，在默認情況下，隻顯示一行文本內容
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    // Composable 大小的動畫效果
                    modifier = Modifier.animateContentSize()
                )
            }
        }
    }
}

現在我們已經能夠完成每個卡片的檢測瞭，讓我們繼續使用 isExpanded 來做點其他的事情吧！比如改變卡片的顏色

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

到此這篇關於Jetpack Compose實現列表和動畫效果詳解的文章就介紹到這瞭,更多相關Jetpack Compose列表 動畫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：