flutter - Flutter:是否有可能将按钮值发送到文本字段？

Question

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



这是我的代码:

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

Answer 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!