如何删除用户点击的位置

Posted 2023-02-23

【中文标题】如何删除用户点击的位置

【英文标题】：How to delete where user taps

【发布时间】：2020-11-12 17:15:23

【问题描述】：

我试图让我的应用删除用户点击的位置，但它会删除最后一个列表项。 这部分是我要删除的地方。关于 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,
  );

下一位是创建列表内容的位置。我有一种感觉，我可能不得不将它改为 int，而不是 List bool，但我不是 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】：

您可以在下面复制粘贴运行完整代码 第一步：你需要TextEditingControllerList来控制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

工作演示

完整代码

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(),
    );