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

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

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.

我的代码是:

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.zwin.codelab_jpcbasic.ui.theme.CodeLabJPCBasicTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodeLabJPCBasicTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun MyApp(names: List<String> = listOf("World", "Compose")) {
    Surface(color = MaterialTheme.colorScheme.background) {
        Column(modifier = Modifier.padding(vertical = 4.dp), verticalArrangement = Arrangement.Top) {
            for (name in names) {
                Greeting(name = name)
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    var expanded = remember { mutableStateOf(false) }
    Surface(color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier
                .weight(1f)) {
                Text("Hello,")
                Text("$name")
            }
            OutlinedButton(onClick = {
                expanded.value = expanded.value.not()
            }) {
                Text(if (expanded.value) "Show more" else "Show less", color = Color.White)
            }
        }
    }
}

@Preview(showBackground = true, widthDp = 320, heightDp = 800)
@Composable
fun GreetingPreview() {
    CodeLabJPCBasicTheme {
        MyApp()
    }
}
英文:

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 ..

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.zwin.codelab_jpcbasic.ui.theme.CodeLabJPCBasicTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodeLabJPCBasicTheme {
                // A surface container using the &#39;background&#39; color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Greeting(&quot;Android&quot;)
                }
            }
        }
    }
}

@Composable
fun MyApp(names: List&lt;String&gt; = listOf(&quot;World&quot;, &quot;Compose&quot;)) {
    Surface(color = MaterialTheme.colorScheme.background) {
        Column(modifier = Modifier.padding(vertical = 4.dp), verticalArrangement = Arrangement.Top) {
            for (name in names) {
                Greeting(name = name)
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    var expanded = remember {mutableStateOf(false) }
    Surface(color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp)) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier
                .weight(1f)) {
                Text(&quot;Hello,&quot;)
                Text(&quot;$name&quot;)
            }
            OutlinedButton(onClick = {
                expanded.value = expanded.value.not()
            }) {
                Text(if(expanded.value) &quot;Show more&quot; else &quot;Show less&quot;, color = Color.White)
            }
        }
    }
}


@Preview(showBackground = true, widthDp = 320, heightDp = 800)
@Composable
fun GreetingPreview() {
    CodeLabJPCBasicTheme {
        MyApp()
    }
}

答案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:

确定