问题[android-jetpack-compose]

import ...

data class ArtInfo(
    val artId: Int,
    val drawableRes: Int,
    val title: String,
    val author: String,
    val year: Int,
)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeTheme {
                Surface(
                    modifier = Modifier
                        .statusBarsPadding()
                        .navigationBarsPadding()
                        .fillMaxSize(),
                    color = MaterialTheme.colorScheme.onPrimary
                ) {
                    ArtSpaceApp()
                }
            }
        }
    }
}

@Composable
fun ArtSpaceApp(modifier: Modifier = Modifier) {
    val arts = listOf(
        ...
    )

    var artState by remember {
        mutableStateOf(arts[0])
    }

    fun navigateToNextArt() {
        ...
    }

    fun navigateToPreviousArt() {
        ...
    }

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(horizontal = 24.dp),
        verticalArrangement = Arrangement.SpaceBetween,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Spacer(modifier = Modifier.height(20.dp))
        Art(imageResource = artState.drawableRes)
        Spacer(modifier = Modifier.height(60.dp))
        AboutArt(
            title = artState.title,
            author = artState.author,
            year = artState.year
        )
        NavigationArts(
            { navigateToNextArt() },
            { navigateToPreviousArt() }
        )
    }
}

@Composable
fun Art(@DrawableRes imageResource: Int) {
    Surface(
        modifier = Modifier
            .border(width = 32.dp, color = Color.White)
            .shadow(elevation = 16.dp),
        ) {
        Image(
            painter = painterResource(id = imageResource),
            contentDescription = null
        )
    }
}

@Composable
fun AboutArt(
    modifier: Modifier = Modifier
        .background(color = colorResource(id = R.color.background_about_art)),
    title: String,
    author: String,
    year: Int,
) {
    Surface(
        modifier = modifier
            .padding(16.dp)
    ) {
        Column(
            modifier = modifier
                .fillMaxWidth()
        ) {
            Text(
                text = title,
                fontSize = 24.sp,
                fontWeight = FontWeight.W300,
            )

            Row {
                Text(
                    text = author,
                    fontWeight = FontWeight.W800
                )

                Text(
                    text = " ($year)"
                )
            }
        }
    }
}

@Composable
fun NavigationArts(
    navigateToNext: () -> Unit,
    navigateToPrevious: () -> Unit,
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 8.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Button(onClick = ... }) {
            Text(text = "Previous")
        }

        Button(onClick = ... }) {
            Text(text = "Next")
        }
    }
}

问题是 Art(...) - 图像占据了所有垂直空间，没有为 AboutArt(...) - 图像描述和 NavigationArts(...) - 图像之间的导航按钮留下空间。