Compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.lazy.items


class Compose_09Activity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val askAndAnswer = mutableListOf()
            askAndAnswer.add(
                AskAndAnswer("什么是Android Jetpack ？",
                " Jetpack 是一个由多个库组成的套件，可帮助开发者遵循最佳做法、减少样板代码并编写可在各种 Android 版本和设备中一致运行的代码，让开发者可将精力集中于真正重要的编码工作。n")
            )

            askAndAnswer.add(
                AskAndAnswer("为什么采用 Compose ",
                    "Jetpack Compose 是用于构建原生 Android 界面的新款工具包。您可以在此处找到有关使用 Compose 的最新信息。")
            )

            askAndAnswer.add(
                AskAndAnswer("什么是Compose？",
                    "Jetpack Compose 是用于构建原生 Android 界面的新工具包。它使用更少的代码、强大的工具和直观的 Kotlin API，可以帮助您简化并加快 Android 界面开发，打造生动而精彩的应用。它可让您更快速、更轻松地构建 Android 界面。在打造 Compose 的过程中，我们与各类合作伙伴通力合作，他们亲身体验了所有这些优势并与我们分享了一些感悟。 ")
            )

            compose_09_lazyColumn(askAndAnswer) //
        }
    }
}

@Composable
fun compose_09_lazyColumn(askAndAnswers: List) {
    LazyColumn {
        items(askAndAnswers) { askAndAnswer ->
            compose_09(askAndAnswer = askAndAnswer)
        }

    }
}

@Composable
fun compose_09(askAndAnswer: AskAndAnswer){
    var isExpanded by remember {
        mutableStateOf(false)
    }
    Column {
        Row(modifier = Modifier
            .padding(10.dp)
            .clickable { isExpanded = !isExpanded },
            verticalAlignment = Alignment.CenterVertically,) {
            Text(text = askAndAnswer.ask, color = Color(0xff333333),
                fontSize = 14.sp, modifier = Modifier.weight(1.0f, true))
            Image(painter = painterResource(id = if(isExpanded) R.drawable.icon_arrow_up
            else R.drawable.icon_arrow_down), contentDescription = "更多")
        }
        if (isExpanded){
            Text(text = askAndAnswer.answer,
            fontSize = 12.sp, color = Color.Red, modifier = Modifier.padding(start = 10.dp, end = 10.dp, bottom = 10.dp))
        }
        Divider(modifier = Modifier.background(Color(0xeeeeee)).height(1.dp))
    }
    
}

其中remember会记住计算产生的值。计算将仅在合成过程中进行评估。“重新组合”将始终返回由组合生成的值；mutableStateOf()返回用传入值初始化的新可变状态MutableState类是单个值持有者，其读写 *** 作由Compose观察。此外，对它的写入作为快照系统的一部分进行处理。