[英]Jetpack Compose: Managing Shared UI State
typealias Actions = @Composable () -> Unit
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SampleAppTheme {
var currentScreen by remember { mutableStateOf(Screen.A) }
var title by remember { mutableStateOf("Screen A") }
var action by remember { mutableStateOf<Actions>({}) }
Scaffold(
topBar = {
TopAppBar(
title = {
Text(title)
},
actions = {
action()
}
)
}
) {
Crossfade(current = currentScreen) { screen ->
when (screen) {
Screen.A -> {
MyScreen(
name = "A",
buttonName = "to Screen B",
onNext = {
currentScreen = Screen.B
title = "Screen B"
action = {
IconButton(onClick = {}) {
Icon(asset = Icons.Sharp.Home)
}
}
}
)
}
Screen.B -> {
MyScreen(
name = "B",
buttonName = "to Screen C",
onNext = {
currentScreen = Screen.C
title = "Screen B"
action = {
IconButton(onClick = {}) {
Icon(asset = Icons.Sharp.Close)
}
}
}
)
}
Screen.C -> {
MyScreen(
name = "C",
buttonName = "to Screen A",
onNext = {
currentScreen = Screen.A
title = "Screen A"
action = {}
}
)
}
}
}
}
}
}
}
}
enum class Screen {
A, B, C
}
@Composable
fun MyScreen(
name: String,
buttonName: String,
onNext: () -> Unit,
) {
Column(
Modifier.fillMaxSize().padding(24.dp),
) {
Text(
modifier = Modifier.weight(1f),
text = "I am in screen $name!",
textAlign = TextAlign.Center,
style = MaterialTheme.typography.h3
)
Button(
modifier = Modifier.fillMaxWidth(),
onClick = onNext
) {
Text(text = buttonName)
}
}
}
So with this code I have the following screen:因此,使用此代码,我有以下屏幕:
Notice that I am able to change the Actions
in the TopAppBar
, depending on the Current Screen by doing:请注意,我可以通过执行以下Actions
根据当前屏幕更改TopAppBar
的Actions
:
MyScreen(
name = "B",
buttonName = "to Screen C",
onNext = {
currentScreen = Screen.C
title = "Screen B"
// This right here!!!! -------------------
action = {
IconButton(onClick = {}) {
Icon(asset = Icons.Sharp.Close)
}
}
// This right here!!!! -------------------
}
)
My first question is whether this is a correct way to this?我的第一个问题是这是否是正确的方法?
For the second question, I kinda feel the values I am setting in the previous screen should instead be the responsibility of the current screen instead.对于第二个问题,我觉得我在上一个屏幕中设置的值应该由当前屏幕负责。 so I tried doing this instead?所以我尝试这样做?
Screen.B -> { // This right here!!!! ------------------- onActive { title = "Screen B" action = { IconButton(onClick = {}) { Icon(asset = Icons.Sharp.Home) } } } // This right here!!!! ------------------- MyScreen( name = "B", buttonName = "to Screen C", onNext = { currentScreen = Screen.C } ) }
So now, the responsibility of setting up the state is on the current screen and not the screen before it like before.所以现在,设置状态的责任是在当前屏幕上,而不是像以前一样在它之前的屏幕上。
Is this better?这是否更好?
After some testing: Apparently moving from Screen A -> Screen B -> Screen C makes it that onActive { }
gets called the wrong order.经过一些测试:显然从屏幕 A -> 屏幕 B -> 屏幕 C 移动使得onActive { }
被称为错误的顺序。 So there are states where Screen B have Screen A as its title... Screen C have Screen B as its title and so on...所以在某些状态下,屏幕 B 将屏幕 A 作为其标题...屏幕 C 将屏幕 B 作为其标题,依此类推...
Just realize even the first approach has flaws as you also have to set the state when going back to a screen.. lets say when doing... Screen A -> Screen B -> Screen C -> press back (Screen B)... Now the state is wrong...只是要意识到即使第一种方法也有缺陷,因为您还必须在返回屏幕时设置状态..让我们说在做...屏幕 A -> 屏幕 B -> 屏幕 C -> 按回(屏幕 B)。 ..现在状态不对...
I guess this problem could be solved using Jetpack Navigation for Compose.我想这个问题可以使用 Jetpack Navigation for Compose 来解决。
https://developer.android.com/jetpack/compose/navigation https://developer.android.com/jetpack/compose/navigation
Maybe this post help you out...或许这篇文章能帮到你...
https://afzaln.com/intro-to-jetpack-compose-navigation/ https://afzaln.com/intro-to-jetpack-compose-navigation/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.