循环以使用Flutter生成2列的列表

时间:2019-12-24 17:12:42

标签: flutter dart visual-studio-code

我是Flutter的初学者,我需要做一个循环并生成一个包含仅2列行的小部件。
我尝试了太多不同的方法来做到这一点,但没有任何效果:/
当我在诸如for (var i = 0; i < p1.length-1; i+2)之类的代码中添加一个循环时,屏幕上什么都没有显示,并且全部变成白色。

这是我正在使用的代码:

class _MapPageState extends State<MapPage> {
 var p1= [
    "A0",
    "A1",
    "A2",
    "A3",
  ];
   List<Widget> getWidgets()
  {
    List<Widget> list = new List<Widget>();
    for(var i = 0; i < p1.length-1; i+2){
        list.add(new Container(
                        decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius:BorderRadius.circular(20.0)
                          ),
                          child: FlatButton(
                            child: Text(p1[i].toString(),style: TextStyle(color: Colors.white),),
                               onPressed:()=>print('hii1'),
                        ),
                      ),);
        list.add(new Container(
                        decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius:BorderRadius.circular(20.0)
                          ),
                          child: FlatButton(
                            child: Text(p1[i+1].toString(),style: TextStyle(color: Colors.white),),
                               onPressed:()=>print('hii2'),
                        ),
                      ),);
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        centerTitle: true,
        title: Text("Votre SMARTY PARK"),
      ),
      body:Container(
        decoration: BoxDecoration(
                image: DecorationImage(
                image: NetworkImage('https://images.wallpaperscraft.com/image/parking_cars_underground_131454_240x320.jpg'),
                fit: BoxFit.cover,
              ),),
        child: ListView(
              scrollDirection: Axis.vertical,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 80),
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: getWidgets()
                    ),
                ),
              ],
            ),
      )
      );
  }
}

And here is the style that I'm trying to make

希望任何人都可以帮助我尝试3天。

谢谢

2 个答案:

答案 0 :(得分:0)

不是将两个Container添加到list,而是将包含两个Row的{​​{1}}添加到列表。
此外,您可能应该将Container中的Row更改为ListView
请参考以下代码:
(我只是从您的代码中复制了一些内容,有很多更改,因此请仔细进行。您必须进行更改以使其看起来更整洁并具有正确的名称,等等。)

Column

输出:
enter image description here

答案 1 :(得分:0)

您的方法应返回行列表。您可以使用此方法

List<Row> getWidgets()
  {
    List<Row> list = new List<Row>();
    for(var i = 0; i < p1.length-1; i+=2){
        list.add(Row(
            mainAxisAlignment:MainAxisAlignment.spaceAround,
            children:[
                Container(
                        decoration: BoxDecoration(
                          color: Colors.green,
                          borderRadius:BorderRadius.circular(20.0)
                        ),
                        child: FlatButton(
                            child: Text(p1[i].toString(),
                                       style: TextStyle(
                                           color: Colors.white
                                       ),
                             ),
                             onPressed:()=>print('hii1'),
                        ),
                   ),
                   Container(
                        decoration: BoxDecoration(
                            color: Colors.green,
                            borderRadius:BorderRadius.circular(20.0)
                        ),
                        child: FlatButton(
                            child: Text(p1[i+1].toString(),
                                       style: TextStyle(
                                                  color: Colors.white
                                       ),
                             ),
                             onPressed:()=>print('hii2'),
                        ),
                   ),
            ]
        );
    );
}
    return list;

}

然后,您可以使用列表视图从build()调用它。

        ListView(
              scrollDirection: Axis.vertical,
              children:getWidgets()
            ),