在Flutter中：如何将数据从文本字段传递到列表，然后列表将显示每个条目的卡片？

Question

我正在尝试将信息输入文本字段，将其传递给构造函数，该构造函数从“ Terminal”类创建一个对象，并将每个条目发送到要在界面上的卡片中显示的地图。

我试图了解如何将数据从一个小部件传递到另一个小部件，有人可以帮我解释一下吗？

这是我的代码：

//Main.dart

import 'package:flutter/material.dart';

import './myTerminal.dart';
import './UserInput.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Terminal'),
        ),
        body: Column(
          children: <Widget>[
            MyTerminal(),
            UserInput(),
          ],
        ),

      ),
    );
  }
}

//MyTerminal.dart

import 'package:flutter/material.dart';

import './TerminalNodeclass.dart';

class MyTerminal extends StatefulWidget {
  @override
  _MyTerminalState createState() => _MyTerminalState();
}

class _MyTerminalState extends State<MyTerminal> {
  final List<Terminal> terminalNodes = [];



  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: terminalNodes.map((node) {
          return Card(
              child: Row(children: <Widget>[
            Container(
                child: Text(node.id, style: TextStyle(color: Colors.green))),
            Column(children: <Widget>[
              Text(node.source),
              Text(node.newstories.toString())
            ])
          ]));
        }).toList(),
      ),

    );
  }
}

//UserInput.dart

import 'package:flutter/material.dart';

class UserInput extends StatelessWidget {
  String idInput;
  String sourceInput;
  String newstoriesInput;



  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
              labelText: 'ID',
            ),
            onChanged: (val) {        // (val) is looking at the value in the textbox.
             idInput = val;
            },
          ),
          TextField(
            decoration: InputDecoration(
              labelText: 'Source',
            ),
            onChanged: (val) {
              sourceInput = val;
            },
          ),
          TextField(
            decoration: InputDecoration(
              labelText: 'New Stories',
            ),
            onChanged: (val) {  
              newstoriesInput = val;
            },
          ),
          FlatButton(child: Text('submit'), onPressed: () { print(idInput); },),
        ],
      ),
    );
  }
}

//TerminalClass

class Terminal {
  final String id;
  final String source;
  final int newstories;

  Terminal({
    this.id,
    this.source,
    this.newstories,
  });
}

Answer 1

您可以在下面复制粘贴运行完整代码您可以使用StreamController<Terminal>并收听Stream

StreamController<Terminal> events = StreamController<Terminal>();

class _MyTerminalState extends State<MyTerminal> {
  List<Terminal> terminalNodes = [];

  @override
  initState() {
    events.stream.listen((data) {
      terminalNodes.add(data);
      setState(() {});
    });
  }
...
FlatButton(
              child: Text('submit'),
              onPressed: () {
                events.add(Terminal(
                    id: idInput,
                    source: sourceInput,
                    newstories: newstoriesInput));
              },
            ),  

工作演示

完整代码

import 'package:flutter/material.dart';
import 'dart:async';

class Terminal {
  final String id;
  final String source;
  final int newstories;

  Terminal({
    this.id,
    this.source,
    this.newstories,
  });
}

class UserInput extends StatefulWidget {
  @override
  _UserInputState createState() => _UserInputState();
}

class _UserInputState extends State<UserInput> {
  String idInput;
  String sourceInput;
  int newstoriesInput;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Card(
        child: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                labelText: 'ID',
              ),
              onChanged: (val) {
                // (val) is looking at the value in the textbox.
                idInput = val;
              },
            ),
            TextField(
              decoration: InputDecoration(
                labelText: 'Source',
              ),
              onChanged: (val) {
                sourceInput = val;
              },
            ),
            TextField(
              decoration: InputDecoration(
                labelText: 'New Stories',
              ),
              onChanged: (val) {
                newstoriesInput = int.parse(val);
              },
            ),
            FlatButton(
              child: Text('submit'),
              onPressed: () {
                events.add(Terminal(
                    id: idInput,
                    source: sourceInput,
                    newstories: newstoriesInput));
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyTerminal extends StatefulWidget {
  @override
  _MyTerminalState createState() => _MyTerminalState();
}

StreamController<Terminal> events = StreamController<Terminal>();

class _MyTerminalState extends State<MyTerminal> {
  List<Terminal> terminalNodes = [];

  @override
  initState() {
    events.stream.listen((data) {
      terminalNodes.add(data);
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: Column(
          children: terminalNodes.map((node) {
            return Card(
                child: Row(children: <Widget>[
              Container(
                  child: Text(node.id, style: TextStyle(color: Colors.green))),
              Column(children: <Widget>[
                Text(node.source),
                Text(node.newstories.toString())
              ])
            ]));
          }).toList(),
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(flex: 1, child: MyTerminal()),
            Expanded(flex: 1, child: UserInput()),
          ],
        ),
      ),
    );
  }
}