Compose学习记录(2)-组件状态

1. Compose中的状态
   可组合函数可以按任意顺序频繁执行，对于组件中的状态需要通过特定方式保存起来。当状态发生变化时，它会自动触发组件UI的重组: remember{ mutableStateOf(T) }

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    val ctx = LocalContext.current
    val expand = remember{ mutableStateOf(false) }
    val expandPadding = if (expand.value) 48.dp else 0.dp

    Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp)) {
            Column(modifier = Modifier.weight(1f)
                .padding(bottom = expandPadding)) {
                Text(text = "Hello")
                Text(text = name)
            }
            ElevatedButton(onClick = {
                expand.value = !expand.value
                toast(ctx, "You Click $name")
            }) {
                Text(if (expand.value) "Show less" else "Show More")
            }
        }
    }
}

2. 状态提升

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    var shouldShowOnboarding by remember { mutableStateOf(true) }
    Surface(modifier) {
        if (shouldShowOnboarding) {
            OnboardingScreen(
                { shouldShowOnboarding = false })
        } else {
            Greetings()
        }
    }
}
@Composable
fun OnboardingScreen(onContinueClicked: ()->Unit, modifier: Modifier = Modifier) {
    Column(modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Welcome to the Basics Codelab!")
        Button(modifier = Modifier.padding(24.dp),
            onClick = onContinueClicked) {
            Text("Continue")
        }
    }
}

• Column可设置vertical和horizontal的对齐方式。
• 状态使用 by remember 如果报错，只需要引入 import androidx.compose.runtime.getValue 、setValue
• 把状态放到需要用到地方，也就是该组件的父级中(也就是状态提升)。

3. 创建高效延迟列表
   把 Greetings 中的names增加到100条记录，names: List = List(1000){ “R$it” }
   然后运行界面会很卡顿，并且也不能滑动列表。
   为显示可滚动列，我们需要使用 LazyColumn。LazyColumn 只会渲染屏幕上可见的内容，从而在渲染大型列表时提升效率。

@Composable
fun Greetings(
    modifier: Modifier = Modifier,
    names: List<String> = List(1000){ "R$it" }
) {
    LazyColumn {
        items(items = names) { name->
            Greeting(name = name)
        }
    }
}

• LazyColumn里面需要用 items 来定义每一项的内容。
  效果类似于原生的 RecyclerView。

4. 保留状态
   上面的程序运行时，旋转屏幕后，会触发Activity重新建立，发现状态全部还原为最初始的状态。
   解决方法：remember -> rememberSaveable

val expand = rememberSaveable { mutableStateOf(false) }

参考资料： 谷歌Jetpack Compose 基础知识
https://developer.android.google.cn/codelabs/jetpack-compose-basics?hl=zh-cn#0