Jetpack Compose 列表的展开与收起颜色动画效果

Posted 2022-06-15 安果移不动

class ComposeActivity : AppCompatActivity() 
    override fun onCreate(savedInstanceState: Bundle?) 
        super.onCreate(savedInstanceState)
        setContent 
            PreviewConversation()
        
    


@Composable
fun Conversation(messages: List<Message>) 
    LazyColumn 
        items(messages)  message ->
            MessageCard(msg = message)
        
    


@Preview
@Composable
fun PreviewConversation() 
    ComposeTheme() 
        Conversation(messages = SampleData.conversationSample)
    



@Composable
fun MessageCard(msg: Message) 
    Row(modifier = Modifier.padding(all = 8.dp)) 
        Image(
            painter = painterResource(id = R.mipmap.ic_launcher1),
            contentDescription = "1234",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
        )
        Spacer(modifier = Modifier.width(8.dp))

        var isExpanded by remember  mutableStateOf(false) 

        val surfaceColor by animateColorAsState(targetValue = if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)

        Column(modifier = Modifier.clickable 
            isExpanded = !isExpanded
        ) 
            Text(
                msg.msg,
                color = MaterialTheme.colors.secondaryVariant,
                style = MaterialTheme.typography.subtitle2
            )
            Spacer(modifier = Modifier.height(4.dp))

            Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) 
                Text(
                    msg.author,
                    style = MaterialTheme.typography.body2,
                    color = surfaceColor,
                    modifier = Modifier
                        .animateContentSize()
                        .padding(all = 4.dp),
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1
                )
            


        
    



@Composable
fun HelloContent() 
    Column(modifier = Modifier.padding(16.dp)) 
        var name by remember 
            mutableStateOf("")
        

        Text(
            text = "Hello!",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.h5
        )
        OutlinedTextField(
            value = name,
            onValueChange =  name = it ,
            label =  Text("Name") 
        )
    


//
//@Preview(name = "Light Mode")
//@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, name = "Dark Mode")
@Composable
fun PreviewMessageCard() 
    ComposeTheme 
        MessageCard(Message("123", "aaaa"))
    

message

package com.anguomob.jecpack.bean

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

数据内容

package com.anguomob.jecpack.bean;

object SampleData 
    // Sample conversation data
    val conversationSample = listOf(
        Message(
            "Colleague",
            "Test...Test...Test..."
        ),
        Message(
            "Colleague",
            "List of android versions:\\n" +
                    "Android KitKat (API 19)\\n" +
                    "Android Lollipop (API 21)\\n" +
                    "Android Marshmallow (API 23)\\n" +
                    "Android Nougat (API 24)\\n" +
                    "Android Oreo (API 26)\\n" +
                    "Android Pie (API 28)\\n" +
                    "Android 10 (API 29)\\n" +
                    "Android 11 (API 30)\\n" +
                    "Android 12 (API 31)\\n"
        ),
        Message(
            "Colleague",
            "I think Kotlin is my favorite programming language.\\n" +
                    "It's so much fun!"
        ),
        Message(
            "Colleague",
            "Searching for alternatives to XML layouts..."
        ),
        Message(
            "Colleague",
            "Hey, take a look at Jetpack Compose, it's great!\\n" +
                    "It's the Android's modern toolkit for building native UI." +
                    "It simplifies and accelerates UI development on Android." +
                    "Less code, powerful tools, and intuitive Kotlin APIs :)"
        ),
        Message(
            "Colleague",
            "It's available from API 21+ :)"
        ),
        Message(
            "Colleague",
            "Writing Kotlin for UI seems so natural, Compose where have you been all my life?"
        ),
        Message(
            "Colleague",
            "Android Studio next version's name is Arctic Fox"
        ),
        Message(
            "Colleague",
            "Android Studio Arctic Fox tooling for Compose is top notch ^_^"
        ),
        Message(
            "Colleague",
            "I didn't know you can now run the emulator directly from Android Studio"
        ),
        Message(
            "Colleague",
            "Compose Previews are great to check quickly how a composable layout looks like"
        ),
        Message(
            "Colleague",
            "Previews are also interactive after enabling the experimental setting"
        ),
        Message(
            "Colleague",
            "Have you tried writing build.gradle with KTS?"
        ),
    )

通过设置Text的maxLins来进行适配展开与折叠

 maxLines = if (isExpanded) Int.MAX_VALUE else 1

又通过 

animateColorAsState 对颜色进行渐变处理

        val surfaceColor by animateColorAsState(targetValue = if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)

最后只需要设置上去color 和maxLines就好了
 

            Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) 
                Text(
                    msg.author,
                    style = MaterialTheme.typography.body2,
                    color = surfaceColor,
                    modifier = Modifier
                        .animateContentSize()
                        .padding(all = 4.dp),
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1
                )
            

这里记得要价一个属性

.animateContentSize()

这样才会有动画的方式改变大小显示。