使用 Flutter Provider 将数据传递到另一个屏幕

Question

我正在尝试使用 Provider 将数据传递到另一个屏幕，但似乎我总是传递相同的数据，除非我对列表进行排序然后传递不同的数据（这意味着我可能正在切换通过对列表进行排序来索引，这就是它现在传递不同数据的原因）。简而言之，我调用 API，填充列表，也为下一页设置提供程序，然后单击我列出上一个屏幕中的信息，但问题是我总是显示相同的项目，除非我对列表。代码如下：

调用 API 并显示列表：

 var posts = <RideData>[];
  var streamController = StreamController<List<RideData>>();

  @override
  void initState() {
    _getRideStreamList();
    super.initState();
  }

  _getRideStreamList() async {
    await Future.delayed(Duration(seconds: 3));
    var _vehicleStreamData = await APICalls.instance.getRides();

    var provider = Provider.of<RideStore>(context, listen: false);

    posts = await _vehicleStreamData
        .map<RideData>((e) => RideData.fromJson(e))
        .toList();

    streamController.add(posts);
    provider.setRideList(posts, notify: false);
  }

  bool isSwitched = true;
  void toggleSwitch(bool value) {
    if (isSwitched == false) {
      posts.sort((k1, k2) => k1.rideId.compareTo(k2.rideId));
    } else {
      posts.sort((k1, k2) => k2.rideId.compareTo(k1.rideId));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: [
              TextButton(
                  child: Text('sort ascending'),
                  onPressed: () {
                    setState(() {
                      toggleSwitch(isSwitched = !isSwitched);
                    });
                  }),
              Container(
                height: 1000,
                child: StreamBuilder<List<RideData>>(
                    initialData: posts,
                    stream: streamController.stream,
                    builder: (context, snapshot) {
                      return ListView.builder(
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index) {
                          return Column(
                            children: [
                              Row(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.only(left: 15.0),
                                    child: Text(
                                      'Ride #${snapshot.data[index].rideId}',
                                    ),
                                  ),
                                  FlatButton(
                                    textColor: Colors.blue[700],
                                    minWidth: 0,
                                    child: Text('View'),
                                    onPressed: () {
// here is where I pass the data to the RideInfo screen
                                      Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                              builder: (context) => RideInfo(
                                                    rideId: snapshot
                                                        .data[index].rideId,
                                                  )));
                                    },
                                  ),
                                ],
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: [
                                  Text(
                                    '${snapshot.data[index].pickupTime}',
                                  ),
                                  Text(
                                    '${snapshot.data[index].jobArrived}',
                                  ),
                                ],
                              ),
                            ],
                          );
                        },
                      );
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }

按下查看按钮并将数据传递到另一个屏幕 (RideInfo) 后：

class RideInfo extends StatefulWidget {
  static const String id = 'ride_info_screen';
  String rideId;
  RideInfo({@required this.rideId});

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

class _RideInfoState extends State<RideInfo> {
  String rideID = '';

  @override
  void initState() {
    super.initState();
    setState(() {
      rideID = widget.rideId;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          'Ride #$rideID',
          ),
        ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Consumer<RideStore>(
            builder: (context, rideStore, child) {
              return Column(
                children: [
                  ListView.builder(
                      shrinkWrap: true,
                      itemCount: 1,
                      itemBuilder: (context, index) {
                        RideData rides = rideStore.getRideByIndex(index);
                        return Column(
                          children: [
                            Expanded(
                              flex: 2,
                              child: Column(
                                children: [
                                  Text(
                                    "PICK UP",
                                  ),
// here I display the pickUpTime but it is always the same and I wanted to display the time based on the ID
                                  Text(
                                    '${rides.pickupTime}AM',
                                  ),
                                ],
                              ),
                            ),
                          ],
                        );
                      }),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

当我按下查看单个项目的视图时，数据（在这种情况下为pickUpTime）并没有改变，但是就像我说的，当我用排序方法改变列表的顺序时，我得到了不同的数据。 这是提供者模型：

class RideStore extends ChangeNotifier {
  List<RideData> _rideList = [];

  List<RideData> get rideList => _rideList;

  setRideList(List<RideData> list, {bool notify = true}) {
    _rideList = list;
    if (notify) notifyListeners();
  }

  RideData getRideByIndex(int index) => _rideList[index];

  int get rideListLength => _rideList.length;
}

如何根据我在骑行信息屏幕中按下并传递的列表中的 ID 显示正确的信息，这样它不会总是返回相同的数据？提前感谢您的帮助！

Answer 1

违规代码在RideInfo:

  ListView.builder(
      shrinkWrap: true,
      itemCount: 1,
      itemBuilder: (context, index) {
        RideData rides = rideStore.getRideByIndex(index);

index 始终为1，因此您始终显示第一个RideData。有多种选项可以修复它，例如将index，甚至将RideData 传递给RideInfo 构造函数：

class RideInfo extends StatefulWidget {
  static const String id = 'ride_info_screen';
  String rideId;
  final int index;
  RideInfo({@required this.rideId, @required this.index, Key key})
      : super(key: key) {

和：

        RideData rides = rideStore.getRideByIndex(widget.index);

我在代码上有一些额外的 cmets。首先，ListView 在RideInfo 中毫无用处，因此请将其删除。

其次，无需构造streamController 并在父表单中使用StreamBuilder。您的列表可在RideStore 中找到。所以你的父表单可能有：

  Widget build(BuildContext context) {
    var data = Provider.of<RideStore>(context).rideList;
    ...
          Container(
            height: 1000,
            child:
                // StreamBuilder<List<RideData>>(
                //     initialData: posts,
                //     stream: streamController.stream,
                //     builder: (context, snapshot) {
                //       return
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: data.length,

我希望这些 cmets 有所帮助。

编辑：

编辑您的代码以使用FutureBuilder 非常简单。首先，让_getRideStreamList返回它读取的数据：

  _getRideStreamList() async {
    ...
    return posts;
  }

删除在initState 中对_getRideStreamList 的调用，并将ListView 包装在调用FutureBuilder 的_getRideStreamList 中：

          Container(
            height: 1000,
            child: FutureBuilder(
              future: _getRideStreamList(),
              builder: (ctx, snapshot) {
                if (!snapshot.hasData) {
                  return Center(child: CircularProgressIndicator());
                } else {
                  var data = snapshot.data;
                  return ListView.builder(
                    ...
                  );
                }
              },
            ),
          ),

这会在等待数据时显示CircularProgressIndicator。

请注意，这是一个快速的技巧 - 您不希望每次重新构建小部件时都读取数据。所以_getRideStreamList 可以检查数据是否已经被读取并直接返回而不是重新读取。