android,Compose,消息列表和动画(点击item的时候,就会删除)

Compose,消息列表和动画(点击item的时候,就会删除)

package com.example.mycompose08

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.mycompose08.ui.theme.MyApplicationTheme

import androidx.compose.animation.*
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.material3.*
import androidx.compose.material3.Card
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.unit.*


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    AnimatedList()
                }
            }
        }
    }
}

// 定义一个可组合函数,用于显示一个列表
@Composable
fun AnimatedList() {
    // 创建一个状态变量,用于存储列表的数据
    val list = remember { mutableStateListOf("Apple", "Banana", "Cherry","先天下之优而优","后天下之乐而乐") }

    // 创建一个懒加载列表,用于显示列表的每一项
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp)
    ) {
        // 遍历列表的数据,为每一项创建一个可组合函数
        items(list) { item ->
            // 使用AnimatedVisibility函数,根据列表项是否可见来添加淡入淡出的动画效果
            AnimatedVisibility(
                visible = list.contains(item),
                enter = fadeIn(),
                exit = fadeOut()
            ) {
                // 使用Card函数,创建一个卡片样式的列表项
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp)
                        .clickable {
                            // 点击卡片时,从列表中移除该项
                            list.remove(item)
                        },
                    //elevation = 4.dp
//                    shadowElevation = 4.dp
                ) {
                    // 在卡片中显示列表项的文本内容
                    Text(
                        text = item,
                        modifier = Modifier.padding(16.dp),
                        fontSize = 24.sp
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        AnimatedList()
    }
}

android,Compose,消息列表和动画(点击item的时候,就会删除)_第1张图片

android,Compose,消息列表和动画(点击item的时候,就会删除)_第2张图片

你可能感兴趣的:(android)