如何在Flutter中实现可自定义取值范围的随机数生成器

实现思路 #

整体逻辑分为「用户输入接收」→「输入合法性校验」→「随机数生成」→「弹窗展示结果」四个核心环节，以下用当前主流的Jetpack Compose框架给出可直接复用的实现，传统XML View实现思路会在最后补充。

核心代码实现 #

1. 页面布局与交互逻辑 #

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import kotlin.random.Random

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun RandomGeneratorScreen() {
    // 存储输入的最小值、最大值
    var minInput by remember { mutableStateOf("") }
    var maxInput by remember { mutableStateOf("") }
    // 控制结果弹窗显隐
    var showResultDialog by remember { mutableStateOf(false) }
    // 存储生成的随机数结果
    var randomResult by remember { mutableStateOf(0) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        // 最小值输入框
        TextField(
            value = minInput,
            onValueChange = { minInput = it },
            label = { Text("随机数最小值") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )
        // 最大值输入框
        TextField(
            value = maxInput,
            onValueChange = { maxInput = it },
            label = { Text("随机数最大值") },
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
            modifier = Modifier.fillMaxWidth()
        )
        // 生成按钮
        Button(
            onClick = {
                // 输入合法性校验
                val min = minInput.toIntOrNull()
                val max = maxInput.toIntOrNull()
                if (min == null || max == null) {
                    // 可自行替换为Toast提示输入不能为空
                    return@Button
                }
                if (max <= min) {
                    // 可自行替换为Toast提示最大值必须大于最小值
                    return@Button
                }
                // 生成闭区间[min, max]的随机数
                randomResult = Random.nextInt(min, max + 1)
                showResultDialog = true
            },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("生成随机数")
        }
    }

    // 结果展示弹窗
    if (showResultDialog) {
        AlertDialog(
            onDismissRequest = { showResultDialog = false },
            title = { Text("随机数生成结果") },
            text = { Text("生成的随机数为：$randomResult") },
            confirmButton = {
                Button(onClick = { showResultDialog = false }) {
                    Text("确认")
                }
            }
        )
    }
}

2. 自定义弹窗样式调整 #

如果需要自定义AlertDialog的样式，可以直接修改AlertDialog组件的containerColor、titleContentColor等参数，也可以完全自定义text参数内的布局，添加图标、动画等元素。

传统XML View实现思路 #

如果项目还在用XML布局开发，实现逻辑和上面一致，仅UI实现方式不同：

• 布局文件中添加两个EditText控件，设置android:inputType="number"限制仅输入数字
• 布局中添加按钮，设置点击监听
• 点击后取两个EditText的输入内容做合法性校验，生成随机数
• 用androidx.appcompat.app.AlertDialog.Builder构建弹窗展示结果即可

内容的提问来源于stack exchange，提问作者bayrixx