flutter - 如何删除用户点击的地方

标签 flutter listview dart setstate

我正在尝试删除用户点击的应用,但它会删除最后一个列表项。
这部分是我要删除的地方。关于onTap功能。我将其设置为在索引处删除,我认为该索引应该是由项目生成器创建的int。

void _showPopupMenu(Offset offset, index) async {
  double left = offset.dx;
  double top = offset.dy;
  await showMenu(
    context: context,
    position: RelativeRect.fromLTRB(left, top, 10000, 0),
    items: [
      PopupMenuItem(
      value: 'Delete',
      child: ListTile(
        title: Text('Delete'),
        onTap: (){
            setState(() {
              checkBoxesCheckedStates.remove(index);
            });
        }
        ),
      ),
    ],
    elevation: 4.0,
  );
}
下一位是创建列表内容的位置。我有种感觉,不是必须将List bool更改为int,但我不是100%确定。
List<bool> checkBoxesCheckedStates = [false];
Widget build(BuildContext context) {
  return Column(
  children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: checkBoxesCheckedStates.length,
            itemBuilder: (BuildContext context, int index){
              return CheckboxListTile(
                  title: TextField(
                      autocorrect: true,
                    ),
                  value: checkBoxesCheckedStates[index],
                  secondary: GestureDetector(onTapDown: (TapDownDetails details){
                    _showPopupMenu(details.globalPosition, checkBoxesCheckedStates[index]);
                  },child: Icon(Icons.delete)),
                  onChanged: (bool newValue) {
                    setState(() {
                      checkBoxesCheckedStates[index] = newValue;
                    });
                  },);
            },
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: (){
              setState(() {
                checkBoxesCheckedStates.add(false);
              });
            },
            ),
        )
    ],
  );
}

最佳答案

您可以在下面复制粘贴运行完整代码
步骤1:您需要TextEditingController List来控制TextField并使用removeAt

List<TextEditingController> controllerList = [TextEditingController()];

onTap: () {
                setState(() {
                  checkBoxesCheckedStates.removeAt(index);
                  controllerList.removeAt(index);
                });
                
onPressed: () {
              setState(() {
                checkBoxesCheckedStates.add(false);
                controllerList.add(TextEditingController());
              });
            },              
步骤2:_showPopupMenu(details.globalPosition, index);只需传递index步骤3:Navigator.pop(context);关闭Delete工作演示
enter image description here
完整的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  List<bool> checkBoxesCheckedStates = [false];
  List<TextEditingController> controllerList = [TextEditingController()];

  void _showPopupMenu(Offset offset, index) async {
    print(index);
    double left = offset.dx;
    double top = offset.dy;
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(left, top, 10000, 0),
      items: [
        PopupMenuItem(
          value: 'Delete',
          child: ListTile(
              title: Text('Delete'),
              onTap: () {
                setState(() {
                  checkBoxesCheckedStates.removeAt(index);
                  controllerList.removeAt(index);
                });
                Navigator.pop(context);
              }),
        ),
      ],
      elevation: 4.0,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: checkBoxesCheckedStates.length,
            itemBuilder: (BuildContext context, int index) {
              return CheckboxListTile(
                title: TextField(
                  controller: controllerList[index],
                  autocorrect: true,
                ),
                value: checkBoxesCheckedStates[index],
                secondary: GestureDetector(
                    onTapDown: (TapDownDetails details) {
                      _showPopupMenu(details.globalPosition, index);
                    },
                    child: Icon(Icons.delete)),
                onChanged: (bool newValue) {
                  setState(() {
                    checkBoxesCheckedStates[index] = newValue;
                  });
                },
              );
            },
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              setState(() {
                checkBoxesCheckedStates.add(false);
                controllerList.add(TextEditingController());
              });
            },
          ),
        )
      ],
    );
  }
}

void main() {
  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Test(),
    );
  }
}

关于flutter - 如何删除用户点击的地方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63046454/

相关文章:

flutter - 如何在 flutter 中绘制自定义形状并拖动该形状?

generics - Dart:有限制地扩展了通用类

flutter - 是否必须克隆 flutter 存储库才能设置 Flutter

flutter - 推送返回空值

json - 如何在 Flutter 中解码 JSON?

Android:创建 ListView ,日期作为页眉,总数作为页脚

java - 无法从 AlertDialog 访问 ArrayAdapter

android - 使用共享首选项保存列表时遇到问题(仍然需要帮助)

android - Scaffold 主体中的有状态小部件

java - 适配器上的 arraylist.remove() 删除 ListView 中的错误项目