Question

我有一个ListView，我将在其中动态添加一些相同类型的子级。每个子小部件内都有一个按钮。我要实现的是，当用户按下子窗口小部件上的按钮时，该子窗口小部件将从ListView中删除。我可以使用事件在C＃中做到这一点，但对于Dart和Flutter来说，我是完全不懂。

这是我的ListView

Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text('Edit Plan'),
          backgroundColor: Colors.green,
          actions: <Widget>[
            Builder(
              builder: (context) => IconButton(
                    icon: Icon(Icons.add),
                    onPressed: () {
                      setState(() {
                        txts.add('set');
                      });
                    },
                  ),
            )
          ],
        ),
        backgroundColor: Colors.white,
        body: ListView(
           children: txts.map((string) =>
               new ListViewItem()).toList(growable: false),
        ),
    );
}

这是我的listViewItem：

    class ListViewItem extends StatelessWidget {
  final Workout workout;

  ListViewItem({Key key, @required this.workout})
      : assert(workout != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final theme = Theme.of(context);
    return Padding(
      padding: EdgeInsets.all(12),
      child: Card(
          elevation: 12,
          color: Colors.green,
          child: Padding(
            padding: EdgeInsets.only(top: 4, bottom: 4, left: 8, right: 8),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const ListTile(
                  leading: Icon(Icons.album),
                  title: Text(
                    'The Enchanted Nightingale',
                    style: TextStyle(color: Colors.white),
                  ),
                  subtitle: Text(
                    'Music by Julie Gable. Lyrics by Sidney Stein.',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                TextFormField(
                  decoration: InputDecoration(
                      labelText: 'Name your workout',
                      labelStyle: TextStyle(color: Colors.white)),
                ),
                ButtonTheme.bar(
                  // make buttons use the appropriate styles for cards
                  child: ButtonBar(
                    children: <Widget>[
                      FlatButton(
                        child: const Text(
                          'DELETE',
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )),
    );
  }
}

Answer 1

我已编辑您的代码以使用ListView.builder，您需要从正在使用的列表（txt）中删除索引处的项目，您的代码如下：

  List<String> txts = List();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit Plan'),
        backgroundColor: Colors.green,
        actions: <Widget>[
          Builder(
            builder: (context) =>
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    setState(() {
                      txts.add('set');
                    });
                  },
                ),
          )
        ],
      ),
      backgroundColor: Colors.white,
      body: new ListView.builder(
        itemCount: txts.length,
        itemBuilder: (BuildContext context, int index) {
          return ListViewItem(
            workout: workout,
            onDelete: (){
              setState(() {
                txts.removeAt(index);
              });
            },
          );
        },
      ),
    );
  }

除了需要在ListViewItem中添加ondelete回调外，ListViewItem类中的代码如下：

class ListViewItem extends StatelessWidget {
  final Workout workout;
  final VoidCallback onDelete;

  ListViewItem({Key key, @required this.workout, this.onDelete})
      : assert(workout != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {

    final theme = Theme.of(context);
    return Padding(
      padding: EdgeInsets.all(12),
      child: Card(
          elevation: 12,
          color: Colors.green,
          child: Padding(
            padding: EdgeInsets.only(top: 4, bottom: 4, left: 8, right: 8),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const ListTile(
                  leading: Icon(Icons.album),
                  title: Text(
                    'The Enchanted Nightingale',
                    style: TextStyle(color: Colors.white),
                  ),
                  subtitle: Text(
                    'Music by Julie Gable. Lyrics by Sidney Stein.',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                TextFormField(
                  decoration: InputDecoration(
                      labelText: 'Name your workout',
                      labelStyle: TextStyle(color: Colors.white)),
                ),
                ButtonTheme.bar(
                  // make buttons use the appropriate styles for cards
                  child: ButtonBar(
                    children: <Widget>[
                      FlatButton(
                        child: const Text(
                          'DELETE',
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () =>onDelete(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )),
    );
  }
}

如何从ListView中删除被按下的孩子

1 个答案: