Question

我正在开发一个新的应用程序，它将以表格式列出数据库内容。就像我想在回收器视图中显示它一样，那里有4列，并且有单独的列头。我不知道如何在支持多列的控件中使用列表视图。

我尝试了以下替代方法

  Widget listViewWidget(List<DashboardResponse> dashboard) {
    var listView = ListView.builder(
            itemCount: dashboard.length,
            itemBuilder: (context, position) {
                    return new Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.max,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                            Flexible(
                                child: Text ('${dashboard[position].spvName}'),
                            ),
                            Flexible(
                                child: Text ('${dashboard[position].mobileCount}'),
                            ),
                            Flexible(
                                child: Text ('${dashboard[position].webCount}'),
                            ),
                        ],
                    );
            }
    );

    return listView;
}

另一种方式

        var listView = ListView.builder(
            itemCount: dashboard.length,
                    itemBuilder: (context, position) {
                        return ListTile(
                                title: Text(
                                    '${dashboard[position].spvName}',
                                    style: TextStyle(
                                            fontSize: 18.0,
                                            color: Colors.amber,
                                            fontWeight: FontWeight.bold),
                                ),
                        );
                    }
        );

        return listView;
    }




[![Multicolumn listview][1]][1]


  [1]: https://i.stack.imgur.com/EoVxy.jpg

Answer 1

对于ListView添加列标题需要格外小心，请参考此内容。 Flutter : Can I add a Header Row to a ListView 代码段

由itemBuilder返回标题为第一行：

SELECT * 
FROM table
WHERE colA = A AND colB = B AND colC = C

SELECT * 
FROM table
WHERE colB = B AND colA = A AND colC = C

您可以考虑使用DataTable实现

DataTable支持列标题，请检查以下示例。

完整代码

ListView.builder(
    itemCount: data == null ? 1 : data.length + 1,
    itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
            // return the header
            return new Column(...);
        }
        index -= 1;

        // return row
        var row = data[index];
        return new InkWell(... with row ...);
    },
);

Answer 2

尝试使用网格列表。点击链接https://flutter.dev/docs/cookbook/lists/grid-lists。希望能帮助到你。

如何在flutter中设计和实现多列列表视图？

2 个答案: