怎么自己编码做网站,游戏网页设计html代码大全,邮箱在线登录,Wordpress crm系统一、列表和动画
列表和动画在应用内随处可见。在本课中#xff0c;您将学习如何利用 Compose 轻松创建列表并添加有趣的动画效果。
1、创建消息列表
只包含一条消息的聊天略显孤单#xff0c;因此我们将更改对话#xff0c;使其包含多条消息。您需要创建一个可显示多条消…一、列表和动画
列表和动画在应用内随处可见。在本课中您将学习如何利用 Compose 轻松创建列表并添加有趣的动画效果。
1、创建消息列表
只包含一条消息的聊天略显孤单因此我们将更改对话使其包含多条消息。您需要创建一个可显示多条消息的 Conversation 函数。对于此用例请使用 Compose 的 LazyColumn 和 LazyRow。这些可组合项只会呈现屏幕上显示的元素因此对于较长的列表使用它们会非常高效。
Composable
fun Conversation(messages: ListMessage) {LazyColumn {items(messages.size) { index -MessageCard(messages[index])}}
}Preview(showBackground true)
Composable
fun PreviewConversation() {Compose_DemoTheme {Conversation(messages SampleData.conversationSample)}
}object SampleData{val conversationSample listOf(Message(Lexi,Test...Test,,,Test,,,),Message(Lexi,只包含一条消息的聊天略显孤单。),Message(Lexi,因此我们将更改对话使其包含多条消息。您需要创建一个可显示多条消息的 Conversation 函数),Message(Lexi,对于此用例请使用 Compose 的 LazyColumn 和 LazyRow。这些可组合项只会呈现屏幕上显示的元素因此对于较长的列表使用它们会非常高效),Message(Lexi,在此代码段中),Message(Lexi,您可以看到 LazyColumn 包含一个 items 子项),Message(Lexi,它接受 List 作为参数并且其 lambda 会收到我们命名为 message 的参数可以随意为其命名该参数是 Message 的实例),Message(Lexi,简而言之系统会针对提供的 List 的每个项调用此 lambda),Message(Lexi,将示例数据集复制到您的项目中以便快速引导对话),)
}在此代码段中您可以看到 LazyColumn 包含一个 items 子项。它接受 List 作为参数并且其 lambda 会收到我们命名为 index的参数可以随意为其命名该参数是 List的index。简而言之系统会针对提供的 List 的每个项调用此 lambda。将示例数据集复制到您的项目中以便快速引导对话。
2、在展开消息时显示动画效果
对话变得更加有趣了。是时候添加动画效果了您将添加展开消息以显示更多内容的功能同时为内容大小和背景颜色添加动画效果。为了存储此本地界面状态您需要跟踪消息是否已展开。为了跟踪这种状态变化您必须使用 remember 和 mutableStateOf 函数。
可组合函数可以使用 remember 将本地状态存储在内存中并跟踪传递给 mutableStateOf 的值的变化。该值更新时系统会自动重新绘制使用此状态的可组合项及其子项。这称为重组。
通过使用 Compose 的状态 API如 remember 和 mutableStateOf系统会在状态发生任何变化时自动更新界面。
class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)
// enableEdgeToEdge()setContent {Compose_DemoTheme {Conversation(messages SampleData.conversationSample)}}}
}Composable
fun Conversation(messages: ListMessage) {LazyColumn {items(messages.size) { index -MessageCard(messages[index])}}
}Composable
fun MessageCard(msg: Message) {Row(modifier Modifier.padding(all 8.dp)) {Image(painter painterResource(id R.drawable.ic_android_logo),contentDescription Contact profile picture,modifier Modifier.size(40.dp).clip(CircleShape).border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape))Spacer(modifier Modifier.width(8.dp))//We keep track if the message is expanded or not in this//variablevar isExpanded by remember { mutableStateOf(false) }Column(modifier Modifier.clickable { isExpanded !isExpanded }) {Text(text msg.author,color MaterialTheme.colorScheme.secondary,style MaterialTheme.typography.titleSmall)Spacer(modifier Modifier.width(4.dp))Surface(shape MaterialTheme.shapes.medium, shadowElevation 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 linemaxLines if (isExpanded) Int.MAX_VALUE else 1,style MaterialTheme.typography.bodyMedium)}}}
}注意您需要添加以下导入内容才能正确使用 Kotlin 的委托属性语法by 关键字。按 AltEnter 或 OptionEnter 即可添加这些内容。 import androidx.compose.runtime.getValue import androidx.compose.runtime.setValue 3、更改消息内容的背景颜色
现在您可以根据点击消息时消息的 isExpanded 状态更改消息内容的背景颜色。您将使用 clickable 修饰符来处理可组合项上的点击事件。您会为背景颜色添加动画效果使其值逐步从 MaterialTheme.colorScheme.surface 更改为 MaterialTheme.colorScheme.primary反之亦然而不只是切换 Surface 的背景颜色。为此您将使用 animateColorAsState 函数。最后您将使用 animateContentSize 修饰符顺畅地为消息容器大小添加动画效果
class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)
// enableEdgeToEdge()setContent {Compose_DemoTheme {Conversation(messages SampleData.conversationSample)}}}
}Composable
fun Conversation(messages: ListMessage) {LazyColumn {items(messages.size) { index -MessageCard(messages[index])}}
}Composable
fun MessageCard(msg: Message) {Row(modifier Modifier.padding(all 8.dp)) {Image(painter painterResource(id R.drawable.ic_android_logo),contentDescription Contact profile picture,modifier Modifier.size(40.dp).clip(CircleShape).border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape))Spacer(modifier Modifier.width(8.dp))//We keep track if the message is expanded or not in this//variablevar isExpanded by remember { mutableStateOf(false) }val surfaceColor by animateColorAsState(if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface,)Column(modifier Modifier.clickable { isExpanded !isExpanded }) {Text(text msg.author,color MaterialTheme.colorScheme.secondary,style MaterialTheme.typography.titleSmall)Spacer(modifier Modifier.width(4.dp))Surface(shape MaterialTheme.shapes.medium,shadowElevation 1.dp,color surfaceColor,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 linemaxLines if (isExpanded) Int.MAX_VALUE else 1,style MaterialTheme.typography.bodyMedium)}}}
}二、后续步骤
恭喜您已完成 Compose 教程您已高效地构建了一个简单的聊天界面该界面显示包含图片和文字的可展开动画消息列表使用 Material Design 原则设计添加了深色主题且具有预览功能所有内容只需不到 100 行代码
以下是您目前为止所学的内容
定义可组合函数在可组合项中添加不同的元素使用布局可组合项构建界面组件使用修饰符扩展可组合项创建高效列表跟踪状态以及修改状态在可组合项上添加用户互动在展开消息时显示动画效果
Compose官方中文课程
Jetpack Compose 官方使用入门
