Flutter 回调 - 从子列表中删除一个小部件

Question

我有这个应用程序，您可以在其中输入一些文本并按下一个按钮，将此文本添加到自定义小部件中。这是代码:

import 'dart:core';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;
  TextEditingController noteSend = TextEditingController();
  List<String> noteString = [];

  @override
  Widget build(BuildContext context) {
    List<Widget> children = new List.generate(
        count,
        (int i) => new InputWidget(i,
            noteRec: noteString[i], noteString: noteString, count: count));

    return new Scaffold(
        appBar: new AppBar(title: new Text('some title')),
        body: Column(
          children: <Widget>[
            Container(
              child: TextField(
                controller: noteSend,
              ),
              color: Colors.lightBlueAccent,
              width: 150,
              height: 50,
            ),
            Expanded(
              child: ListView(
                children: children,
                scrollDirection: Axis.vertical,
              ),
            ),
          ],
        ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          onPressed: () {
            setState(() {
              noteString.insert(
                noteString.length,
                noteSend.text,
              );
              count = count + 1;
            });
          },
        ));
  }
}

class InputWidget extends StatefulWidget {
  final int index;
  final String noteRec;
  final List<String> noteString;
  final int count;

  InputWidget(this.index, {Key key, this.noteRec, this.noteString, this.count})
      : super(key: key);

  @override
  _InputWidgetState createState() => _InputWidgetState();
}

class _InputWidgetState extends State<InputWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        //                            <-- onLongPress
        setState(() {
          widget.noteString.removeAt(widget.index);
        });
      },
      child: new Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          children: <Widget>[
            Column(
              children: <Widget>[
                Icon(
                  Icons.image,
                  size: 75,
                )
              ],
            ),
            Container(
              margin: EdgeInsets.only(left: 80, right: 30),
              child: Column(
                children: <Widget>[
                  Text('Note'),
                ],
              ),
            ),
            Column(
              children: <Widget>[
                Text("${widget.noteRec}"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

我尝试将自定义包装在手势检测器中，然后添加一个 onLongPress 以删除索引处的小部件，但它不起作用。如何删除我长按的小部件？谢谢

Answer 1

对于这种情况，您需要使用回调。由于变量的范围，您不能直接从 InputWidget() 中的 noteString 中删除变量，但是，它必须由 InputWidget 触发，因为索引信息包含在该小部件中并且必须使用从 noteString 列表中删除项目，以及从子列表中删除 InputWidget。因此，现在是回调时间。

回调是这样工作的:1. 定义一个将接收子函数的变量。

final Function(int) onDelete;

2。调用child中的函数，传入需要的变量:

onLongPress: () {
        widget.onDelete(widget.index);
      },

3。在父级中定义您想在父级中使用的函数，然后将其传递给子级:

Function(int) onDeleteVar = (int val) {
  setState(
    () => {
      noteString.removeAt(val),
      count--,
      children.removeAt(val),
    },
  );
};

children = List.generate(
    count,
    (int i) => new InputWidget(i,
        noteRec: noteString[i],
        noteString: noteString,
        count: count,
        onDelete: onDeleteVar));

这是一个飞镖板，可以看到它的实际效果: http://dartpad.dev/a25e9c402a90fefc778bcfac27aee242

代码如下:

import 'dart:core';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int count = 0;
  TextEditingController noteSend = TextEditingController();
  List<String> noteString = [];

  @override
  Widget build(BuildContext context) {
    List<Widget> children;
    Function(int) onDeleteVar = (int val) {
      setState(
        () => {
          print("noteStringBefore: $noteString"),
          print('childrenBefore: $children'),
          print(val),
          noteString.removeAt(val),
          count--,
          children.removeAt(val),
          print("noteStringAfter: $noteString"),
          print('childrenAfter $children'),
        },
      );
    };

    children = List.generate(
        count,
        (int i) => new InputWidget(i,
            noteRec: noteString[i],
            noteString: noteString,
            count: count,
            onDelete: onDeleteVar));

    return new Scaffold(
        appBar: new AppBar(title: new Text('some title')),
        body: Column(
          children: <Widget>[
            Container(
              child: TextField(
                controller: noteSend,
              ),
              color: Colors.lightBlueAccent,
              width: 150,
              height: 50,
            ),
            Expanded(
              child: ListView(
                children: children,
                scrollDirection: Axis.vertical,
              ),
            ),
          ],
        ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          onPressed: () {
            setState(() {
              noteString.insert(
                noteString.length,
                noteSend.text,
              );
              count = count + 1;
            });
          },
        ));
  }
}

class InputWidget extends StatefulWidget {
  final int index;
  final String noteRec;
  final List<String> noteString;
  final int count;
  final Function(int) onDelete;

  InputWidget(this.index,
      {Key key, this.noteRec, this.noteString, this.count, this.onDelete})
      : super(key: key);

  @override
  _InputWidgetState createState() => _InputWidgetState();
}

class _InputWidgetState extends State<InputWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        //                            <-- onLongPress
        widget.onDelete(widget.index);
      },
      child: new Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          children: <Widget>[
            Column(
              children: <Widget>[
                Icon(
                  Icons.image,
                  size: 75,
                )
              ],
            ),
            Container(
              margin: EdgeInsets.only(left: 80, right: 30),
              child: Column(
                children: <Widget>[
                  Text('Note'),
                ],
              ),
            ),
            Column(
              children: <Widget>[
                Text("${widget.noteRec}"),
              ],
            ),
          ],
        ),
      ),
    );
  }
}