Flutter（VSCode）中如何将列表恢复至初始状态？

你的问题核心是重置按钮只操作了备份列表initialData，但界面渲染依赖的是items列表，所以点击后没有任何变化。下面是修复步骤和完整代码：

关键修复点 #

• 把全局的items移到State类中作为状态变量，确保修改后能触发UI刷新
• 重置时将initialData的内容复制回items，而非清空再填充initialData
• 初始化备份时用列表复制的方式，确保initialData保存的是初始数据的独立副本

修复后的完整代码 #

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(
      home: Scaffold(
        body: const MyStatefulWidget(),
      ),
    );
  }
}

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

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<StatefulWidget> {
  // 将原全局items移至此处作为状态变量
  List<String> items = ["CGS 1540", "COP 2512", "COP 2513", "CIS 3213",
    "CGS 3303", "CIS 3363", "COP 3515", "CEN 3722", "CGS 3853", "CNT 4104",
    "CNT 4403", "COP 4538", "CNT 4603", "CIS 4935", "COP 4703" ];
  List<String> initialData = [];

  @override
  void initState() {
    // 创建初始数据的独立副本
    initialData = List.from(items);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    const title = 'Course List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          padding: const EdgeInsets.symmetric(vertical:16),
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            return Dismissible(
              background: Container(
                child: Text('Delete ${items[index]}',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
              ),
              secondaryBackground:Container(
                child: Text('Archive ${items[index]}',
                  style: TextStyle(color: Colors.white),
                ),
                alignment: Alignment.centerRight,
                color: Colors.yellow,
              ),
              key: ValueKey<String>(items[index]),
              onDismissed: (DismissDirection direction){
                if(direction == DismissDirection.startToEnd) {
                  setState(() {
                    String deletedItem = items.removeAt(index);

                    ScaffoldMessenger.of(context)
                      ..removeCurrentSnackBar()
                      ..showSnackBar(
                        SnackBar(
                          duration: const Duration(seconds: 2),
                          content: Text('$deletedItem deleted'),
                          action: SnackBarAction(
                            label: 'Undo',
                            onPressed: (){
                              setState(() => items.insert(index, deletedItem));
                            },
                          ),
                        )
                      );
                  });
                }
                else if (direction == DismissDirection.endToStart){
                  setState(() {
                    String deletedItem = items.removeAt(index);

                    ScaffoldMessenger.of(context)
                      ..removeCurrentSnackBar()
                      ..showSnackBar(
                        SnackBar(
                          duration: const Duration(seconds: 2),
                          content: Text('$deletedItem Archived'),
                          action: SnackBarAction(
                            label: 'Undo',
                            onPressed: (){
                              setState(() => items.insert(index, deletedItem));
                            },
                          ),
                        )
                      );
                  });
                }
              },
              child: ListTile(
                title: Text('${items[index]}')
              )
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: (){
            setState(() {
              // 将initialData的副本赋值给items，恢复初始状态
              items = List.from(initialData);
            });
          },
          tooltip: 'Reset',
          child: const Icon(Icons.autorenew),
        ),
      ),
    );
  }
}

额外说明 #

• 移除了冗余的fillInitialData方法，直接在initState中完成备份，逻辑更简洁
• 使用List.from(initialData)而非直接赋值，是通用的最佳实践，避免后续修改items时意外影响备份数据
• 重置操作直接修改items并触发setState，界面会自动刷新为初始列表

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