Flutter如何创建指定数量同参数的ElevatedButton按钮数组

第一步：改造原有ButtonWidget为可配置组件 #

原组件硬编码了固定位置参数，多按钮会完全重叠，先给组件增加可传入的配置参数，保留原有样式和点击换色的交互逻辑：

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

class ButtonWidget extends StatefulWidget {
  // 新增可配置参数：位置、按钮文本
  final double top;
  final double left;
  final String buttonText;
  const ButtonWidget({
    super.key,
    required this.top,
    required this.left,
    this.buttonText = 'PRESS',
  });

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

class _ButtonWidgetState extends State<ButtonWidget> {
  Set<Color> getColorSet({int numberOfColor = 3}) {
    Set<Color> generatedColorSet = <Color>{};
    final Random random = Random();
    while (generatedColorSet.length != numberOfColor) {
      generatedColorSet.add(
        Colors.primaries[random.nextInt(Colors.primaries.length)],
      );
    }
    return generatedColorSet;
  }

  late Set<Color> colorSet;

  @override
  void initState() {
    super.initState();
    colorSet = getColorSet();
  }

  @override
  Widget build(BuildContext context) {
    // 用组件传入的位置参数替换原来的硬编码值
    return Positioned(
      height: 140,
      width: 200,
      top: widget.top,
      left: widget.left,
      child: SizedBox(
        child: ElevatedButton(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(colorSet.elementAt(0)),
            overlayColor: MaterialStateProperty.all(colorSet.elementAt(1)),
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(200),
                side: BorderSide(color: colorSet.elementAt(2), width: 5),
              ),
            ),
            padding: MaterialStateProperty.all(const EdgeInsets.all(10)),
            minimumSize: MaterialStateProperty.all(const Size(50, 50)),
          ),
          onPressed: () {
            setState(() {
              colorSet = getColorSet();
            });
          },
          child: Text(
            widget.buttonText,
            style: const TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

第二步：批量生成指定数量的按钮数组 #

在Stack的children属性里，用List.generate方法根据传入的数量生成按钮列表，每个按钮分配独立的位置避免重叠，支持自定义生成数量：

@override
Widget build(BuildContext context) {
  // 自定义要生成的按钮数量，比如设置为10就生成10个按钮
  const int buttonCount = 10;
  return Scaffold(
    body: Stack(
      children: [
        // 批量生成按钮数组
        ...List.generate(buttonCount, (index) {
          return ButtonWidget(
            // 示例为纵向排列，每个按钮向下偏移150单位，可根据需求改成网格、横向等排列逻辑
            top: 25 + index * 150,
            left: 5,
            buttonText: 'PRESS ${index + 1}',
          );
        }),
      ],
    ),
  );
}

实现说明 #

• 直接修改buttonCount的值就可以控制生成的按钮总数，不需要改动组件内部逻辑
• 每个按钮独立维护自身的颜色状态，点击触发换色时不会影响其他按钮
• 排列逻辑可以按需调整：如果需要横向排列就修改left参数的偏移值，需要网格排列就同时计算top和left的偏移即可
• 原有按钮的固定样式、点击换色交互完全保留，没有改动原有逻辑

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