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

Question

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

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

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

Answer 1

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

• 列表显示

• 卡片

• 墨水井

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