dart - 如何从 Flutter 元素中读取数据

Question

我有下面的代码用于输入一些数据，我不知道如何处理它!

即我应该在IconButton 的onPressed 中写些什么，以便从所有元素(姓名、生日...)中读取数据？以及如何在 Dialog 中显示它以检查是否正确读取？

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  var _value=false;
  double _bodyHeight=0.0;

  void onchange(bool value) {
    setState(() {
      _value = value;
      this._bodyHeight = (value == true) ? 400.0 : 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey[500],
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new SingleChildScrollView(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
              child: new Container(
                height: 50.0,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    new Text("Select me pls"),
                    new Switch(value: _value, onChanged: (bool value) => onchange(value)),
                  ],
                ),
              ),
            ),
            new Card(
              child: new AnimatedContainer(
                child: new ListView(
                  children: <Widget>[
                      new ListTile(
                      leading: const Icon(Icons.person),
                      title: new TextField(
                        decoration: new InputDecoration(
                          hintText: "Name",
                        ),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.phone),
                      title: new TextField(
                        decoration: new InputDecoration(
                          hintText: "Phone",
                        ),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.email),
                      title: new TextField(
                        decoration: new InputDecoration(
                          hintText: "Email",
                        ),
                      ),
                    ),
                    const Divider(
                      height: 1.0,
                    ),
                    new ListTile(
                      leading: const Icon(Icons.label),
                      title: const Text('Nick'),
                      subtitle: const Text('None'),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.today),
                      title: const Text('Birthday'),
                      subtitle: const Text('February 20, 1980'),
                    ),
                      new IconButton(icon: const Icon(Icons.save),
                          onPressed: null

                        /* 
                        * 
                        *  What shall I write here to read the data in the elements
                        * 
                        * 
                        * 
                        * */

                      ),
                  ],
                ),
                curve: Curves.easeInOut,
                duration: const Duration(milliseconds: 500),
                height: _bodyHeight,
                // color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

一种方法是 TextField 使用一个名为 TextEditingController 的属性，它允许您访问 TextField 的值。

要显示一个对话框，您只需调用 showDialog()功能。

class TextFieldExample extends StatefulWidget {
  @override
  _TextFieldExampleState createState() => new _TextFieldExampleState();
}

class _TextFieldExampleState extends State<TextFieldExample> {
  TextEditingController c1;
  TextEditingController c2;
  @override
  void initState() {
      c1 = new TextEditingController();
      c2 = new TextEditingController();
      super.initState();
    }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TextField (
              controller: c1,
            ),
            new TextField(
              controller: c2,
            ),
            new OutlineButton(onPressed: () {
              showDialog(child: new AlertDialog(
                content: new Text("You entered ${c1.text} ${c2.text} ")
              ),
               context: context

              );
            },
            child: new Text("Show Dialog"),
            )
          ],
        ),
      ),
    );
  }
}