Question

这是一张投影图，显示了我如何添加元素。

下面是我的代码，我想在其中添加元素，以便如果不存在我的列表，它也显示该元素，如果存在，则该元素是最后一个元素。

我已经尝试了一些不同的方式。

有人可以帮助我吗？

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'alllist.dart';
List<Alllist> _alllist = [];

List<Alllist> get alllist => _alllist;

class EduCategory extends StatefulWidget{
  final String listcategory;
  final int intp;
  EduCategory({this.listcategory,this.intp});

  @override
  EduCategoryState createState() {
    return new EduCategoryState();
  }
}

class EduCategoryState extends State<EduCategory> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(child:  new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
              widget.listcategory,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            new Row(
              children: <Widget>[
                new Icon(Icons.play_arrow),
                new Text("Watch All", style: TextStyle(fontWeight: FontWeight.bold))
              ],
            )
          ],
        ),
        Expanded(
            child: new Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child:new StreamBuilder<QuerySnapshot>(
                  stream: Firestore.instance.collection('all list').where("listcategory",isEqualTo: widget.listcategory).snapshots(),
                  builder: (BuildContext context,
                      AsyncSnapshot<QuerySnapshot> snapshot) {
                    if (!snapshot.hasData) return new Text("no");
                    if (snapshot.data.documents.length == 0) return InkWell(
                      child: Stack(
                        children: <Widget>[
                          new Container(
                            width: 80.0,
                            height: 80.0,
                            decoration: new BoxDecoration(
                              shape: BoxShape.rectangle,
                              border: Border.all(color: Colors.blueGrey),
                              borderRadius: BorderRadius.circular(5.0),
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new AssetImage("assets/Plus.png")),
                            ),
                            margin: const EdgeInsets.symmetric(horizontal: 20.0),
//                      child: Text(name),
                          ),
                          Padding(padding: EdgeInsets.only(top: 80.0,left: 20.0),
                            child: Text("Add Lession",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
                          ),
                        ],
                      ),
                      onTap: (){},
                    );
                   return new ListView(
                        scrollDirection: Axis.horizontal,
                        children: buildGrid(snapshot.data.documents)
                    );;
                  }
              ),

            ))
      ],
    ),

    );
  }

  List<Widget> buildGrid(List<DocumentSnapshot> documents) {
    List<Widget> _gridItems = [];
    _alllist.clear();

    for (DocumentSnapshot document in documents) {
      _alllist.add(Alllist.fromDocument(document));
    }

    for (Alllist alllist in _alllist) {
      _gridItems.add(buildGridItem(alllist));
    }

    return _gridItems;
  }
  Widget buildGridItem(Alllist alllist,) {

    return  widget.intp==0?
    InkWell(
      child:  Stack(
        children: <Widget>[
          new Container(
            width: 80.0,
            height: 80.0,
            decoration: new BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.blue,width: 4.0,style: BorderStyle.solid),
              image: new DecorationImage(
                  fit: BoxFit.fill,
                  image: new NetworkImage(
                      alllist.imageUrl)),
            ),
            margin: const EdgeInsets.symmetric(horizontal: 20.0),
//                      child: Text(name),
          ),
          Padding(padding: EdgeInsets.only(top: 80.0,left: 10.0),
            child: Text(alllist.title,style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
          ),
        ],
      ),
      onTap: (){},
    ):new Row(
        children: <Widget>[

          InkWell(
            child: Stack(
              children: <Widget>[
                new Container(
                  width: 80.0,
                  height: 80.0,
                  decoration: new BoxDecoration(
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.circular(5.0),
                    image: new DecorationImage(
                        fit: BoxFit.fill,
                        image: new NetworkImage(
                            alllist.imageUrl)),
                  ),
                  margin: const EdgeInsets.symmetric(horizontal: 20.0),
//                      child: Text(name),
                ),
                Padding(padding: EdgeInsets.only(top: 80.0,left: 10.0),
                  child: Text(alllist.title,style: TextStyle(fontWeight: FontWeight.bold,color: Colors.blueGrey),),
                ),
              ],
            ),
            onTap: (){},
          )
        ]
    );
  }
}

Answer 1

您可以将ListView.builder与 itemCount 用作snapshot.data.documents.length + 1。

代码示例：

    new StreamBuilder<QuerySnapshot>(
    stream: Firestore.instance.collection('all list').where("listcategory",isEqualTo: widget.listcategory).snapshots(),
    builder: (BuildContext context,
        AsyncSnapshot<QuerySnapshot> snapshot) {
      if (!snapshot.hasData) return new Text("no");
      var documentsLength = snapshot.data.documents.length;
      ListView.builder(itemCount: documentsLength + 1, // +1 for last element
          itemBuilder: (context, index) {
        if (index == documentsLength) {
          //last view which have plus button
        } else {
          return buildGridItem((Alllist.fromDocument(snapshot.data.documents[index]))
        }
      });
    })

Answer 2

我认为您只需要在以下代码中的itemBuilder结帐中添加条件；

import 'package:flutter/material.dart';

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

  class MyApp extends StatelessWidget {
    final List<int> items=[1,2,3,4,5,6];


    @override
    Widget build(BuildContext context) {
      final title = 'Mixed List';

      return MaterialApp(
        title: title,
        home: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Container(
            height: 100.0,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: items.length + 1 ,
              itemBuilder: (context, index) {
                if(index < items.length )
                 { return Container(
                  color: Colors.blue,
                  width: 100.0,
                  padding: EdgeInsets.all(8.0),
                  child: new Center(
                    child: new Text(index.toString()),
                  ),
                );
                 }
                else {
                  return new Container(
                    color: Colors.blue,
                    width: 100.0,
                    child: new Center(
                      child: new Text(index.toString() + "differnt"),
                    ),
                  );
                }
              },
            ),
          ),
        ),
      );
    }
  }

我想在水平listview之后添加一个新元素，如何添加它

2 个答案: