Android Jetpack Compose 中的 LazyColumn 和 LazyRow 中的动画

Jetpack compose 1.1.0 几天前刚刚发布，它添加了新功能，其中之一是能够为 LazyRow 和 LazyColumn 中的项目设置动画。在本文中，我们将了解如何为 LazyColumn 中的项目设置动画。

先决条件：

• 了解 Kotlin。
• Jetpack Compose 的知识。
• LazyComposables 知识

分步实施

第 1 步：创建一个新项目

要在 Android Studio Canary 版本中创建新项目，请参阅如何使用 Jetpack Compose 在 Android Studio Canary 版本中创建新项目。

第 2 步：更新依赖项

在 1.1.0 中添加了项目放置动画，打开build.gradle(Project level)并将 compose 版本更新为1.1.0 ，将 Kotlin 版本更新为1.6.10，然后按同步。

第 3 步：使用 MainActivity.kt

创建一个可组合函数ListAnimations()。创建要显示的项目列表

Kotlin

// List of String to show in LazyColumn
var names by remember {
        mutableStateOf(
            listOf(
                "GeeksForGeeks",
                "HackerRank",
                "HackerEarth",
                "CodeChef",
                "CodeForces",
                "LeetCode",
            )
       )
}

创建按钮以添加、删除、随机播放以演示动画。

科特林

// Buttons controls to add,remove,shuffle elements
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
   ) {
            // Button to Remove random element
            Button(
                onClick = {
                    // random number between 0<=x
                        index != random
                    }
                }) {
                Text(text = "Remove")
            }
  
            // Button to add a random string
            Button(onClick = {
                // generate a random string
                val allowedChars = ('A'..'Z') + ('a'..'z') + ('0'..'9')
                val randomString =(1..10)
                    .map { allowedChars.random() }
                    .joinToString("")
  
                // add random string to the list
                names = names+randomString
            }) {
                Text(text = "Add")
            }
  
            // Button to shuffle the list
            Button(onClick = {
                // Shuffle
                names = names.shuffled()
            }) {
                Text(text = "Shuffle")
            }
        }

现在创建 LazyColumn。在项目函数LazyColumn 和 LazyRow 的可堆肥内部有一个新的修饰符，即animateItemPlacement ，它需要在项目函数中传递一个关键参数。请参阅评论以更好地理解。

科特林

// LazyColumn
LazyColumn {
            // show elements using items function
            items(
                // list of items to display
                items = names,
                key = {
                it
            }) {name->
  
                // Text Composable to display item
                Text(
                    text = name,
  
                    modifier = Modifier
                        .padding(8.dp)
                        .fillMaxWidth()
                        .animateItemPlacement() 
                        // Important: add this modifier. 
                        // Compose will animate items placement 
                        // according to the key
                )
            }
        }

现在将控件和 LazyColumn 包装在一个 Column 中，以便它们堆叠起来。最终ListAnimation Composable 将如下所示

科特林

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListAnimation() {
    // List of String to show in LazyColumn
    var names by remember {
        mutableStateOf(
            listOf(
                "GeeksForGeeks",
                "HackerRank",
                "HackerEarth",
                "CodeChef",
                "CodeForces",
                "LeetCode",
            )
        )
    }
  
    Column {
        // Buttons controls to 
          // add,remove,shuffle elements
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            // Button to Remove random element
            Button(
                onClick = {
                    // random number between 0<=x
                        index != random
                    }
                }) {
                Text(text = "Remove")
            }
  
            // Button to add a random string
            Button(onClick = {
                // generate a random string
                val allowedChars = ('A'..'Z') + ('a'..'z') + ('0'..'9')
                val randomString =(1..10)
                    .map { allowedChars.random() }
                    .joinToString("")
  
                // add random string to the list
                names = names+randomString
            }) {
                Text(text = "Add")
            }
  
            // Button to shuffle the list
            Button(onClick = {
                // Shuffle
                names = names.shuffled()
            }) {
                Text(text = "Shuffle")
            }
        }
  
        // LazyColumn
        LazyColumn {
            // show elements using items function
            items(
                // list of items to display
                items = names,
                key = {
                it
            }) {name->
                // Text Composable to display item
                Text(
                    text = name,
  
                    modifier = Modifier
                        .padding(8.dp)
                        .fillMaxWidth()
                        .animateItemPlacement() 
                        // Important: add this modifier. 
                        // Compose will animate items placement 
                        // according to the key
                )
            }
        }
    }
}

现在从 MainActivity 类中的setContent调用这个可组合

科特林

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ListAnimation()
                }
        }
    }
}

现在运行这个应用程序来查看动画。

输出：