当用户单击 appBar 中的“+”号时，如何向 ListView 添加卡片？

Posted 2023-03-12

【中文标题】当用户单击 appBar 中的“+”号时，如何向 ListView 添加卡片？

【英文标题】：How to add a Card to ListView when the user clicks a '+' sign in the appBar?

【发布时间】：2020-10-11 19:56:37

【问题描述】：

我正在开发一个颤振应用程序。现在，我没有太多，但我的问题是，如何通过单击 appBar 中的加号图标将卡片添加到列表（ListView）？代码：

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo'),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            tooltip: 'Add a todo card',
            onPressed: () `

            ,
          ),
        ],
      ),

这不是整个班级，而是你需要看到的东西。 我有我的 appBar 和我的 IconButton。 这就是我的一张卡片的样子，它是一个占位符：

        children: <Widget>[
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const ListTile(
                  leading: Icon(Icons.album),
                  title: Text('The Enchanted Nightingale'),
                  subtitle:
                      Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    TextButton(
                      child: const Text('BUY TICKETS'),
                      onPressed: () ,
                    ),
                    const SizedBox(width: 8),
                    TextButton(
                      child: const Text('LISTEN'),
                      onPressed: () ,
                    ),
                    const SizedBox(width: 8),
                  ],
                ),
              ],
            ),
          ),

我想将这种卡片（自定义）添加到 ListView（正文）。

【参考方案1】：

实现该目标的步骤：

创建一个无状态小部件以将您的 TodoCard 提取为单独的小部件。 创建一个小部件列表以将您的TodoCard 小部件保存在TodoScreen 中。 在initState 中添加一个TodoCard，以便在构建TodoScreen 后呈现一个 按下添加待办事项卡时，将TodoCard 添加到创建的小部件列表中并调用setState 以触发重建。 使用扩展运算符在ListView 中呈现TodoCard 小部件列表。

我以你的代码为例添加了一个演示：

TODOCARD 小工具

// create a stateless widget to extract your TodoCard
class TodoCard extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Card(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const ListTile(
            leading: Icon(Icons.album),
            title: Text('The Enchanted Nightingale'),
            subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              TextButton(
                child: const Text('BUY TICKETS'),
                onPressed: () ,
              ),
              const SizedBox(width: 8),
              TextButton(
                child: const Text('LISTEN'),
                onPressed: () ,
              ),
              const SizedBox(width: 8),
            ],
          ),
        ],
      ),
    );
  

待办事项屏幕

class TodoScreen extends StatefulWidget 
  @override
  _TodoScreenState createState() => _TodoScreenState();


class _TodoScreenState extends State<TodoScreen> 
  // create a list of widget to hold your TodoCard widgets
  List<Widget> _allCards = [];

  @override
  void initState() 
    super.initState();
    // add a single TodoCard so one will be rendered once the page is built
    _allCards.add(TodoCard());
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo'),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            tooltip: 'Add a todo card',
            onPressed: () 
              // when the add todo card is pressed, add a TodoCard to the list of widgets created and call setstate to trigger a rebuild
              setState(() 
                _allCards.add(TodoCard());
              );
            ,
          ),
        ],
      ),
      body: ListView(
        children: [
          // reder the list of TodoCard widgets using the spread operator
          ..._allCards,
        ],
      ),
    );
  

【讨论】：

你好。我想感谢您的解决方案，它有效。我只是想指出，如果我离开 Todoscreen 并访问另一个屏幕，然后返回 Todoscreen，我之前添加的不再存在。如何存储我之前拥有的 Cards 数量，以便 Flutter 使用正确数量的 Cards 重建屏幕？

如果您从TodoScreen 导航并返回到_allCards 列表，则会重新初始化。您可以通过存储在数据库中来保存卡片列表的状态。您可以在pub.dev@Banik 上查看Sqflite 或Hive