Flutter中通过AlertDialog文本框向ListView添加可跳转页面条目时无法创建条目的问题

嘿，我看到你的问题了，咱们来一步步解决它。你的代码现在没法创建条目，主要有几个关键问题，我来给你梳理清楚：

问题分析 #

1. 变量声明位置错误：你把_items、textController这些核心变量放在了build方法里。要知道build方法会在UI更新时反复调用，每次调用都会重新初始化这些变量，导致你添加的内容根本没法保存下来。
2. 未更新列表状态：点击AlertDialog里的"Add"按钮时，你只是把文本返回了，但没有把它添加到_items列表中，也没有调用setState()通知Flutter更新UI。
3. 缺少列表项的跳转逻辑：你还没给ListTile添加点击事件，没法跳转到新页面展示对应的标题。

修复后的完整代码 #

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

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

  @override
  State<Lists> createState() => _ListsState();
}

class _ListsState extends State<Lists> {
  // 把变量移到State类的成员位置，避免每次build重新初始化
  final List<String> _items = [];
  final TextEditingController _textController = TextEditingController();
  int _currentIndex = 0;

  @override
  void dispose() {
    // 记得销毁控制器，避免内存泄漏
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _items.isNotEmpty
          ? ListView.builder(
              itemCount: _items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_items[index]),
                  // 添加点击跳转逻辑
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => DetailPage(itemName: _items[index]),
                      ),
                    );
                  },
                );
              },
            )
          : const Center(
              child: Text("You currently have no classes. Add from below."),
            ),
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_arrow,
        spacing: 6,
        spaceBetweenChildren: 6,
        backgroundColor: const Color.fromARGB(255, 22, 37, 50),
        foregroundColor: const Color.fromARGB(255, 255, 255, 255),
        children: [
          const SpeedDialChild(
            child: Icon(Icons.group_add),
            label: "add student",
          ),
          SpeedDialChild(
            child: const Icon(Icons.school),
            label: "add class",
            onTap: () async {
              // 等待对话框返回结果
              final result = await showDialog<String>(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: const Text('Add a new class'),
                    content: TextField(
                      controller: _textController,
                      autofocus: true,
                      decoration: const InputDecoration(
                        hintText: "Enter the name of the class."),
                    ),
                    actions: [
                      TextButton(
                        child: const Text('Cancel'),
                        onPressed: () {
                          Navigator.pop(context);
                          // 取消时清空输入框
                          _textController.clear();
                        },
                      ),
                      TextButton(
                        child: const Text('Add'),
                        onPressed: () {
                          if (_textController.text.isNotEmpty) {
                            Navigator.pop(context, _textController.text);
                            // 添加后清空输入框
                            _textController.clear();
                          }
                        },
                      ),
                    ],
                  );
                },
              );

              // 如果返回结果不为空，添加到列表并更新UI
              if (result != null && result.isNotEmpty) {
                setState(() {
                  _items.add(result);
                });
              }
            },
          )
        ],
      ),
    );
  }
}

// 新增的详情页面
class DetailPage extends StatelessWidget {
  final String itemName;
  const DetailPage({super.key, required this.itemName});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(itemName)),
      body: const Center(
        child: Text('这是对应的详情页面'),
      ),
    );
  }
}

关键修改点说明 #

1. 变量移到成员位置：把_items、_textController从build方法里移到State类的顶部，这样它们的生命周期和页面一致，不会被反复初始化。
2. 添加状态更新逻辑：使用await获取对话框返回的文本，然后通过setState()把文本添加到_items列表，触发UI更新。
3. 添加跳转逻辑：给ListTile添加onTap事件，跳转到新建的DetailPage，并把条目名称传过去作为AppBar的标题。
4. 内存泄漏防护：重写dispose方法销毁TextEditingController，避免内存泄漏。
5. 输入框清空处理：在取消或添加后清空输入框，提升用户体验。

这样修改后，你的功能就能正常工作了——点击添加按钮弹出对话框，输入名称后列表会新增条目，点击条目就能跳转到对应标题的页面。

备注：内容来源于stack exchange，提问作者Killertouch