class MainActivity2 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MessageCard(Message("Android", "Jetpack Compose"))
        }
    }
}
data class Message(val author: String, val body: String)
@Composable
fun MessageCard(msg: Message) {
    Text(text = msg.author)
    Text(text = msg.body)
}

@Composable
fun MessageCard(msg: Message) {
    // 使用padding內(nèi)部撐開，all表示四周撐開
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                // 設(shè)置該組件的大小為40dp
                .size(40.dp)
                // 把圖片變成圓形的
                .clip(CircleShape)
        )
        // 在image和column之間添加一個水平空格！
        Spacer(modifier = Modifier.width(8.dp))
        Column {
            Text(text = msg.author)
            // 這里添加的是一個垂直空格！
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }
}

object SampleData {
    val conversationData = listOf(
        Message(
            "jack",
            "test name"
        ),
        Message(
            "fakeman",
            "idaofihoeqh iodhoe hfqow " +
                    "ehfsdla hfioeh fowh fldsah lfhoqei hfo" +
                    " hod hsafohewqgjlfjdsnvc,mxbg kjwfhw" +
                    " hoe hfsdhf kwejashd has jhdqwo oiadhf oiha " +
                    "oi dosi awqi jiojagakfjk ladfi jslkf h" +
                    "lwkeh flkadsh flah fioewhfoadshlfhsa"
        ),
    )
}

// by表示使用委托，設(shè)置一個針對于本compose的全局狀態(tài)
// 可以理解為isExpanded是一個全局變量！
var isExpanded by remember { mutableStateOf(false) }
// clickable設(shè)置column中項目是否可以點擊，以及點擊后執(zhí)行的代碼
// 代碼和vue類似，點一下就反轉(zhuǎn)一下，達到開啟和收回的效果
Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
    ...
    Surface(
        shape = MaterialTheme.shapes.medium,
        elevation = 1.dp,
    ) {
        Text(
            text = msg.body,
            modifier = Modifier.padding(all = 4.dp),
            // 判斷全局狀態(tài)isExpanded值
            // 如果isExpanded為true，那么顯示所有行（即展開）
            // 如果isExpanded為false，那么僅顯示一行（即收縮）
            maxLines = if (isExpanded) Int.MAX_VALUE else 1,
            style = MaterialTheme.typography.body2
        )
    }
}

// 同樣的委托，注冊全局動畫狀態(tài)
// 由于內(nèi)容過于龐雜，后續(xù)將會詳細介紹動畫狀態(tài)是個什么東西！
val surfaceColor by animateColorAsState(
    if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface,
)