我在一个屏幕上点击了一个事件，并且想要将该特定事件的数据从一个无状态小部件传递给一个有状态小部件。

Question

13 浏览2023年1月14日

匿名的 2023年1月14日

0 Comments

我有一个具有内部状态的小部件屏幕，其中包含事件。当你点击其中的一个事件时，它会带你进入另一个屏幕以查看更多相关信息，这是一个无状态的小部件，一切都正常工作。然而，当我在那个屏幕上点击一个按钮时，我希望它使用该特定事件的信息，比如类别和价格，并将这些数据传递给第三个屏幕上的一个具有状态的小部件进行结算。

如何从一个无状态的小部件传递数据给一个具有状态的小部件呢？注意：我还在我的导航菜单中使用了路由。

TLDR：Event.events[6].ticketType1 应该更改为 event.ticketType1

其中event是我在上一个屏幕中点击的事件。


import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class BookTicketScreen extends StatefulWidget {
  static const String routeName = '/bookTicket';
  static Route route() {
    return MaterialPageRoute(
        settings: RouteSettings(name: routeName),
        builder: (_) => BookTicketScreen());
  }
  @override
  _BookTicketScreenState createState() => _BookTicketScreenState();
}
class _BookTicketScreenState extends State {
  String ticketType = '€' + '${Event.events[6].ticketType4Price}';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('$ticketType'),
        ],
      ),
    );
  }
}

前一个屏幕的按钮，导航到具有状态的小部件屏幕并传递当前事件


class EventScreen extends StatelessWidget {
  static const String routeName = '/viewEvent';
  static Route route({required Event event}) {
    return MaterialPageRoute(
        settings: RouteSettings(name: routeName),
        builder: (_) => EventScreen(event: event));
  }
  final Event event;
  const EventScreen({required this.event});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      child: TextButton(
        child: Text('立即预订'),
        onPressed: () {
          Navigator.pushNamed(context, '/bookTicket', arguments: event);
        },
      ),
    );
  }
}


class AppRouter {
  static Route onGenerateRoute(RouteSettings settings) {
    print('This is route ${settings.name}');
    switch (settings.name) {
      case '/':
        return HomeScreen.route();
      case HomeScreen.routeName:
      case EventScreen.routeName:
        return EventScreen.route(event: settings.arguments as Event);
      case BookTicketScreen.routeName:
        return BookTicketScreen.route();
      // 添加其他路由
    }
  }
}


import 'package:equatable/equatable.dart';
class Event extends Equatable {
  final String name;
  final String category;
  final String imageUrl;
  final double price;
  const Event({
    required this.name,
    required this.category,
    required this.imageUrl,
    required this.price,
  });
  @override
  List get props => [
        name,
        category,
        imageUrl,
        price,
      ];
  static List events = [
    Event(
      category: '现场音乐',
      name: '现场活动',
      imageUrl:
          'https://d1e00ek4ebabms.cloudfront.net/production/fd60d020-b4fa-47a3-9ef8-0af6265f7df3.jpg',
      price: 29.99,
    ),
    // 添加其他事件
  ];
}

0

1 答案

匿名的 · Answer 1 · 2023-05-21T04:54:15+00:00

问题的出现原因是在一个无状态的小部件（stateless widget）中点击了一个事件，并且希望将该特定事件的数据传递给一个有状态的小部件（stateful widget）。

解决方法是通过以下步骤实现数据传递：

1. 创建一个有状态的小部件（stateful widget），该小部件可以接收并存储事件数据。

class BookTicketScreen extends StatefulWidget {


  static const String routeName = '/bookTicket';
  final Event event;
  BookTicketScreen(this.event);
  static Route route({required Event event}) {
    return MaterialPageRoute(
        settings: RouteSettings(name: routeName),
        builder: (_) => BookTicketScreen(event));
  }
  _BookTicketScreenState createState() => new _BookTicketScreenState(event);

}

2. 在有状态的小部件的构造函数中接收事件数据，并将其存储在一个变量中。

class _BookTicketScreenState extends State<BookTicketScreen> {


  late Event event;
  _BookTicketScreenState(Event event) {
    this.event = event;
  }

}

现在，你可以在有状态的小部件中使用存储的事件数据，并根据需要进行操作。