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

时间:2020-05-01 13:41:05

标签: flutter flutter-listview flutter-card

单击后,我想在列表视图中创建卡片时,列表视图将为空。

是否还可以创建动态主页?例如,当列表中没有任何卡时,它将在后台写入,因此还没有任何卡。但是,如果创建了卡,该指示将被删除。

关于这个主题,您能支持我吗?

2 个答案:

答案 0 :(得分:0)

您应该检查官方文档。学习起来并不难:

答案 1 :(得分:0)

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