Flutter：是否有可能将按钮值发送到文本字段？答案

【问题标题】：Flutter: is there any possibility to send the button value to the text field?Flutter：是否有可能将按钮值发送到文本字段？
【发布时间】：2020-06-09 06:35:42
【问题描述】：

我正在编写一个小问答游戏，在其中我按下按钮，这些按钮将转到空白文本字段，我不知道如何将按钮的文本发送到文本字段。

这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: NinjaCard()));

class NinjaCard extends StatefulWidget {
  @override
  _NinjaCardState createState() => _NinjaCardState();
}

class _NinjaCardState extends State<NinjaCard> {
  String result = "";
  String shaka = "";
  var text;
  String str;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text('Animals'), backgroundColor: Colors.green),
      body: Padding(
        padding: EdgeInsets.all(15),
        child: Column(
          children: <Widget>[
            Center(
              child: Image.asset('lib/photo-1495594059084-33752639b9c3.jpg'),
            ),
            SizedBox(width: 10, height: 10),
            Row(children: <Widget>[
              Container(
                color: Colors.grey,
                width: 40.0,
                child: Text('$result', style: TextStyle(fontSize: 10.0, height: 2.0, color: Colors.black)),
              ),
              SizedBox(width: 10),
              Container(
                color: Colors.grey,
                width: 40.0,
                child: Text('$shaka', style: TextStyle(fontSize: 10.0, height: 2.0, color: Colors.black)),
              ),
              SizedBox(width: 15),
              Row(
                children: <Widget>[
                  SizedBox(
                    width: 50,
                    child: RaisedButton(
                      onPressed: () {},
                      color: Colors.green,
                      splashColor: Colors.red,
                      child: Text('S', style: TextStyle(backgroundColor: Colors.green, fontSize: 20, color: Colors.white)),
                    ),
                  ),
                  SizedBox(width: 15),
                  SizedBox(
                    width: 50,
                    child: RaisedButton(
                      onPressed: () {},
                      color: Colors.green,
                      splashColor: Colors.red,
                      child: Text('T', style: TextStyle(backgroundColor: Colors.green, fontSize: 20, color: Colors.white)),
                    ),
                  ),
                  SizedBox(width: 15),
                ],
              ),
            ]),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

我想这就是你要找的东西：flutter.dev/docs/cookbook/navigation/passing-data
我认为您在这里尝试完成的是用分配给按钮的字母或值填充下一个可用文本框？
如果我理解正确，你想实现这样的效果：有一些带有不同文本的按钮，在按下这些按钮时，你希望将值写在文本字段中的按钮上，对吧？

标签： flutter dart navigation

【解决方案1】：

在一个简单的情况下，我会使用有状态的小部件和字母数组。当然，它可以动态创建和调整大小，下面我只解释一些简化的基本思想（没有重复检查，没有洗牌）：

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App',
      home: GuessTheWordWidget(),
    );
  }
}

class GuessTheWordWidget extends StatefulWidget {
  @override
  _GuessTheWordWidgetState createState() => _GuessTheWordWidgetState();
}

class _GuessTheWordWidgetState extends State<GuessTheWordWidget> {
  String _word = 'Goldfish';
  List<String> _input = List.generate(8, (_) => '');
  int _position = 0;

  void _press(int rune) {
    setState(() {
      if (_position < _input.length) {
        print('Position ${_position}, rune: ${String.fromCharCode(rune)}');
        _input[_position++] = String.fromCharCode(rune);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App'),
      ),
      body: Center(
          child: Column(children: <Widget>[
        Expanded(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _input
                    .map((letter) => Container(
                          margin: const EdgeInsets.all(15.0),
                          padding: const EdgeInsets.all(3.0),
                          decoration: BoxDecoration(
                              border: Border.all(color: Colors.blueAccent)),
                          child: Text(letter),
                        ))
                    .toList())),
        Expanded(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _word.runes
                    .map((rune) => RaisedButton(
                          onPressed: () => _press(rune),
                          child: Text(String.fromCharCode(rune),
                              style: TextStyle(fontSize: 20)),
                        ))
                    .toList())),
      ])),
    );
  }
}

去 DartPad 玩这个代码：https://dartpad.dev/69bae58772305c74f1688193076ecaef！

【讨论】：