Jetpack Compose预览与模拟器显示不一致问题求助

我是Kotlin和Jetpack Compose新手，正在跟随官方基础CodeLab教程学习，使用的是最新版Android Studio（Giraffe）。目前遇到的问题是，Android Studio的预览界面和实际运行的视图存在差异，甚至颜色都不一致，差异如下：

我的代码如下：

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()
    }
}

内容的提问来源于stack exchange，提问作者Zin Win Htet