时间戳

首页 > 解决方案 > 当用户单击 appBar 中的“+”号时，如何向 ListView 添加卡片？

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

问题描述

我正在开发一个颤振应用程序。现在，我没有太多，但我的问题是，如何通过单击 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（正文）。

标签： androidiosflutterdartmobile

解决方案

实现这一目标的步骤：

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

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

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

推荐阅读