Flutter:如何使用Firebase对象的标头创建列表 [英] Flutter: how to create a List with header from a firebase object

问题描述

我在firebase中有一个包含子集合和文档的集合，我想在带有每个子集合的Header的ListView中显示此数据.以图片为例

在此示例中，我有3个子集合(A，B和C组)，其中包含一些文档，可以说一个文档，其中包含图像的URL和描述.

如何在Flutter中建立mi列表?

到目前为止，我设法将所有5个文档下载到Firebase对象列表中，并且能够按照以下方式构建列表

  List< DocumentSnapshot>itemDB = [];类_ItemListNewState扩展了State< ItemListNew>{@override窗口小部件build(BuildContext context){返回ListView(首要:错误，rinkWrap:是的，物理:ClampingScrollPhysics()，子级:itemDB.map(((DocumentSnapshot document){返回//带有图像和文本的行 

这很好，但是我没有标题.最好同时包含标题的方法是什么?

提前感谢开发人员！

解决方案

您可以在
下复制粘贴运行完整代码您可以使用软件包

完整代码

  import'package:flutter/material.dart';导入'package:grouped_list/grouped_list.dart';void main()=>runApp(MyApp());清单_elements = [{'name':'John'，'group':'Team A'}，{'name':'Will'，'group':'Team B'}，{'name':'Beth'，'group':'Team A'}，{'name':'Miranda'，'group':'B组'}，{'name':'Mike'，'group':'Team C'}，{'name':'Danny'，'group':'C队'}，];MyApp类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回MaterialApp(debugShowCheckedModeBanner:否，标题:"Flutter演示"，主题:ThemeData(primarySwatch:Colors.blue，)，家:脚手架(appBar:AppBar(标题:文本(分组列表视图示例")，)，正文:GroupedListView<动态，字符串>(groupBy:(element)=>element ['group']，元素:_elements，排序:正确，groupSeparatorBuilder:(字符串值)=>填充(填充:const EdgeInsets.all(8.0)，孩子:中心(子代:文字(价值，样式:TextStyle(fontSize:20，fontWeight:FontWeight.bold)，))，)，itemBuilder:(c，元素){退货卡(海拔:8.0，边距:新的EdgeInsets.symmetric(水平:10.0，垂直:6.0)，子代:集装箱(子代:ListTile(contentPadding:EdgeInsets.symmetric(水平:20.0，垂直:10.0)，开头:Icon(Icons.account_circle)，标题:文本(element ['name'])，尾随:Icon(Icons.arrow_forward)，)，)，);}，)，)，);}} 

I have a collection with subcollections and documents in firebase and I would like to present this data in a ListView with an Header for each subcollection. See the picture as an example

In this example I have 3 subcollections (group A, B and C) with some documents inside, let say a document which contain a url for an image and a description.

How can I build mi list in Flutter?

So far I managed to download all the 5 documents into a list of firebase objects and I am able to build the list as follow

List<DocumentSnapshot> itemDB = [];

class _ItemListNewState extends State<ItemListNew> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      primary: false,
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
      children: itemDB.map((DocumentSnapshot document) {
        return //a row with an Image and a Text

This is fine but I do not have the headers. What is the best way to include also the headers?

Thanks developers in advance!!

解决方案

You can copy paste run full code below
You can use package https://pub.dev/packages/grouped_list
code snippet

GroupedListView<dynamic, String>(
          groupBy: (element) => element['group'],
          elements: _elements,
          sort: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: Text(
              value,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        )

working demo

full code

import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';

void main() => runApp(MyApp());

List _elements = [
  {'name': 'John', 'group': 'Team A'},
  {'name': 'Will', 'group': 'Team B'},
  {'name': 'Beth', 'group': 'Team A'},
  {'name': 'Miranda', 'group': 'Team B'},
  {'name': 'Mike', 'group': 'Team C'},
  {'name': 'Danny', 'group': 'Team C'},
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grouped List View Example'),
        ),
        body: GroupedListView<dynamic, String>(
          groupBy: (element) => element['group'],
          elements: _elements,
          sort: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: Text(
              value,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

这篇关于Flutter:如何使用Firebase对象的标头创建列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！