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

试试这个并按照以下方式更改您的代码：由于您的第一页代码丢失，我创建了一个虚拟 forst 页面。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'My APP',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List of ....'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open details'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PersonalPage("NAME","GENDER")),
            );
          },
        ),
      ),
    );
  }
}

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: Row(
          children : [
            Text(widget.name),
            Text(widget.gender),
            
          ]
        )
      ),
    );
  }
}

Answer 2

你做错了你正在传递列表并且在有状态的小部件中你提到它是一个字符串你可以做这样的事情

  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])
                          ],
                        ),

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

抱歉，我测试了代码，这就是我将其添加到卡片中的原因

Answer 3

Text(widget.name)
Text(widget.gender)

或

Text("My name is ${widget.name} and my gender is ${widget.gender}")