ListView 和 MaterialPageRoute，这里的 TFlutterError 是多个 heroes 在一个子树中共享同一个标签

Question

我正在使用编辑按钮构建配置文件，我正在使用列表视图显示来自 firebase 的所有数据。但是当我想制作那个编辑按钮并导航到编辑页面时，它并没有很好地工作，因为英雄错误或类似错误。我在谷歌上搜索了如何在他们刚刚说的任何地方修复它：在 Hero 小部件中重构它并提供自定义标签：'tagImage$index' 或 flutter floatingactionbutton，他们只提供 heroTag：“btn1”，

嗯..对此有什么建议吗？也许我不应该使用列表视图？要不然？

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:skolae2_project/page/auth_page.dart';
import 'package:skolae2_project/page/edit_profile_screen.dart';

class Profile extends StatefulWidget {
  const Profile({super.key});
  @override
  State<Profile> createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  final icon = CupertinoIcons.settings;

  @override
  Widget build(BuildContext context) {
    // ignore: prefer_const_declarations

    return Scaffold(
      appBar: AppBar(
        leading: const BackButton(color: Colors.black),
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          'Profile',
          style: TextStyle(color: Colors.black),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            color: Colors.black,
            onPressed: () {
              logOut(context);
            },
          )
        ],
      ),
      body: ListView(
        physics: const BouncingScrollPhysics(),
        children: [
          const SizedBox(
            height: 15,
          ),
          Center(
            child: ElevatedButton(
              child: const Text(
                "Edit your profile",
              ),
              onPressed: () {
                Navigator.of(context, rootNavigator: true).pushAndRemoveUntil(
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return EditProfilePage();
                    },
                  ),
                  (route) => false,
                );
              },
            ),
          ),
          const SizedBox(
            height: 15,
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以使用由电子邮件和 URL 组成的唯一标签。这会为每个项目创建一个唯一的标签。您可以在下面看到工作版本。

列表页面：

import 'package:flutter/material.dart';
import 'package:sample/hero_example.dart';

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

  @override
  State<ListPage> createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  List<Map> users = [
    {'name': 'Name1', 'email': 'email1', 'image': 'https://www.gstatic.com/webp/gallery/4.sm.jpg'},
    {'name': 'Name2', 'email': 'email2', 'image': 'https://www.gstatic.com/webp/gallery/4.sm.jpg'},
    {'name': 'Name3', 'email': 'email3', 'image': 'https://www.gstatic.com/webp/gallery/4.sm.jpg'}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
            itemCount: users.length,
            itemBuilder: ((context, index) {
              return InkWell(
                onTap: () {
                  Navigator.of(context, rootNavigator: true).push(
                    MaterialPageRoute(
                      builder: (BuildContext context) {
                        return ProfilePage(
                          user: users[index],
                        );
                      },
                    ),
                  );
                },
                child: Card(
                  margin: const EdgeInsets.all(16),
                  child: ListTile(
                    leading: Hero(
                        tag: users[index]['email'] + users[index]['image'],
                        child: Image.network(users[index]['image'])),
                    title: Text(users[index]['name']),
                  ),
                ),
              );
            })));
  }
}

个人资料页：

import 'package:flutter/material.dart';
import 'package:sample/list_page.dart';

class ProfilePage extends StatefulWidget {
  final Map user;
  const ProfilePage({super.key, required this.user});

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const BackButton(color: Colors.black),
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          'Profile',
          style: TextStyle(color: Colors.black),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            color: Colors.black,
            onPressed: () {
              //logOut(context);
            },
          )
        ],
      ),
      body: ListView(
        physics: const BouncingScrollPhysics(),
        children: [
          GestureDetector(
            onTap: () {},
            child: CircleAvatar(
              backgroundColor: Colors.amberAccent,
              minRadius: 60.0,
              child: Hero(
                tag: widget.user['email'] + widget.user['image'],
                child: CircleAvatar(radius: 55.0, backgroundImage: NetworkImage(widget.user['image'])),
              ),
            ),
          ),
          // ProfileWidget(
          //   imagePath: user.imagePath,
          //   onClicked: () {
          //     Navigator.of(context).push(
          //       MaterialPageRoute(
          //           builder: (context) => const EditProfilePage()),
          //     );
          //   },
          // ),
          const SizedBox(
            height: 24,
          ),
          Column(
            children: const [
              Text(
                'Name',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                'Email',
                style: TextStyle(color: Colors.grey, fontSize: 16),
              ),
              SizedBox(
                height: 5,
              ),
            ],
          ),
          const SizedBox(
            height: 15,
          ),
          Center(
            child: ElevatedButton(
              child: const Text(
                "Edit your profile",
              ),
              onPressed: () {
                /*
                Navigator.of(context, rootNavigator: true).push(
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return EditProfilePage();
                    },
                  ),
                );
                */
              },
            ),
          ),
          const SizedBox(
            height: 15,
          ),
          //contentButton(context),
          //buildAbout(user),
        ],
      ),
    );
  }
}