将数据从一个页面发送到另一个flutter

Question

你好，我正在开发一个 flutter 应用程序，我已经制作了一个列表，我需要让它在用户按下其中一个列表时将他带到一个新页面，并在其中显示详细信息那个物体的如果有人可以帮助我，我不知道该怎么做

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:myapp2/SR.dart';
import 'package:myapp2/main.dart';
import 'package:myapp2/second.dart';
import './Classes/demandes.dart';
import './SR_details.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DataFromAPI(),
    );
  }
}

class DataFromAPI extends StatefulWidget {
  @override
  _DataFromAPIState createState() => _DataFromAPIState();
}

List<Attributes> MyAllData = [];

class _DataFromAPIState extends State<DataFromAPI> {
  @override
  void initState() {
    super.initState();
  }

  Future<List<Sr>> loadData() async {
    try {
      var response = await http.get(Uri.parse(
          'http://192.168.1.30:9080/maxrest/rest/mbo/sr/?_lid=azizl&_lpwd=max12345m&_format=json'));
      if (response.statusCode == 200) {
        final jsonBody = json.decode(response.body);
        Demandes data = Demandes.fromJson(jsonBody);
        final srAttributes = data.srMboSet.sr;
        return srAttributes;
      }
    } catch (e) {
      throw Exception(e.toString());
    }
    throw Exception("");
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text('Liste des Demandes'),
        ),
        body: FutureBuilder<List<Sr>?>(
          future: loadData(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return CircularProgressIndicator();
            } else {
              return new ListView.builder(
                  itemCount: snapshot.data?.length,
                  itemBuilder: ((_, index) {
                    return new ListTile(
                        title: new Card(
                          child: new ListTile(
                            title: new Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                new Text(
                                    'Ticket ID  : ${snapshot.data![index].attributes.ticketid.content}'),
                                new Text(
                                    'status  : ${snapshot.data![index].attributes.status.content}'),
                                new Text(
                                    'reportedby  : ${snapshot.data![index].attributes.reportedby.content}'),
                                new Text(
                                    'Status Date  : ${snapshot.data![index].attributes.statusdate.content}'),
                              ],
                            ),
                          ),
                        ),
                        onTap: () => Navigator.of(context).push(
                              new MaterialPageRoute(
                                builder: (BuildContext context) =>
                                    new SrDetailsScreen(detailsScreen:),
                              ),
                            ));
                  }));
            }
          },
        ),
      ),
    );
  }
}

这是我要显示数据的页面


import 'package:flutter/material.dart';
import './Classes/demandes.dart';

class SrDetailsScreen extends StatelessWidget {
  final SrDetailsScreen detailsScreen;
  const SrDetailsScreen({Key? key, required this.detailsScreen})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Deatil de SR num "),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Padding(
                  padding: EdgeInsets.all(8.0), child: Text('Ticket ID '))
            ],
          ),
        ));
  }
}

Answer 1

您可以使用 GestureTap 或 InkWill 小部件围绕您的 ListTile 项目，当您点击您的列表图块时，您可以使用页面参数将项目的 ID 发送到下一页，例如：

Navigator.of(context).push(
                              new MaterialPageRoute(
                                builder: (BuildContext context) =>
                                    new SrDetailsScreen(id:itemId),
                              ),
                            ));

在下一页中，您可以通过 ID 访问您的数据！

Answer 2

使您的 SrDetailsScreen 能够接收 Sr 类型的对象

import 'package:flutter/material.dart';
import './Classes/demandes.dart';

class SrDetailsScreen extends StatelessWidget {

  final Sr sr;
  const SrDetailsScreen({Key? key, required this.sr})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          //this is a mock code just to show you can show value of your sr's field like this
          title: const Text(sr.title),
        ),
        body: ...);
  }
}

然后传递你想要显示其详细信息的 sr 对象

Navigator.of(context).push(
    new MaterialPageRoute(
    builder: (BuildContext context) =>
        new SrDetailsScreen(sr: snapshot.data![index]),
       ),
    )
);

Answer 3

您可以使用带参数的导航 https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments

将数据从一个页面发送到另一个flutter

Send data from a page to another flutter

api

list

flutter