0

在我的颤振网络项目中，我有一个包含事件列表的页面。当我单击一个事件时，它会导致一个页面模型，其中显示来自我数据库中文档的信息。这是显示所有事件的页面的一部分：

FutureBuilder<QuerySnapshot>(
  future: events.orderBy('Date').where('Date', isGreaterThanOrEqualTo: now).get(),
  builder: (context, snapshot) {

    if(snapshot.connectionState == ConnectionState.done) {

      return Column(
        children: snapshot.data!.docs.map((data) {

          return Row(
            children: [

              Text(
                '${data['Name']}',
              ),

              Button(
                text: 'More',
                onTap: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) => EventModel(id: data.id))); // Old solution I used
                  Navigator.of(context).pushNamed('/ ?? ') // <= What should I put in here ?
                }
              ),

            ]
          );

        }).toList(),
      );

    }

    return LoadingAnimation();
  }
),

这是我的事件模型页面：

class EventModel extends StatelessWidget {
  
  const EventModel({ Key? key, required this.id }) : super(key: key);

  final String id;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: events.doc(id).get(),
        builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {

          if(snapshot.connectionState == ConnectionState.done) {

            DocumentSnapshot data = snapshot.data!;

            return Column(
              children: [

                Text(
                  '${data['Name']}'
                ),

                // Same thing for Date, price, etc.

              ],
            );

          }

          return LoadingAnimation();

        },
      ),
    );
  }
}

关于导航，我已经定义了命名路线。事件页面称为“/事件”。

return MaterialApp(
  title: 'My web App',
  debugShowCheckedModeBanner: false,
  onGenerateRoute: (settings) {
    if (settings.name == "/") {
      return PageRouteBuilder(
        settings: settings,
        pageBuilder: (_, __, ___) => const Home(),
      );
    }
    if (settings.name == "/events") {
      return PageRouteBuilder(
        settings: settings,
        pageBuilder: (_, __, ___) => const EventsPage(),
      );
    }
  }
);

我想知道如何做到这一点，当我转到特定事件的页面时，URL 是：'/events/${event.id}'。例如：“/events/A1b2C3”如果“A1b2C3”是我的 Firebase 文档 ID。

知道我不能使用除“Navigator.pushNamed(context, route);”以外的任何东西，因为这里附加的所有代码是我发现在更改页面时没有丑陋动画的唯一解决方案。

有任何想法吗 ？

4

0 回答 0