在 Flutter 中创建一个双向无限 ListView.builder

Posted 2023-02-23

【中文标题】在 Flutter 中创建一个双向无限 ListView.builder

【英文标题】：Create a bidirectional infinite ListView.builder in Flutter

【发布时间】：2021-06-27 01:21:26

【问题描述】：

我的意思是在两个轴上，水平和垂直。

我尝试嵌套两个ListView.builder，但它们没有按我的意愿滚动​​在一起。

class MyWidget extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        drawer: Drawer(),
        appBar: AppBar(),
        body: Container(
          child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, x) 
                return Container(
                  height: 50,
                  width: 50,
                  child: ListView.builder(
                    itemBuilder: (context, y) 
                      return Container(
                          height: 100, child: Text("$y.toString()"));
                    ,
                  ),
                );
              ),
        ));
  

我想到的可能解决方案：

让ListView.builders 一起滚动。但我认为该解决方案在性能方面可能效率不高，因为颤振仍将每一列视为单独的滚动条 创建一个有限的ListView.builder 并在必要时重建它以使幻觉成为无限。但这可能会给项目增加不必要的复杂性。 在垂直轴上添加NeverScrollableScrollPhysics 并使用另一个Widget 执行滚动。我没有尝试过。如果列表是有限的，那么该方法对我有用。

是否有任何适用于该应用程序的小部件我可能会丢失？ 还有其他更好的方法来创建类似的东西吗？

【参考方案1】：

DataTable（试试 Flutter Gallery “Data tables” 演示）和 Table. 支持二维滚动。也许尝试基于这些构建一个日程小部件。

【参考方案2】：

您可以在两个SingleChildScrollView 小部件内使用包裹DataTable 来实现双向滚动..

通过使用类似的东西

               SingleChildScrollView(
                  scrollDirection: Axis.vertical,
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: DataTable(
                        dataRowHeight: 50,
                        dividerThickness: 5,
                        horizontalMargin: 15,
                        columnSpacing: 13,
                        showBottomBorder: true,
                        headingRowColor: MaterialStateProperty.all<Color>(
                            Colors.blueGrey[100]),
                        columns: [
                          DataColumn(
                            label: Text(
                              "Module Name",
                              style: TextStyle(
                                // fontStyle: FontStyle.italic,
                                fontWeight: FontWeight.w600,
                                fontSize: 14,
                                color: Theme.of(context).highlightColor,
                              ),
                            ),
                            numeric: false,
                          ),
                       
                        ],
                        rows: data
                            .map((details) => DataRow(
                                  cells: [
                                    DataCell(
                                      Text(
                                        details.name,
                                      ),
                                    ),
                                  //list of cells: remenber the number of DataColumn and DataCell should be same
                                  ],
                                ))
                            .toList()),
                  ),
                );

要从 Internet 获取数据，您可以将第一个 SingleChildScrollView 包装为 FutureBuilder

PS：这里data 是从互联网获取的模块数据列表， 例如我只添加了一个DataColumn，您可以根据需要添加