点按，在不同位置显示值

Question

我试图创建一个文字游戏。我有一个本地json文件，我从中检索数据。我能够检索数据并将其显示在第一行。我想要做的是点击一个块（在第一行），获取值并在第二行按顺序显示它。

我能够检索该值，但我无法在第二行显示该值。我通过在控制台中打印值来测试它。

更新代码：

 body: new Container(
              child: new Center(
// Use future builder and DefaultAssetBundle to load the local JSON file
                child: new FutureBuilder(
                    future: DefaultAssetBundle
                        .of(context)
                        .loadString('data_repo/starwars_data.json'),
                    builder: (context, snapshot) {
                      var newData = JSON.decode(snapshot.data.toString());
                      List<Widget> listMyWidgets() {
                        List<Widget> list = new List();
                        for (var i = 0; i < newData.length; i++) {
                          var word = newData[i]['word']["letters"];
                          for (var n = 0; n < word.length; n++) {
                            list.add(new Text(word[n]['letter']));
                          }
                        }
                        return list;
                      }

                      List letters = [];
                      for (int i = 0; i < listMyWidgets().length; i++) {
                        var listMyWidgetsToString =
                            listMyWidgets()[i].toString();
                        var listWidgetToList =
                            listMyWidgetsToString.replaceAll('Text("', "");
                        var completeWordList =
                            listWidgetToList.replaceAll('")', "");
                        letters.add(completeWordList);
                      }
                      return new ListView.builder(
                        itemBuilder: (BuildContext context, int index) {
                          return new Card(
                            child: new Column(
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: [
                                new Column(children: [
                                  new Image.asset(newData[0]['image'])
                                ]),
                                new GridView.count(
                                  shrinkWrap: true,
                                  crossAxisCount: listMyWidgets().length,
                                  children: new List.generate(
                                      listMyWidgets().length,
                                      (i) => new GestureDetector(
                                            onTap: () {
                                              final int wordLength =
                                                  5; //this is a ref to the lenght of the word so you do not keep adding tiles
                                              setState(() {
                                                (letters.length + 1) <=
                                                        wordLength * 2
                                                    ? letters.add(letters[i])
                                                    : null;
                                              });
                                            },
                                            child: new Card(
                                              elevation: 5.0,
                                              color: Colors.brown[500],
                                              child: new Padding(
                                                padding:
                                                    const EdgeInsets.all(8.0),
                                                child: new Center(
                                                    child:
                                                        new Text(letters[i])),
                                              ),
                                            ),
                                          )),
                                ),
                              ],
                            ),
                          );
                        },
                        itemCount: newData == null ? 0 : newData.length,
                      );
                    }),
              ),
            )

Answer 1

这取决于您希望如何构建数据。在这个例子中，我只是将按下的字母添加到该单词的相同数组中，它将完成这项工作。

请注意，我保留了一个引用（您可以添加到JSON中），这是该单词的初始长度，因此在使用所有字母时它会停止添加tile。

您还需要StatefulWidget才能使其正常工作

可能有一种更好的方法来解决这个问题，但这就是我设法做的事情。

  class GridViewWords extends StatefulWidget {

      @override
      GridViewWordsState createState() {
        return new GridViewWordsState();
      }
    }

    class GridViewWordsState extends State<GridViewWords> {
      List letters = [
        "A",
        "M",
        "C",
        "I",
        "C"

      ];
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          body: new GridView.count(
            shrinkWrap: true,
            crossAxisCount: 5,
            children: new List.generate(letters.length, (i)=>
            new GestureDetector(
                onTap: (){
                  final int wordLength =5; //this is a ref to the lenght of the word so you do not keep adding tiles
                  setState((){
                  (letters.length+1)<=wordLength*2? letters.add(letters[i]):null;

                  });
                  },
                child: new Card(
                elevation: 5.0,
                color: Colors.brown[500],
                child: new Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: new Center(child: new Text(letters[i])),
                ),
              ),
            )),

          ),

        );
      }
    }