将GridTiles添加到List 动态

问题描述 投票:0回答:1

我有一个播放器列表,我想将此列表呈现给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'),
                )
            ),
          );
        }),
      ),
    );
  }
}
android dart flutter
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.