Android Studio中Compose布局渲染异常：代码编译正常但预览不显示

我正在完成Android官方Kotlin Compose组件练习任务，目标是实现一个四象限布局界面。代码编译无错误，但无法在Design View中渲染。我怀疑问题和Color函数中的十六进制值转整数有关，直接传入十六进制值会触发“需要整数类型”的错误。

我的代码如下：

package com.example.composequadrant

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composequadrant.ui.theme.ComposeQuadrantTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeQuadrantTheme {
                Quadrant(
                    modifier = Modifier
                )
            }
        }
    }
}

@Composable
fun Quadrant(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
    ) {
        Row(
            modifier = modifier
        ) {
            Card("0xFFEADDFF",stringResource(R.string.H1),stringResource(R.string.T1), modifier = modifier)
            Card("0xFFD0BCFF",stringResource(R.string.H2),stringResource(R.string.T2), modifier = modifier)
        }
        Row(
            modifier = modifier
        ) {
            Card("0xFFB69DF8",stringResource(R.string.H4),stringResource(R.string.T3), modifier = modifier)
            Card("0xFFF6EDFF",stringResource(R.string.H4),stringResource(R.string.T4), modifier = modifier)
        }
    }
}

@Composable
fun Card(bgcolor: String, h: String, t: String, modifier: Modifier){
    val intColor = Integer.parseInt(bgcolor)
    Column (
        modifier = modifier
            .background(Color(intColor))
            .width(LocalConfiguration.current.screenWidthDp.dp/2)
            .height(LocalConfiguration.current.screenHeightDp.dp/2)
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center

    ){
        Text(
            text = h,
            fontWeight = FontWeight.Bold,
            modifier = modifier
                .padding(bottom = 16.dp)
        )
        Text(
            text = t,
            modifier = modifier
        )
    }
}

@Preview(showBackground = true)
@Composable
fun QuadrantPreview() {
    ComposeQuadrantTheme {
        Quadrant()
    }
}

你的代码存在三个核心问题，导致Design View无法正常渲染，逐一修正即可：

1. 十六进制颜色转换逻辑错误
   Integer.parseInt("0xFFEADDFF")会抛出运行时异常，因为默认解析模式是十进制，无法识别0x前缀的十六进制字符串。如果要保留字符串传参的方式，需要修改为：

   val intColor = Integer.parseInt(bgcolor.removePrefix("0x"), 16)
   

   更推荐的做法是直接使用Compose支持的十六进制整数字面量，比如Color(0xFFEADDFF)，不需要通过字符串中转，避免转换错误。

2. Modifier参数滥用导致布局冲突
   你将根Modifier直接传递给所有子组件（Row、Card、Text），这会导致布局约束混乱。正确的做法是：父组件的Modifier仅用于自身，子组件使用独立的Modifier或基于传入的Modifier扩展，不要直接复用根Modifier。

3. 屏幕尺寸获取方式不适配预览
   用LocalConfiguration获取屏幕宽高来固定Card尺寸，会导致预览无法计算正确布局，且适配性差。推荐使用weight(1f)让Card平分Row空间，配合fillMaxSize()、fillMaxHeight()实现自适应布局。

package com.example.composequadrant

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.weight
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composequadrant.ui.theme.ComposeQuadrantTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeQuadrantTheme {
                Quadrant()
            }
        }
    }
}

@Composable
fun Quadrant(modifier: Modifier = Modifier) {
    Column(modifier = modifier.fillMaxSize()) {
        Row(modifier = Modifier.weight(1f)) {
            Card(
                bgColor = Color(0xFFEADDFF),
                title = stringResource(R.string.H1),
                description = stringResource(R.string.T1),
                modifier = Modifier.weight(1f)
            )
            Card(
                bgColor = Color(0xFFD0BCFF),
                title = stringResource(R.string.H2),
                description = stringResource(R.string.T2),
                modifier = Modifier.weight(1f)
            )
        }
        Row(modifier = Modifier.weight(1f)) {
            Card(
                bgColor = Color(0xFFB69DF8),
                title = stringResource(R.string.H4),
                description = stringResource(R.string.T3),
                modifier = Modifier.weight(1f)
            )
            Card(
                bgColor = Color(0xFFF6EDFF),
                title = stringResource(R.string.H4),
                description = stringResource(R.string.T4),
                modifier = Modifier.weight(1f)
            )
        }
    }
}

@Composable
fun Card(
    bgColor: Color,
    title: String,
    description: String,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
            .background(bgColor)
            .fillMaxHeight()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = title,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Text(text = description)
    }
}

@Preview(showBackground = true)
@Composable
fun QuadrantPreview() {
    ComposeQuadrantTheme {
        Quadrant()
    }
}

内容的提问来源于stack exchange，提问作者Ashish Khandelwal