Flutter与Dart开发：生成6个不重复随机数APP的显示及刷新问题

核心实现思路 #

• 用StatefulWidget管理页面状态，因为需要动态更新UI内容
• 将随机数生成逻辑封装为独立方法，方便按钮点击时调用
• 通过setState()触发UI刷新，展示新生成的随机数

完整代码示例 #

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '随机数生成器',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const RandomNumberScreen(),
    );
  }
}

class RandomNumberScreen extends StatefulWidget {
  const RandomNumberScreen({super.key});

  @override
  State<RandomNumberScreen> createState() => _RandomNumberScreenState();
}

class _RandomNumberScreenState extends State<RandomNumberScreen> {
  List<int> _randomNumbers = [];

  // 页面初始化时生成第一组随机数
  @override
  void initState() {
    super.initState();
    _generateRandomNumbers();
  }

  // 生成6个0-49之间的不重复随机数
  void _generateRandomNumbers() {
    final random = Random();
    Set<int> numberSet = {};

    // 利用Set自动去重的特性，比List.contains()效率更高
    while (numberSet.length < 6) {
      numberSet.add(random.nextInt(50));
    }

    setState(() {
      _randomNumbers = numberSet.toList();
      // 可选：对随机数排序，让显示更整齐
      _randomNumbers.sort();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('6位不重复随机数生成器')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 展示随机数的Text组件
            Text(
              _randomNumbers.join(' '),
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 30),
            // 刷新随机数的按钮
            ElevatedButton(
              onPressed: _generateRandomNumbers,
              child: const Text('刷新随机数'),
            ),
          ],
        ),
      ),
    );
  }
}

关键细节说明 #

• 状态管理：必须使用StatefulWidget，因为需要动态更新UI内容，setState()会通知Flutter框架重新构建组件，从而展示新的随机数
• 去重优化：改用Set存储随机数，避免了每次生成都调用List.contains()做重复判断，效率更高
• 初始化处理：在initState()中调用生成方法，确保页面加载完成后立刻显示随机数
• UI布局：通过Column和Center让内容居中显示，SizedBox控制按钮与文本的间距，提升视觉体验

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