Flutter：如何从Dialog向ListView页面传递标题与URL值？

问题根源 #

1. 对话框仅返回标题：当前点击"Add"时只通过pop返回了bookmarkTitle，没有携带URL信息，导致主页面无法获取到输入的网址。
2. 主页面列表更新错误：在主页面中，你把返回的标题同时添加到了bookmarkList和bookmarkUrl两个列表中，这会导致URL列表也存的是标题内容。
3. 冗余参数：BookmarkListPage的text和url参数没有实际作用，属于冗余代码。

修复方案 #

1. 创建书签数据类

定义一个简单的类来封装标题和URL，方便统一传递：

class Bookmark {
  final String title;
  final String url;

  Bookmark(this.title, this.url);
}

2. 修改对话框返回完整书签数据

在对话框的"Add"按钮点击事件中，返回包含标题和URL的Bookmark实例：

// dialog.dart 修改后的代码
class BookmarkDialog extends StatefulWidget {
  const BookmarkDialog({super.key});

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

class BookMarkDialogState extends State<BookmarkDialog> {
  String bookmarkTitle = "";
  String bookmarkUrl = "";

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Add Bookmark'),
      content: Column(
        mainAxisSize: MainAxisSize.min, // 避免弹窗过长
        children: [
          const Text('Title'),
          TextField(
            onChanged: (value) {
              setState(() {
                bookmarkTitle = value;
              });
            },
          ),
          const SizedBox(height: 12), // 添加间距提升体验
          const Text('URL'),
          TextField(
            onChanged: (value) {
              setState(() {
                bookmarkUrl = value;
              });
            },
          )
        ],
      ),
      actions: <Widget>[
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text('Cancel'),
        ),
        TextButton(
          onPressed: () {
            // 返回包含标题和URL的Bookmark对象
            Navigator.of(context).pop(Bookmark(bookmarkTitle, bookmarkUrl));
          },
          child: const Text('Add'),
        )
      ],
    );
  }
}

这里把GestureDetector换成了TextButton，符合Material Design规范，同时添加了mainAxisSize: MainAxisSize.min避免弹窗高度异常，增加间距提升UI体验。

3. 修改主页面接收并更新列表

更新主页面的列表类型为Bookmark，并正确处理对话框返回的数据：

// main.dart 修改后的代码
void main() {
  runApp(const BookmarkApp());
}

class BookmarkApp extends StatelessWidget {
  const BookmarkApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bookmark App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const BookmarkListPage(), // 移除冗余参数
    );
  }
}

class BookmarkListPage extends StatefulWidget {
  const BookmarkListPage({super.key}); // 移除无用参数

  final String title = 'Bookmark List';

  @override
  State<BookmarkListPage> createState() => _BookmarkListPageState();
}

class _BookmarkListPageState extends State<BookmarkListPage> {
  // 把两个列表合并为一个Bookmark类型的列表
  List<Bookmark> bookmarks = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(widget.title),
        bottom: PreferredSize(
          child: Container(
            height: 1,
            color: Colors.black,
          ),
          preferredSize: const Size.fromHeight(1),
        ),
      ),
      body: ListView.builder(
        itemCount: bookmarks.length,
        itemBuilder: (context, index) {
          final bookmark = bookmarks[index];
          return Card(
            child: ListTile(
              title: Text(bookmark.title),
              subtitle: Text(bookmark.url),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        shape: const CircleBorder(),
        backgroundColor: Colors.blue,
        onPressed: () async {
          final newBookmark = await showDialog<Bookmark>(
            context: context,
            builder: (_) {
              return const BookmarkDialog();
            },
          );

          if (newBookmark != null) {
            setState(() {
              bookmarks.add(newBookmark);
            });
          }
        },
        child: const Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    );
  }
}

// 新增Bookmark数据类
class Bookmark {
  final String title;
  final String url;

  Bookmark(this.title, this.url);
}

关键修改点说明 #

• 使用Bookmark类统一管理书签的标题和URL，避免维护两个独立列表的同步问题。
• 对话框返回完整的Bookmark实例，确保主页面能获取到所有输入信息。
• 移除了BookmarkListPage中无用的text和url参数，简化代码结构。
• 将GestureDetector替换为TextButton，遵循Flutter的组件最佳实践。

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