Flutter 如何从传递的数据中构建一个 Widget 列表？

Question

我是 Flutter 的新手，我想弄清楚如何编写一个函数来构建一个基于从 FirstScreenPageView() 传递到 SecondScreenPageView() 的数据的小部件？

更具体地说：

class nameCard extends StatelessWidget{
const nameCard({
  Key key, this.firstName, this.lastName
}): super(key:key);
final String fistName;
final String lastName;
@override
Widget build(BuildContext context){
  return Container(
    child: Column(
       children: <Widget>[
          Text(fistName), 
          Text(lastName),
       ],
    ),
  ),
}
};

class FirstScreenPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: RaisedButton(child: Text('Send'), onPressed:(){
          ///Send nameCard Widget to SecondScreenPageView here})
    );
 }
}

class SecondScreenPageView extends StatelessWidget {
   List<Widget> nameCardList = [];
   @override
   Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
       children: nameCardList,
      ),
    );
   }
 }

如何将 FirstScreenPageView 中的 nameCard 附加到 SecondScreenPageView 的 nameCardList？

Answer 1

您可以通过构造函数传递第二屏页面视图。

class FirstScreenPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: RaisedButton(child: Text('Send'), onPressed:(){
          ///Send nameCard Widget to SecondScreenPageView here})
          Navigator.push(
              context,
              MaterialPageRoute(
              builder: (context) => SecondScreenPageView(nameCardList: cardList),
          ),
        );
    );
 }
}

-------
class SecondScreenPageView extends StatelessWidget {
   final List<Widget> nameCardList;

   SecondScreenPageView({this.nameCardList});

   @override
   Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
       children: nameCardList,
      ),
    );
   }
 }

Answer 2

使用名片而不是列表，然后将其添加到第二个屏幕的列表中，并创建一个类名片以在发送到第二个屏幕之前将其用于实现

import 'package:flutter/material.dart';

class NameCard {
  final String firstName;
  final String lastName;

  NameCard({this.firstName, this.lastName});
}

class FirstScreenPageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    NameCard nameCardToSend = NameCard(firstName: 'name', lastName: 'lastName');

    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          RaisedButton(
              child: Text('Send'),
              onPressed: () {
                ///Send nameCard Widget to SecondScreenPageView here})
                Navigator.of(context).push(MaterialPageRoute(builder: (_) {
                  return SecondScreenPageView(
                    nameCard: nameCardToSend,
                  );
                }));
              }),
        ],
      ),
    );
  }
}

class SecondScreenPageView extends StatelessWidget {
  final NameCard nameCard;

  SecondScreenPageView({@required this.nameCard});

  List<NameCard> nameCardList = [];
  @override
  Widget build(BuildContext context) {
    nameCardList.add(nameCard);
    return Scaffold(

      appBar: AppBar(),

      body: Column(
        children: <Widget>[
          Text(nameCard.firstName),
          SizedBox(
            height: 11,
          ),
          Text(nameCard.lastName),
          SizedBox(
            height: 11,
          ),
          Text('Or in a Row'),
          Row(
            children: <Widget>[
              SizedBox(
                width: 11,
              ),
              Text(nameCard.firstName),
              SizedBox(
                width: 11,
              ),
              Text(nameCard.lastName),
            ],
          ),
        ],
      ),
    );
  }
}

抱歉忘记在 SecondScreenPageView 中添加 appBar: AppBar()，这样你就可以回到第一个屏幕

如果是，请接受它作为答案，再见