flutter - flutter 如何传递数组并在其他小部件中显示

Question

我有一个数组列表，我需要将其传递给其他有状态的小部件并在其中显示该数组
这是我的功能代码，可从API检索数据

  Future<List> doSomeAsyncStuff() async {
    final storage = new FlutterSecureStorage();
    String value = await storage.read(key: 'Cnic');
    print(value);

    String url = 'http://api.php?offset=0&limit=1&cnic=${value}' ;
    final msg = jsonEncode({"cnic": value});
    Map<String,String> headers = {'Content-Type':'application/json'};

    String token = value;
    final response = await http.get(url);

    var Data = json.decode(response.body);
    print(Data);

    var familyMembers = Data["records"][0]["family_members"];
    print(familyMembers);
    for (var familyMember in familyMembers){ //prints the name of each family member
      print(familyMember["name"]);
      print(familyMember["gender"]);
    }

  }

如您所见，有2个列表familyMember [“name”]和familyMember [“gender”]我需要将其传递给statefulwidget
我很简单地这样传递

                        Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => PersonalPage(familyMember["name"], familyMember["gender"])),
                        );

这是我的另一个有状态小部件，我需要在此处显示姓名和性别的数组

import 'package:flutter/material.dart';

class PersonalPage extends StatefulWidget {
  final String name;
  final String gender;
  PersonalPage(this.name, this.gender);

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

class _PersonalPageState extends State<PersonalPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('I need to print name and gender here ')
      ),
    );
  }
}

长笛

Answer 1

您在传递列表时做错了，在有状态的小部件中提到了字符串，您可以执行以下操作

  List<String> familyMemberName = [];
  List<String> familyMemberGender = [];


  Future<List> doSomeAsyncStuff() async {
    final storage = new FlutterSecureStorage();
    String value = await storage.read(key: 'Cnic');
    print(value);

    String url = 'http://api.php' ;
    final msg = jsonEncode({"cnic": value});
    Map<String,String> headers = {'Content-Type':'application/json'};

    String token = value;
    final response = await http.get(url);

    var Data = json.decode(response.body);
    print(Data);

    var familyMembers = Data["records"][0]["family_members"];
    print(familyMembers);
    for (var familyMember in familyMembers){ 
      familyMemberName.add(familyMember["name"]);
      familyMemberGender.add(familyMember["gender"]);
      print(familyMemberName);
    }

  }

在你这样的个人小部件中

import "package:flutter/material.dart";

class PersonalPage extends StatefulWidget {
  final List<String> names;
  final List<String> relation;

  PersonalPage(this.names,this.relation);
  @override
  _PersonalPageState createState() => _PersonalPageState();
}

class _PersonalPageState extends State<PersonalPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

        body:
        ListView.builder( //use ListView here to show all the names and genders
            itemCount: widget.names.length,
            itemBuilder: (BuildContext context,int index){
              return Padding(
                padding: EdgeInsets.only(left: 10, right: 10, bottom: 10, top: 10),
                child: Card(
                  child: Padding(
                    padding: EdgeInsets.all(5),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text('Name:', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
                            Text(widget.names[index])
                          ],
                        ),
                        Row(
                          children: <Widget>[
                            Text('Gender:', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
                            Text(widget.genders[index])
                          ],
                        ),

                      ],
                    ),
                  ),
                ),
              );
            })
    );
  }
}

对不起，我测试代码，所以这就是为什么我将其添加到卡中