Jetpack Compose

mutableStateOf

androidx.compose.runtime.mutableStateOf

Return a new MutableState initialized with the passed in value
The MutableState class is a single value holder whose reads and writes are observed by Compose. Additionally, writes to it are transacted as part of the Snapshot system.
返回一个用传入值初始化的新 MutableState。MutableState 类是一个单值持有器，其读取和写入由 Compose 观察。此外，对它们的写入被视为 Snapshot 系统的事务。

val i = mutableStateOf(0)
i.value ++

相当于 React 中的 useRef .
可以使用属性委托减少代码量, 隐式访问 getValue/setValue:

var i by mutableStateOf(0)
Button({
    i++
}) {
    Text("Button: $i")
}

remember

androidx.compose.runtime.remember

Remember the value produced by calculation. calculation will only be evaluated during the composition. Recomposition will always return the value produced by composition.
记住计算产生的值。计算只会在组合过程中被评估。重组将始终返回组合产生的值。

val i = remember {
    mutableStateOf(0)
}
i.value ++

相当于 React 中的 useState .
使用属性委托:

var i by remember {
    mutableStateOf(0)
}
i ++

rememberSaveable

androidx.compose.runtime.saveable.rememberSaveable

Remember the value produced by init.
It behaves similarly to remember, but the stored value will survive the activity or process recreation using the saved instance state mechanism (for example it happens when the screen is rotated in the Android application).
记住由 init 生成的值。
它类似于 remember，但使用的存储值将在使用保存实例状态机制 (例如在 Android 应用程序中旋转屏幕时) 重新创建活动或进程时幸存下来 (例如在旋转屏幕时会发生这种情况)。

@Composable
@Preview
fun UI() {
    val state = rememberScrollState()
    Column(modifier = Modifier
        .fillMaxWidth(1f)
        .verticalScroll(state)) {
        (1..200 step 1).map {
            val i = rememberSaveable {
                mutableStateOf(0)
            }
            Button(onClick = {
                i.value ++
            }, modifier = Modifier.fillMaxWidth(1f)) {
                Text("Button: $it  clicked: ${i.value}")
            }
        }
    }
}

Column

Column 垂直排列元素

Modifier.verticalScroll

可令屏幕垂直滚动

@Composable
@Preview
fun UI() {
    val state = rememberScrollState()
    Column(modifier = Modifier
        .fillMaxWidth(1f)
        .verticalScroll(state)) {
        (1..200 step 1).map {
            Log.d("MY_TEST", "onCreate - $it")
            Button(onClick = {
                Log.d("MY_TEST", "onClick - $it")
            }, modifier = Modifier.fillMaxWidth(1f)) {
                Text("$it")
            }
        }
    }
}

水平居中/垂直居中

分别由 Alignment 和 Arrangement 控制。
其中 Alignment 对 horizontalAlignment 的有效值为：Start、CenterHorizontally、End 等；
Arrangement 对 verticalArrangement 的有效值为：SpaceBetween、SpaceEvenly、SpaceAround、Center 等。

@Composable
@Preview
fun UI() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
        verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center,
    ) {
        (1..2 step 1).map {
            val i = rememberSaveable {
                mutableStateOf(0)
            }
            Button(onClick = {
                i.value ++
            }, modifier = Modifier) {
                Text("Button: $it  clicked: ${i.value}")
            }
        }
    }
}

Column 嵌套 Column

@Composable
@Preview
fun UI() {
    Column(
        modifier = Modifier.fillMaxSize(),
    ) {
        repeat(2) { a ->
            val state = rememberScrollState()
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight((a + 1) *.5f) // 0.5 1 的比列平分上下屏幕
                    .verticalScroll(state),
                horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
                verticalArrangement = androidx.compose.foundation.layout.Arrangement.Center,
            ) {
                repeat(3) { b ->
                    var i by rememberSaveable {
                        mutableStateOf(0)
                    }
                    Button({
                        i++
                    }) {
                        Text("Button $a-$b, clicked: $i")
                    }
                }
            }
        }
    }
}

组件教程

https://developer.android.com/jetpack?hl=zh-cn
https://www.tutorialkart.com/android-jetpack-compose/