Compose 的基础知识【07】-第一阶段完成

恭喜你，看到这里 你已经学会了 Compose 的基础知识，你创建了一个简单的信息屏幕，并且有效地显示了一个包含图片和文字的列表，按照 Material Design 的风格设计，包括一个深色主题和预览，以下都是你通过 100 行以内的代码来完成的。

到目前为止你学到的内容

• 定义一个 Composable 函数

• 在你的 Composable 函数中添加不同的元素

• 使用布局 Composable 来构建你的 UI 结构

• 通过 modifiers 来扩展你的 Composables

• 创建一个有效列表

• 追踪状态，并且修改它

• 在一个 Composable 上添加了用户互动

• 在扩展信息的同时进行了动画处理

这篇文章的所有代码你可以在下面找到

​
​
package com.example.composestudy
​
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
​
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import com.example.composestudy.ui.theme.ComposestudyTheme
import java.nio.file.Files.size
​
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme {
                Conversation(messages = MsgData.messages)
            }
        }
    }
}
object MsgData {
    private const val author = "大前端之旅"
    val messages = listOf(
        Message(author, "我们开始更新啦"),
        Message(author, "秋刀鱼会过期吗？"),
        Message(author, "下周就是端午了"),
        Message(author, "男人最好的状态是，25岁的时候能带着30岁的成熟去经营爱情，30岁的时候还带着18岁的不怕，去勇敢爱\uD83D\uDCAA"),
        Message(author, "Android之旅"),
​
        )
}
data class Message(val author: String, val body: String)
@Composable
fun MessageCard(msg: Message) {
​
    var isExpanded by remember { mutableStateOf(false) } // 创建一个能够检测卡片是否被展开的变量
    val surfaceColor by animateColorAsState(
        targetValue = if (isExpanded) Color(0xFFCCCCCC) else MaterialTheme.colors.surface
    )
​
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 5.dp,
        modifier = Modifier
            .padding(all = 8.dp)
            .clickable { // 添加一个新的 Modifier 扩展方法，可以让元素具有点击的效果
                isExpanded = !isExpanded // 编写点击的事件内容
            }
    ) {
        Row(
            modifier = Modifier.padding(all = 8.dp)
        ) {
            Image(
                painterResource(id = R.mipmap.ic_launcher),
                contentDescription = "profile picture",
                modifier = Modifier
                    .size(50.dp)
                    .clip(CircleShape)
                    .border(1.5.dp, MaterialTheme.colors.secondary, shape = CircleShape)
            )
            Spacer(Modifier.padding(horizontal = 8.dp))
            Column {
                Text(
                    text = msg.author,
                    color = MaterialTheme.colors.secondaryVariant,
                    style = MaterialTheme.typography.subtitle2
                )
                Spacer(Modifier.padding(vertical = 4.dp))
                Text(
                    text = msg.body,
                    style = MaterialTheme.typography.body2,
                    // 修改 maxLines 参数，在默认情况下，只显示一行文本内容
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    // Composable 大小的动画效果
                    modifier = Modifier.animateContentSize(),
                            color = surfaceColor
                )
            }
        }
    }
}
@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(msg = message)
        }
    }
}
​
​
​
@Preview(name = "Light Mode")
​
@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        Conversation(messages = MsgData.messages)
    }
}

如果你想深入了解其中的一些步骤，请探索下面的资源。