Flutter 将数据传递到多个页面

Question

我正在使用相同的构造函数构建多个（不同的）UI 页面。我使用有状态的小部件作为我的构造函数，并在我的构造函数中从 Firestore 获取用户信息数据。我想将 Firebase 数据从构造函数传递到不同的管理 UI 屏幕。

我的构造函数

class MyConstructor extends StatefulWidget {
  final navigateToUserPage;
  final String userDetailsString;
  const MyConstructor(
      {super.key,
      required this.navigateToUserPage,
      required this.userDetailsString});

  @override
  State<MyConstructor> createState() => _MyConstructorState();
}

class _MyConstructorState extends State<MyConstructor> {
  QueryDocumentSnapshot<Map<String, dynamic>>? selectedUser;
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream:
          FirebaseFirestore.instance.collection("collectionPath").snapshots(),
      builder: (context, snapshot) {
        return ListView.builder(
          itemCount: snapshot.data!.docs.length,
          itemBuilder: (context, index) {
            final userName = snapshot.data!.docs[index].get("Name");
            return Row(
              children: [
                ListTile(
                  onTap: () {
                    setState(() {
                      selectedUser = userName;
                    });
                  },
                  /*the rest of the code*/
                ),
                TextButton(
                    onPressed: () {
                      Navigator.pushReplacement(
                          context,
                          MaterialPageRoute(
                            builder: (context) => widget.navigateToUserPage(
                                /*what should I pass here*/
                                ),
                          ));
                    },
                    child: Text(widget.userDetailsString)),
              ],
            );
          },
        );
      },
    );
  }
}

访问构造函数的类

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

  @override
  State<MyMainPage> createState() => _MyMainPageState();
}

class _MyMainPageState extends State<MyMainPage> {
  @override
  Widget build(BuildContext context) {
    return const MyConstructor(
      navigateToUserPage: UserPage(),
      userDetailsString: "User details",
    );
  }
}

访问数据的页面

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

  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  /*how do I access the data from previous page*/

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

知道如何使用此构造函数将数据传递到不同的页面吗？

Answer 1

我应该告诉你学习两件事

第一 -> 状态管理 -> Provider、bloc、getX 等（这将告诉您如何管理状态） -> 这是在应用程序中处理数据/状态的最推荐方法。

第二 -> 创建一个路线生成器类，它将处理所有导航，并且您还可以将相关数据传递到每个屏幕。

Answer 2

在这里，您可以将 navigationCallback 而不是“navigateToUserPage”从 MyMainPage 传递到 MyConstructor 页面，如下所示。

class MyConstructor extends StatefulWidget {
  final Function(Map<String, dynamic> userDetails) navigationCallback;
  final String userDetailsString;
  const MyConstructor(
      {super.key,
      required this.navigationCallback,
      required this.userDetailsString});

  @override
  State<MyConstructor> createState() => _MyConstructorState();
}

class _MyConstructorState extends State<MyConstructor> {
  QueryDocumentSnapshot<Map<String, dynamic>>? selectedUser;
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream:
          FirebaseFirestore.instance.collection("collectionPath").snapshots(),
      builder: (context, snapshot) {
        return ListView.builder(
          itemCount: snapshot.data!.docs.length,
          itemBuilder: (context, index) {
            final userName = snapshot.data!.docs[index].get("Name");
            return Row(
              children: [
                ListTile(
                  onTap: () {
                    setState(() {
                      selectedUser = userName;
                    });
                  },
                  /*the rest of the code*/
                ),
                TextButton(
                    onPressed: () {
                      widget.navigationCallback(snapshot.data!.docs[index]);
                    },
                    child: Text(widget.userDetailsString)),
              ],
            );
          },
        );
      },
    );
  }
}

MyMainPage 的一些修改如下：

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

  @override
  State<MyMainPage> createState() => _MyMainPageState();
}

class _MyMainPageState extends State<MyMainPage> {
  @override
  Widget build(BuildContext context) {
    return MyConstructor(
      navigationCallback: (Map<String, dynamic> userDetails) {
          Navigator.pushReplacement(
                      context,
                      MaterialPageRoute(
                        builder: (context) => UserPage(userDetails: userDetails)));
      },
      userDetailsString: "User details",
    );
  }
}

UserPage 将如下所示：

class UserPage extends StatefulWidget {
 UserPage({super.key, required this.userDetails});

 Map<String, dynamic> userDetails;

  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  /*how do I access the data from previous page*/

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

注意：我已根据您的问题添加了命名约定，但您可以根据您的要求进行修改。