如何通过 Flutter 上的按钮在列表视图中创建卡片？答案

【问题标题】：How to create a card in a listview with button press on Flutter?如何通过 Flutter 上的按钮在列表视图中创建卡片？
【发布时间】：2020-08-16 00:12:58
【问题描述】：

点击后Listview会为空我想在ListView上创建卡片flutter。

是否也可以创建动态主页？例如，当列表中没有任何卡片时，它将在背景上写入，则还没有任何卡片。但是，如果创建了卡片，则此指示将被删除。

你能就这个话题支持我吗？

【问题讨论】：

向我们展示您的尝试，这是非常基本的事情（您卡列表上的一个简单条件，例如cardList != null && cardList.length > 0 ? ListView(...) : Text("No card")）
谢谢。我会试试的
我的 Firestore 中有 3 个文档，每个查询都有照片和 2 个文本部分。当用户请求文档时，我希望您在卡片列表视图中显示。如果用户第二次请求检索数据，则列表将更新为 2 个请求的卡片。我怎样才能实现它？

标签： flutter flutter-listview flutter-card

【解决方案1】：

import 'package:flutter/material.dart';
    
    class ListScreen extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _ListScreenState();
    }
    
    class _ListScreenState extends State<ListScreen> {
      bool _isLoading = true;
      List<String> _items = [];
    
      @override
      void initState() {
        super.initState();
        _getListData();
      }
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            body: Container(
              margin: EdgeInsets.all(10),
              child: !_isLoading && _items.isEmpty
                  ? Center(
                      child: Text("No data found"),
                    )
                  : (_isLoading && _items.isEmpty)
                      ? Container(
                          color: Colors.transparent,
                          child: Center(
                            child: CircularProgressIndicator(
                              valueColor:
                                  AlwaysStoppedAnimation<Color>(Colors.pink),
                            ),
                          ),
                        )
                      : ListView.builder(
                          itemCount: _items.length,
                          itemBuilder: (context, index) {
                            return _createListRow(_items[index], index);
                          },
                        ),
            ),
          ),
        );
      }
    
      _createListRow(String item, int index) {
        return Card(
          elevation: 3,
          clipBehavior: Clip.hardEdge,
          margin: EdgeInsets.all(10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(item),
              FlatButton(
                child: Text("Delete"),
                onPressed: () {
                  setState(() {
                    _items.removeAt(index);
                  });
                },
              )
            ],
          ),
        );
      }
    
      _getListData() {
        //  Create dynamic list
        Future.delayed(Duration(milliseconds: 500));
        setState(() {
          _items.add("First");
          _items.add("Second");
          _items.add("Third");
          _isLoading = false;
        });
      }
    }

【讨论】：

【解决方案2】：

您应该查看官方文档。学习它并不难：

【讨论】：

好的，动态主页怎么样？
您可以检查您的列表是否为空或为空，如果它与您的问题中的@Yann39 cmets 类似，则返回一个Text 小部件