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

Question

我是 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()
                    ),
                ),
              ],
            ),
      )
      );
  }
}

希望任何人都可以提供帮助，因为我正在尝试 3 天..

谢谢

Answer 1

不要将两个Container 添加到list，而是将包含两个Container 的Row 添加到列表中。
另外，您可能应该将ListView 中的Row 更改为Column
参考以下代码：
（我只是从您的代码中复制粘贴了一些内容，有很多更改，因此请仔细阅读。您必须进行更改以使其看起来更整洁并具有正确的名称等）

import 'package:flutter/material.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          centerTitle: true,
          title: Text("Votre SMARTY PARK"),
        ),
        body: MapPage(),
      ),
    );
  }
}

class MapPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MapPageState();
  }
}

class MapPageState extends State<MapPage> {
  var p1 = ["A0", "A1", "A2", "A3"];
  List<Widget> widgetlist = List();

  MapPageState() {
    getWidgets(widgetlist);
  }
  @override
  Widget build(BuildContext context) {
    double scwidth = MediaQuery.of(context).size.width;
    double scheight = MediaQuery.of(context).size.height;
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Container(
          height: scheight - kToolbarHeight - 24,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                  'https://images.wallpaperscraft.com/image/parking_cars_underground_131454_240x320.jpg'),
              fit: BoxFit.cover,
            ),
          ),
          child: ListView(
            children: widgetlist.map((element) {
              return element;
            }).toList(),
          ),
        )
      ],
    );
  }

  void getWidgets(List<Widget> wlist) {
    for (int i = 0; i < p1.length-1; i++) {
      wlist.add(Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          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'),
            ),
          )
        ],
      ));
    }
  }
}

输出：

Answer 2

你的方法应该返回一个行列表。你可以使用这个方法

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;

}

然后您可以使用 ListView 从您的 build() 调用它。

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