如何在Flutter的Stack中随机改变按钮显示顺序？

要实现点击按钮随机改变Stack里按钮的顺序，核心是把按钮的配置数据和UI渲染分离，通过动态修改数据列表来驱动UI更新，具体实现如下：

步骤说明 #

• 把每个按钮的文本、宽高参数抽成数据列表，避免硬写重复的Widget代码
• 实现一个打乱数据列表的方法，点击按钮时调用该方法并通过setState触发UI刷新
• 遍历数据列表生成对应的Positioned按钮组件

修改后的完整代码 #

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 存储按钮的配置数据：文本、宽度、高度
  List<Map<String, dynamic>> buttonConfigs = [
    {'text': '1', 'width': 700.0, 'height': 700.0},
    {'text': '2', 'width': 600.0, 'height': 600.0},
    {'text': '3', 'width': 500.0, 'height': 500.0},
    {'text': '4', 'width': 400.0, 'height': 400.0},
  ];

  // 打乱按钮顺序的方法
  void shuffleButtons() {
    setState(() {
      buttonConfigs.shuffle();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        // 遍历配置列表生成按钮组件
        children: buttonConfigs.map((config) {
          return Positioned(
            height: config['height'],
            width: config['width'],
            child: SizedBox(
              child: ElevatedButton(
                onPressed: shuffleButtons,
                child: Text(config['text']),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}

代码说明 #

1. 数据抽离：用buttonConfigs列表存储每个按钮的关键参数，后续修改按钮数量或属性只需要调整这个列表即可
2. 打乱逻辑：调用Dart内置的shuffle()方法随机打乱列表顺序，通过setState通知Flutter框架重新构建UI
3. 动态渲染：通过map遍历配置列表生成对应的Positioned和ElevatedButton，实现数据驱动UI

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