动态将GridTiles添加到List <widget>

时间:2019-04-06 11:22:01

标签: android dart flutter

我有一个球员列表,我想将此列表呈现给GridTile Buttons。我怎样才能做到这一点?我已经尝试过执行将GridTiles作为列表返回的函数,但无法使其正常工作。我已经读过一些有关地图的内容。

我的方法是让按钮包含播放器的名称和编号。 (玩家是我创建的课程)

这是我的atm示例:

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    List<Player> players = new List<Player>();
    players.add(new Player("Tom", 10, "test"));
    players.add(new Player("Mike", 22, "test"));
    players.add(new Player("John", 33, "test"));

    List<Widget> list = new List<Widget>();
    list.add(new Text("Test"));
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Players'),
      ),
      body: new GridView.count(
        crossAxisCount: 4,
        children: new List<Widget>.generate(16, (index) {
          return new GridTile(
            child: new Card(
                color: Colors.blue.shade200,
                child: new Center(
                  child: new Text('tile $index'),
                )
            ),
          );
        }),
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:1)

尝试一下

class Players{
  int id;
  String name;
  Players({this.id,this.name});
  //Getters
  String get getName => name;
  int get getID => id;
}

class DemoPageGridTile extends StatelessWidget {

   List<Players> _listData = new List<Players>();

 DemoPageGridTile(){
   _generateList();
 }

  _generateList(){
    for(int i=0; i<45; i++){
      _listData.add(Players(id: i+1, name: "xyz_$i"));
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridTile example"),
      ),
      body: GridView.builder(
       gridDelegate:  new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      itemBuilder: (BuildContext context, int index) {
           return Container(
             margin: EdgeInsets.all(4.0),
             child: RaisedButton(
              onPressed: (){ print(_listData[index].id.toString()); },
              child: Text(_listData[index].getName),
            ),
           );
      },
        itemCount: _listData.length,
      ),
    );
  }
}

enter image description here