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

Question

我正在开发一个 flutter 应用程序。现在，我没有太多，但我的问题是，如何通过单击 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: () {`

            },
          ),
        ],
      ),

这不是全部class，而是您需要看到的内容。我有我的 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（正文）。

Answer 1

实现步骤：

创建无状态小部件以将您的 TodoCard 提取为单独的小部件。
创建小部件列表以在 TodoScreen 中保存您的 TodoCard 小部件。
在 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,
        ],
      ),
    );
  }
}

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

How to add a Card to ListView when the user clicks a '+' sign in the appBar?

mobile

android

ios

dart

flutter