Как сделать так, чтобы кнопка не занимала все место и выровнять ее в макете ⇐ Android

[Anonymous]

Я хочу использовать Composable и сделать четыре кнопки.
Это код.

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

package com.example.captaingame

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.captaingame.ui.theme.CaptainGameTheme
import kotlin.random.Random

class MainActivity : ComponentActivity() {
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
CaptainGameTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
CaptainGame()
}
}
}
}
}

@Composable
fun CaptainGame() {
val treasuresFound = remember { mutableStateOf(0) }
val direction = remember { mutableStateOf("North") }

Column {
Text("Treasures Found: ${treasuresFound.value}")
Text("Current Direction: ${direction.value}")

Button(onClick = {
direction.value = "East"
if (Random.nextBoolean()) {
treasuresFound.value++
}
}) {
Text("Sail East")
}
}

Button(onClick = {
direction.value = "West"
if (Random.nextBoolean()) {
treasuresFound.value++
}
}) {
Text("Sail West")
}

Button(onClick = {
direction.value = "North"
if (Random.nextBoolean()) {
treasuresFound.value++
}
}) {
Text("Sail NOrth")
}

Button(onClick = {
direction.value = "South"
if(Random.nextBoolean()){
treasuresFound.value++
}
}){
Text("Sail South")
}
}

@Preview(showBackground = true)
@Composable
fun CaptainGamePreview() {
CaptainGameTheme {
CaptainGame()
}
}

Однако я получаю такой результат:
[img]https: //i.sstatic.net/8MGHo1HTm.png[/img]

Почему это происходит и как правильно выровнять кнопку?

Подробнее здесь: https://stackoverflow.com/questions/791 ... n-a-layout