kotlin布局交互

将 wrapContentSize() 方法链接到 Modifier 对象，然后传递 Alignment.Center 作为实参以将组件居中。Alignment.Center 会指定组件同时在水平和垂直方向上居中。

DiceWithButtonAndImage(modifier = Modifier
    .fillMaxSize()
    .wrapContentSize(Alignment.Center)
)

创建垂直布局 在 Compose 中，垂直布局是使用 Column() 函数创建的

请在 Image 和 Button 可组合函数之间添加一个 Spacer 可组合函数。Spacer 接受 Modifier 作为形参。在本例中，Image 在 Button 上方，因此它们之间需要一定的垂直空间。因此，可以设置 Modifier 的高度以应用于 Spacer。尝试将高度设为 16.dp。通常，dp 尺寸以 4.dp 为增量进行更改。

Spacer(modifier = Modifier.height(16.dp))
###

构建掷骰子逻辑

默认情况下，可组合函数是无状态的，这意味着它们不存储值，并且可随时被系统重组，从而导致值被重置。不过，Compose 提供了一种避免这种情况的便捷方式。可组合函数可以使用 remember 可组合函数将对象存储在内存中。

在 remember 可组合函数正文中，传入 mutableStateOf() 函数，然后向该函数传递 1 实参。

mutableStateOf() 函数会返回一个可观察对象。稍后，您会详细了解可观察对象，但目前这基本上意味着，当 result 变量的值变化时，系统会触发重组、反映结果值并刷新界面。
var result by remember { mutableStateOf(1) }

注意：import androidx.compose.runtime.mutableStateOf 和 import androidx.compose.runtime.remember 语句会导入 mutableStateOf() 函数和 remember 可组合函数所需的软件包。

如需导入必要的 State 扩展函数，还需要以下 import 语句：

import androidx.compose.runtime.getValue

import androidx.compose.runtime.setValue

val imageResource = when (result) {
    1 -> R.drawable.dice_1
    2 -> R.drawable.dice_2
    3 -> R.drawable.dice_3
    4 -> R.drawable.dice_4
    5 -> R.drawable.dice_5
    else -> R.drawable.dice_6
}

完整代码

package com.example.diceroller

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.diceroller.ui.theme.DiceRollerTheme

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



@Composable
fun DiceWithButtonAndImage(modifier: Modifier = Modifier){
    var result by remember { mutableStateOf(1) }
    val imageResource = when (result) {
        1 -> R.drawable.dice_1
        2 -> R.drawable.dice_2
        3 -> R.drawable.dice_3
        4 -> R.drawable.dice_4
        5 -> R.drawable.dice_5
        else -> R.drawable.dice_6
    }
    Column (
        modifier = modifier,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(painterResource(imageResource),
            contentDescription = result.toString())
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { result = (1..6).random() }) {
            Text(stringResource(R.string.roll))
        }
    }
}

@Composable
@Preview
fun DiceRollerApp(){
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        .wrapContentSize(Alignment.Center)
    )
}