Kotlin Compose添加第二行布局无显示问题求助

完成Android官方四象限布局练习后，我在第一个Row组件后添加了第二个Row，想实现两行布局，但预览界面完全没变化。相关代码和预览截图如下：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
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.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme.colorScheme
import androidx.compose.material3.Surface
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.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.nynacs.steambadger.R

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeBasicsTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = colorScheme.background
                ) {
                    ComposeScreen2()
                }
            }
        }
    }
}

@Composable
fun ComposeScreen2() {
    Row(
        Modifier.fillMaxSize(1f)
    ) {
        Column(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = stringResource(R.string.text_comp),
                description = stringResource(R.string.text_comp_explained),
                _color = 0xFFEADDFF,
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.image_comp),
                description = stringResource(R.string.image_comp_explained),
                _color = 0xFFD0BCFF,
                modifier = Modifier.weight(1f)
            )
        }

        Column(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = stringResource(R.string.row_comp),
                description = stringResource(R.string.row_comp_explained),
                _color = 0xFFB69DF8,
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.col_comp),
                description = stringResource(R.string.col_comp_explained),
                _color = 0xFFF6EDFF,
                modifier = Modifier.weight(1f)
            )
        }
    }

    // 添加的第二个Row，预览不显示
    Row(
        Modifier.fillMaxSize(1f)
    ) {
        Column(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = stringResource(R.string.text_comp),
                description = stringResource(R.string.text_comp_explained),
                _color = 0xFFEADDFF,
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.image_comp),
                description = stringResource(R.string.image_comp_explained),
                _color = 0xFFD0BCFF,
                modifier = Modifier.weight(1f)
            )
        }
        Column(Modifier.weight(1f)) {
            ComposableInfoCard(
                title = stringResource(R.string.row_comp),
                description = stringResource(R.string.row_comp_explained),
                _color = 0xFFB69DF8,
                modifier = Modifier.weight(1f)
            )
            ComposableInfoCard(
                title = stringResource(R.string.col_comp),
                description = stringResource(R.string.col_comp_explained),
                _color = 0xFFF6EDFF,
                modifier = Modifier.weight(1f)
            )
        }
    }
}

@Composable
fun ComposableInfoCard(title: String, description: String, _color: Long, modifier: Modifier) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .background(Color(_color))
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    )
    {
        Text(
            text = title,
            textAlign = TextAlign.Justify,
        )
        Text(
            text = description,
            textAlign = TextAlign.Justify,
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    ComposeBasicsTheme {
        ComposeScreen2()
    }
}

1. Composable渲染规则限制：在@Composable函数中直接并列多个布局组件时，只会渲染最后一个组件。你在ComposeScreen2里写了两个Row，第一个Row的代码虽然执行了，但最终只会显示第二个Row的内容。
2. 尺寸覆盖问题：第一个Row使用Modifier.fillMaxSize(1f)占满了整个屏幕空间，就算第二个Row能渲染，也会被第一个完全遮挡。

把两个Row用Column容器包裹，让它们垂直排列，同时调整每个Row的尺寸，避免占满整个屏幕：

@Composable
fun ComposeScreen2() {
    // 用Column作为根容器，垂直排列两个Row
    Column(Modifier.fillMaxSize()) {
        Row(
            // 每个Row平分屏幕高度
            Modifier.weight(1f)
        ) {
            Column(Modifier.weight(1f)) {
                ComposableInfoCard(
                    title = stringResource(R.string.text_comp),
                    description = stringResource(R.string.text_comp_explained),
                    _color = 0xFFEADDFF,
                    modifier = Modifier.weight(1f)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.image_comp),
                    description = stringResource(R.string.image_comp_explained),
                    _color = 0xFFD0BCFF,
                    modifier = Modifier.weight(1f)
                )
            }

            Column(Modifier.weight(1f)) {
                ComposableInfoCard(
                    title = stringResource(R.string.row_comp),
                    description = stringResource(R.string.row_comp_explained),
                    _color = 0xFFB69DF8,
                    modifier = Modifier.weight(1f)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.col_comp),
                    description = stringResource(R.string.col_comp_explained),
                    _color = 0xFFF6EDFF,
                    modifier = Modifier.weight(1f)
                )
            }
        }

        // 第二个Row
        Row(
            Modifier.weight(1f)
        ) {
            Column(Modifier.weight(1f)) {
                ComposableInfoCard(
                    title = stringResource(R.string.text_comp),
                    description = stringResource(R.string.text_comp_explained),
                    _color = 0xFFEADDFF,
                    modifier = Modifier.weight(1f)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.image_comp),
                    description = stringResource(R.string.image_comp_explained),
                    _color = 0xFFD0BCFF,
                    modifier = Modifier.weight(1f)
                )
            }
            Column(Modifier.weight(1f)) {
                ComposableInfoCard(
                    title = stringResource(R.string.row_comp),
                    description = stringResource(R.string.row_comp_explained),
                    _color = 0xFFB69DF8,
                    modifier = Modifier.weight(1f)
                )
                ComposableInfoCard(
                    title = stringResource(R.string.col_comp),
                    description = stringResource(R.string.col_comp_explained),
                    _color = 0xFFF6EDFF,
                    modifier = Modifier.weight(1f)
                )
            }
        }
    }
}

关键修改说明 #

• 新增Column作为ComposeScreen2的根容器，确保两个Row能垂直排列展示。
• 将每个Row的Modifier.fillMaxSize(1f)替换为Modifier.weight(1f)，让两个Row平分屏幕高度，避免互相遮挡。

内容的提问来源于stack exchange，提问作者D.Zou