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)部撐開(kāi)，all表示四周撐開(kāi)
    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之間添加一個(gè)水平空格！
        Spacer(modifier = Modifier.width(8.dp))
        Column {
            Text(text = msg.author)
            // 這里添加的是一個(gè)垂直空格！
            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è)置一個(gè)針對(duì)于本compose的全局狀態(tài)
// 可以理解為isExpanded是一個(gè)全局變量！
var isExpanded by remember { mutableStateOf(false) }
// clickable設(shè)置column中項(xiàng)目是否可以點(diǎn)擊，以及點(diǎn)擊后執(zhí)行的代碼
// 代碼和vue類似，點(diǎn)一下就反轉(zhuǎn)一下，達(dá)到開(kāi)啟和收回的效果
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，那么顯示所有行（即展開(kāi)）
            // 如果isExpanded為false，那么僅顯示一行（即收縮）
            maxLines = if (isExpanded) Int.MAX_VALUE else 1,
            style = MaterialTheme.typography.body2
        )
    }
}

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