Jetpack Compose 预览和模拟器不一样。

huangapple go评论92阅读模式
英文:

Jetpack Compose Preview and emulator not the same

问题

I'm new to Kotlin and Jetpack Compose. I'm following this Basic CodeLab. And I'm using the latest Android Studio (Giraffe). Unlike the tutorial, the Preview from Android Studio and actual running views are not the same (even the color). Here is the difference.

我的代码是:

  1. import android.os.Bundle
  2. import android.util.Log
  3. import androidx.activity.ComponentActivity
  4. import androidx.activity.compose.setContent
  5. import androidx.compose.foundation.layout.*
  6. import androidx.compose.material3.*
  7. import androidx.compose.runtime.Composable
  8. import androidx.compose.runtime.mutableStateOf
  9. import androidx.compose.runtime.remember
  10. import androidx.compose.ui.Alignment
  11. import androidx.compose.ui.Modifier
  12. import androidx.compose.ui.graphics.Color
  13. import androidx.compose.ui.tooling.preview.Preview
  14. import androidx.compose.ui.unit.dp
  15. import com.zwin.codelab_jpcbasic.ui.theme.CodeLabJPCBasicTheme
  16. class MainActivity : ComponentActivity() {
  17. override fun onCreate(savedInstanceState: Bundle?) {
  18. super.onCreate(savedInstanceState)
  19. setContent {
  20. CodeLabJPCBasicTheme {
  21. // A surface container using the 'background' color from the theme
  22. Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
  23. Greeting("Android")
  24. }
  25. }
  26. }
  27. }
  28. }
  29. @Composable
  30. fun MyApp(names: List<String> = listOf("World", "Compose")) {
  31. Surface(color = MaterialTheme.colorScheme.background) {
  32. Column(modifier = Modifier.padding(vertical = 4.dp), verticalArrangement = Arrangement.Top) {
  33. for (name in names) {
  34. Greeting(name = name)
  35. }
  36. }
  37. }
  38. }
  39. @Composable
  40. fun Greeting(name: String) {
  41. var expanded = remember { mutableStateOf(false) }
  42. Surface(color = MaterialTheme.colorScheme.primary,
  43. modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)) {
  44. Row(modifier = Modifier.padding(24.dp)) {
  45. Column(modifier = Modifier
  46. .weight(1f)) {
  47. Text("Hello,")
  48. Text("$name")
  49. }
  50. OutlinedButton(onClick = {
  51. expanded.value = expanded.value.not()
  52. }) {
  53. Text(if (expanded.value) "Show more" else "Show less", color = Color.White)
  54. }
  55. }
  56. }
  57. }
  58. @Preview(showBackground = true, widthDp = 320, heightDp = 800)
  59. @Composable
  60. fun GreetingPreview() {
  61. CodeLabJPCBasicTheme {
  62. MyApp()
  63. }
  64. }
英文:

I'm new to kotlin and Jetpack Compose. I'm following this Basic CodeLab . And I'm using latest android studio (Giraffe). Unlike the tutorial, the Preview from Android Studio and actual running views are not the same (even the color). Here is the difference.

Jetpack Compose 预览和模拟器不一样。

My code is ..

  1. import android.os.Bundle
  2. import android.util.Log
  3. import androidx.activity.ComponentActivity
  4. import androidx.activity.compose.setContent
  5. import androidx.compose.foundation.layout.*
  6. import androidx.compose.material3.*
  7. import androidx.compose.runtime.Composable
  8. import androidx.compose.runtime.mutableStateOf
  9. import androidx.compose.runtime.remember
  10. import androidx.compose.ui.Alignment
  11. import androidx.compose.ui.Modifier
  12. import androidx.compose.ui.graphics.Color
  13. import androidx.compose.ui.tooling.preview.Preview
  14. import androidx.compose.ui.unit.dp
  15. import com.zwin.codelab_jpcbasic.ui.theme.CodeLabJPCBasicTheme
  16. class MainActivity : ComponentActivity() {
  17. override fun onCreate(savedInstanceState: Bundle?) {
  18. super.onCreate(savedInstanceState)
  19. setContent {
  20. CodeLabJPCBasicTheme {
  21. // A surface container using the &#39;background&#39; color from the theme
  22. Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
  23. Greeting(&quot;Android&quot;)
  24. }
  25. }
  26. }
  27. }
  28. }
  29. @Composable
  30. fun MyApp(names: List&lt;String&gt; = listOf(&quot;World&quot;, &quot;Compose&quot;)) {
  31. Surface(color = MaterialTheme.colorScheme.background) {
  32. Column(modifier = Modifier.padding(vertical = 4.dp), verticalArrangement = Arrangement.Top) {
  33. for (name in names) {
  34. Greeting(name = name)
  35. }
  36. }
  37. }
  38. }
  39. @Composable
  40. fun Greeting(name: String) {
  41. var expanded = remember {mutableStateOf(false) }
  42. Surface(color = MaterialTheme.colorScheme.primary,
  43. modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)) {
  44. Row(modifier = Modifier.padding(24.dp)) {
  45. Column(modifier = Modifier
  46. .weight(1f)) {
  47. Text(&quot;Hello,&quot;)
  48. Text(&quot;$name&quot;)
  49. }
  50. OutlinedButton(onClick = {
  51. expanded.value = expanded.value.not()
  52. }) {
  53. Text(if(expanded.value) &quot;Show more&quot; else &quot;Show less&quot;, color = Color.White)
  54. }
  55. }
  56. }
  57. }
  58. @Preview(showBackground = true, widthDp = 320, heightDp = 800)
  59. @Composable
  60. fun GreetingPreview() {
  61. CodeLabJPCBasicTheme {
  62. MyApp()
  63. }
  64. }

答案1

得分: 0

因为在onCreate中你使用了Greeting组件,但在GreetingPreview中你使用了MyApp组件。这是两个不同的组件。这就是为什么预览和模拟器不匹配的原因。简而言之,你必须像教程中所示在onCreate中使用MyApp组件。

英文:

Because inside onCreate you are use Greeting composable but inside GreetingPreview you are use MyApp composable. Which is different composable. That is why the preview and emulator not match. In short, you have to use MyApp inside onCreate as shown in the tutorial.

huangapple
  • 本文由 发表于 2023年8月4日 02:37:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76830811.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定