#Jetpack Compose 基本概念:

1. 可組合函式 Composable functions
2. 版面配置 Layouts
3. 質感設計 Material Design
4. 清單和動畫 Lists and animations

清單和動畫 Lists and animations

清單和動畫，不就是以前的 RecyclerView 和 adapter 嗎?
RecyclerView 和 adapter 範例可以看我去年的鐵人賽寫的文章
Kotlin Android 第19天，從 0 到 ML - RecyclerView 動態列表
https://ithelp.ithome.com.tw/articles/10271398

那就來看看Compose 如何輕鬆建立清單，並增添動畫效果吧

先把範例的假資料集匯入您的專案 https://gist.github.com/yrezgui/26a1060d67bf0ec2a73fa12695166436

• Step1 先建立一個 Conversation 函式，用 LazyColumn 和item 把 list的資料，逐一呼叫到原來的Greeting(msg: Message) 可組合函式，這樣就完成了adapter的事了嗎，真的這麼神?

改呼叫Conversation
//Greeting(Message("Android" ,"Kevin"))
Conversation(SampleData.conversationSample)

data class Message(val author:String, val body:String )

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            Greeting(message)
        }
    }
}

• Step2 在可組合函式中使用remember 和 mutableStateOf 函式來追蹤這種狀態變化

@Composable
fun Greeting(msg: Message) {
...
// We keep track if the message is expanded or not in this
// variable
//增加展開功能和使用 remember
var isExpanded by remember { mutableStateOf(false) }

// We toggle the isExpanded variable when we click on this Column
Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
    Text(
         text = msg.author,
         color = MaterialTheme.colors.secondaryVariant,
         style = MaterialTheme.typography.subtitle2
        )
    // Add a vertical space between the author and message texts
    Spacer(modifier = Modifier.height(4.dp))
    Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) {
    //新增加的文字
    Text(
         text = "This is $msg.body!",
         modifier = Modifier.padding(all = 4.dp),
         // If the message is expanded, we display all its content
         // otherwise we only display the first line
         //展開後的資料
         maxLines = if (isExpanded) Int.MAX_VALUE else 1,
         style = MaterialTheme.typography.subtitle2
         )
       }    

• Step3 使用 animateContentSize 修飾符來製作動畫

//增加動畫
// surfaceColor will be updated gradually from one color to the other
        val surfaceColor by animateColorAsState(
            if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface,
        )

        // We toggle the isExpanded variable when we click on this Column
        Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
            Text(
                text = msg.author,
                color = MaterialTheme.colors.secondaryVariant,
                style = MaterialTheme.typography.subtitle2
            )

            Spacer(modifier = Modifier.height(4.dp))

            Surface(
                shape = MaterialTheme.shapes.medium,
                elevation = 1.dp,
                
                // surfaceColor color will be changing gradually from primary to surface
                color = surfaceColor,
                // animateContentSize will change the Surface size gradually
                //增加動畫
                modifier = Modifier.animateContentSize().padding(1.dp)
            ) {
                Text(
                    text = msg.body,
                    modifier = Modifier.padding(all = 4.dp),
                    // If the message is expanded, we display all its content
                    // otherwise we only display the first line
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    style = MaterialTheme.typography.body2
                )
            }
        }
    }

看一下結果吧:
使用 Interactive Mode 就可以模擬點擊後的畫面
點擊前

點擊後

小小心得:
在作用步驟1 和 步驟2 後，只有新增和修改幾行code，就可以完成 RecyclerView 和 adapter呀，步驟3再加上展開動畫，這4天主程式和範例假資料加起來都不用200行程式，還有加上展開動畫訊息清單和主題，真的大大減少了程式碼，會不會太神奇了呀，真的有點嚇到吃手手呀

參考:

https://developer.android.com/jetpack/compose/tutorial