Flutter如何为Stack内多个按钮传递不同的随机参数

问题根源 #

你当前代码存在两个核心问题：

• 在build方法顶层仅计算了一次位置、尺寸、颜色参数，Stack内所有按钮都复用这同一组变量，必然出现位置重叠、样式一致的情况
• 每次生成随机数都新建Random实例，短时间内创建的多个无种子Random实例会基于接近的时间戳生成高度相似甚至完全相同的随机序列，进一步导致参数重复

修复步骤 #

1. 定义配置类封装单个按钮的所有独立参数，每个按钮持有专属的配置实例
2. 全局复用同一个Random实例生成随机值，避免重复实例化导致的随机数失效
3. 按需要的按钮数量批量生成独立配置，每个按钮读取自己的配置渲染
4. 点击刷新时只更新对应按钮的配置，或按需求刷新全部按钮配置

完整实现代码 #

// 单个随机按钮的专属配置模型
class RandomButtonConfig {
  final Color bgColor;
  final Color overlayColor;
  final Color borderColor;
  final double top;
  final double left;
  final double height;
  final double width;
  final double radius;

  RandomButtonConfig({
    required this.bgColor,
    required this.overlayColor,
    required this.borderColor,
    required this.top,
    required this.left,
    required this.height,
    required this.width,
    required this.radius,
  });
}

class ButtonWidget extends StatefulWidget {
  const ButtonWidget({Key? key}) : super(key: key);

  @override
  State<ButtonWidget> createState() => _ButtonWidgetState();
}

class _ButtonWidgetState extends State<ButtonWidget> {
  // 全局复用同一个随机数实例，避免短时间多实例生成重复值
  final Random _random = Random();
  // 自定义需要显示的按钮数量
  final int _buttonCount = 2;
  // 存储所有按钮的独立配置
  late List<RandomButtonConfig> _buttonConfigs;

  // 生成单个按钮的独立随机配置
  RandomButtonConfig _generateSingleConfig(double maxWidth, double maxHeight) {
    // 生成当前按钮专属的3个不重复颜色
    final Set<Color> colorSet = {};
    while (colorSet.length < 3) {
      colorSet.add(Colors.primaries[_random.nextInt(Colors.primaries.length)]);
    }

    // 生成当前按钮专属的位置、尺寸、圆角参数
    const int minT = 3;
    final int maxT = maxHeight.toInt() - 80;
    final int randomTop = minT + _random.nextInt(maxT - minT);

    const int minL = 3;
    final int maxL = maxWidth.toInt() - 80;
    final int randomLeft = minL + _random.nextInt(maxL - minL);

    const int minH = 70;
    final int maxH = maxHeight.toInt() - randomTop;
    final int randomHeight = minH + _random.nextInt(maxH - minH);

    const int minW = 70;
    final int maxW = maxWidth.toInt() - randomLeft;
    final int randomWidth = minW + _random.nextInt(maxW - minW);

    const int minR = 1;
    const int maxR = 75;
    final int randomRadius = minR + _random.nextInt(maxR - minR);

    return RandomButtonConfig(
      bgColor: colorSet.elementAt(0),
      overlayColor: colorSet.elementAt(1),
      borderColor: colorSet.elementAt(2),
      top: randomTop.toDouble(),
      left: randomLeft.toDouble(),
      height: randomHeight.toDouble(),
      width: randomWidth.toDouble(),
      radius: randomRadius.toDouble(),
    );
  }

  @override
  void initState() {
    super.initState();
    _buttonConfigs = [];
  }

  @override
  Widget build(BuildContext context) {
    final double maxWidth = MediaQuery.of(context).size.width;
    final double maxHeight = MediaQuery.of(context).size.height;

    // 首次渲染时批量生成所有按钮的独立配置
    if (_buttonConfigs.isEmpty) {
      _buttonConfigs = List.generate(
        _buttonCount,
        (index) => _generateSingleConfig(maxWidth, maxHeight),
      );
    }

    return Stack(
      children: List.generate(_buttonCount, (index) {
        final RandomButtonConfig config = _buttonConfigs[index];
        return Positioned(
          height: config.height,
          width: config.width,
          top: config.top,
          left: config.left,
          child: SizedBox(
            child: ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(config.bgColor),
                overlayColor: MaterialStateProperty.all(config.overlayColor),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(config.radius),
                    side: BorderSide(color: config.borderColor, width: 5),
                  ),
                ),
                padding: MaterialStateProperty.all(const EdgeInsets.all(10)),
                minimumSize: MaterialStateProperty.all(const Size(70, 70)),
              ),
              onPressed: () {
                setState(() {
                  // 点击当前按钮仅刷新当前按钮的随机参数
                  // 如果需要点击后所有按钮都刷新，替换为重新生成整个_buttonConfigs列表即可
                  _buttonConfigs[index] = _generateSingleConfig(maxWidth, maxHeight);
                });
              },
              child: const Text(
                'PRESS',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        );
      }),
    );
  }
}

可选扩展 #

如果需要完全避免按钮之间重叠，可以在_generateSingleConfig方法中新增校验逻辑：新生成的按钮位置尺寸范围和已存在的所有按钮的边界做碰撞检测，检测到重叠就重新生成当前按钮的参数，直到不重叠为止。

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