Jetpack撰写的方向

问题描述

Jetpack Compose中是否有任何Orientation helpers类，例如Flutter具有https://flutter.dev/docs/cookbook/design/orientation？ 我需要知道何时更改了方向才能正确调整我的布局。

解决方法

我们可以使用ConfigurationAmbient听取方向变化

@Composable
fun ConfigChangeExample() {
    val configuration = ConfigurationAmbient.current
    when (configuration.orientation) {
        Configuration.ORIENTATION_LANDSCAPE -> {
            Text("Landscape")
        }
        else -> {
            Text("Portrait")
        }
    }
}

注意：这将无助于侦听配置更改，只会帮助获取当前配置。

,

我们可以在 jectpack compose 中使用 state，以便在状态改变时可组合物重新组合自身。

使用 configuration change 收听 state 的示例如下：-

@Composable
fun ShowConfig(config: String) {
   Text(text = "$config!")
}

保持 config state 处于活动状态：-

var state by mutableStateOf("Potrait")

然后侦听活动中的配置更改，在配置时只需按如下值更新状态：-

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
        state = "Landscape" // this will automatically change the text to landscape
    } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
        state = "Potrait"   // this will automatically change the text to potrait
    }
}

每当配置字符串的状态发生变化时，Greeting 组合项都会观察配置字符串的状态。

,

为了观察方向，我们可以创建一个快照流来观察方向的变化，该变化提供给您可以直接使用的状态变量。

var orientation by remember { mutableStateOf(Configuration.ORIENTATION_PORTRAIT) }

val configuration = LocalConfiguration.current

// If our configuration changes then this will launch a new coroutine scope for it
LaunchedEffect(configuration) {
    // Save any changes to the orientation value on the configuration object
    snapshotFlow { configuration.orientation }
        .collect { orientation = it }
}

when (orientation) {
    Configuration.ORIENTATION_LANDSCAPE -> {
        LandscapeContent()
    }
    else -> {
        PortraitContent()
    }
}