Question

我有一个本地json文件，我能够检索到我需要的所有信息。但是，我似乎无法按照自己喜欢的方式显示它。我有一个名为list的列表，并希望将每个元素（每个字母）显示为一列，以便我可以使用填充显示它并更改字体。我试图创建一个类似于单词连接的游戏。

import 'dart:convert';

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  List data;

  @override
  Widget build(BuildContext context) {
    final title = 'Basic List';
    return new MaterialApp(
      title: title,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Load local JSON file"),
        ),
        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;        
                    }

                  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[index]['image'])
                              ]
                            ),
                              new Row(
                              children:listMyWidgets()
                            )
                          ],
                        ),
                      );
                    },
                    itemCount: newData == null ? 0 : newData.length,
                  );
                }),
          ),
        )


        ));
  }
}

类似的东西：

Answer 1

啊，我认为你所问的是GridView。

class GridViewWords extends StatelessWidget {
  List letters = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k"
  ];
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new GridView.count(
        shrinkWrap: true,
        crossAxisCount: 3,
        children: new List.generate(letters.length, (i)=>
        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])),
          ),
        )),

      ),

    );
  }
}

在新列上显示列表的每个元素

1 个答案: