在 flutter 中将两个 ListView 合并为一个

Question

我必须在我的 flutter 项目中列出项目，我需要使用 2 ListView依次查看它们，这里有更多详细信息：

列表

  List<List<theLineModel.Line>> moreThenOneLineList = [];
  List<Station> mutualStationsList = [];
  List<theLineModel.Line> oneLineList = [];

小部件

                           child: Column(
                                  children: <Widget>[
                                    Expanded(
                                      child: ListView(
                                        children: oneLineList.map((line) {
                                          return GestureDetector(
                                            onTap: () {
                                              Navigator.pushNamed(
                                                  context, '/line_details',
                                                  arguments: {
                                                    'line': line,
                                                    'oneLine': true,
                                                  });
                                            },
                                            child: Card(
                                              color: Colors.deepPurple,
                                              elevation: 8,
                                              child: Padding(
                                                padding:
                                                const EdgeInsets.all(8.0),
                                                child: Column(
                                                  children: <Widget>[
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceEvenly,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line
                                                              .transportationType}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line.startStation
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Icon(
                                                          Icons.arrow_downward,
                                                          color: Colors.white,
                                                          size: 30,
                                                        )
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line.endStation
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                      children: <Widget>[
                                                        Text(
                                                          "${line.price} ${S
                                                              .of(context)
                                                              .le}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                        Text(
                                                          "${line.notes}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          );
                                        }).toList(),
                                      ),
                                    ),
                                    Expanded(
                                      child: ListView(
                                        children: moreThenOneLineList
                                            .map((lineList) {
                                          return GestureDetector(
                                            onTap: () {},
                                            child: Card(
                                              color: Colors.blueAccent,
                                              elevation: 8,
                                              child: Padding(
                                                padding:
                                                const EdgeInsets.all(8.0),
                                                child: Column(
                                                  children: <Widget>[
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceEvenly,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[0]
                                                              .transportationType}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${chosenStations[0]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Icon(
                                                          Icons.arrow_downward,
                                                          color: Colors.white,
                                                          size: 30,
                                                        )
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${mutualStationsList[moreThenOneLineList
                                                              .indexOf(
                                                              lineList)]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[0]
                                                              .price} ${S
                                                              .of(context)
                                                              .le}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                        Text(
                                                          "${lineList[0]
                                                              .notes}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Icon(
                                                      Icons.arrow_downward,
                                                      color: Colors.white,
                                                      size: 30,
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceEvenly,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[1]
                                                              .transportationType}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${mutualStationsList[moreThenOneLineList
                                                              .indexOf(
                                                              lineList)]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Icon(
                                                          Icons.arrow_downward,
                                                          color: Colors.white,
                                                          size: 30,
                                                        )
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .center,
                                                      children: <Widget>[
                                                        Text(
                                                          "${chosenStations[1]
                                                              .stationName}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),
                                                    Row(
                                                      mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                      children: <Widget>[
                                                        Text(
                                                          "${lineList[1]
                                                              .price} ${S
                                                              .of(context)
                                                              .le}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                        Text(
                                                          "${lineList[1]
                                                              .notes}",
                                                          style: TextStyle(
                                                              color:
                                                              Colors.white,
                                                              fontSize: 20),
                                                        ),
                                                      ],
                                                    ),

                                                  ],
                                                ),
                                              ),
                                            ),
                                          );
                                        }).toList(),
                                      ),
                                    ),
                                  ],
                                ),

然后，由于两个列表都已添加到不同的ListView ，因此最后会导致空间和外观不佳的页面，请检查图像。

那么，知道如何将两个列表添加到单个 Listview 中吗？

Answer 1

您可以将两个List加入到一个ListView中，如下所示：

  Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              child: ListView(
                children: list1//list1 is a dummy list of String I created for demonstration
                    .map(
                      (listElement) => Text(//return your own widget instead of this
                        listElement,
                        style:
                            TextStyle(fontSize: 40, color: Colors.cyanAccent),
                      ),
                    )
                    .toList()
                      ..addAll(
                        list2.map(//list2 also is a dummy list of String I created for demonstration
                          (listElement) => Text(//return your own widget instead of this
                            listElement,
                            style: TextStyle(
                                fontSize: 40, color: Colors.cyanAccent),
                          ),
                        ),
                      ),
              ),
            ),
          ],
        ),
      ),

Answer 2

这是使列表视图更灵活的另一种方法： DartPad

使用...List连接多列表：

  Widget build(BuildContext context) {
    // Demo listview items
    List<String> list1 = [for (int i=0; i < 30;i++) i.toString()];
    List<String> list2 = [for (int i=30; i < 50;i++) i.toString()];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
            child: ListView(
            children:[
              // Some widgets here
              const Text('List1'),
              // list1 here
              ...list1.map((String text) => Text(text)).toList(),
              // Some widgets between them
              const Text('List2'),
              // list2 here
              ...list2.map((String text) => Text(text)).toList(),
            ],),
            ),
          ],
      ),
    );
  }