Почему поверхность занимает весь экран? ⇐ Android

[Anonymous]

jetpack compose/kotlin newbie здесь
Я сталкиваюсь с очень странной проблемой с размерами в моем приложении, весь мой экран переходит только на одну поверхность, вот мой код:

Код: Выделить всё

package com.example.jettipapp

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.*
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ModifierLocalBeyondBoundsLayout
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.*
import com.example.jettipapp.ui.theme.JetTipAppTheme

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

@Composable
fun App(content: @Composable () -> Unit) {

JetTipAppTheme {
Surface(modifier = Modifier.fillMaxSize()) {
content()
}
}

}

@Composable
fun TopHeader(total: Double = 0.0) {
Surface(modifier = Modifier
.fillMaxWidth()
.height(150.dp)
.clip(RoundedCornerShape(10.dp)),
color = Color(red=233, green=215, blue=247)

) {
Column(
modifier = Modifier.padding(12.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Total Per Person",
color = Color.Black,
fontSize = 25.sp,
fontWeight = FontWeight.Bold
)

Text(
text = "$%.2f".format(total),
fontSize = 40.sp,
fontWeight = FontWeight.ExtraBold
)

}
}

}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
App {
TopHeader()
}
}

Вот фрагмент моего приложения, хотя я определил первую поверхность в Topheader , чтобы иметь высоту всего 150.dp , он все еще занимает весь экран.

Вот предварительный просмотр функции приветствия , и, как видно, первая поверхность в Topeader , которая имеет розовый фон, занимает все экраны, вместо первой поверхности 150 Вот изображение того, что я бы хотел, чтобы приложение выглядело так:

(значения и другие вещи не имеют значения, основной факт, что верхний головщик не имеет значения, наносит не все. /> Кроме того, любые другие улучшения кода будут оценены! < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ire-screen