如何在 Flutter 上按下按钮在列表视图中创建卡片？

Question

点击后Listview为空我想在ListView on flutter中创建一个卡片

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

关于这个话题，你能支持我吗？

Answer 1

你应该查看官方文档。用它学习并不难:

• ListView

• Card

• InkWell

Answer 2

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;
        });
      }
    }