flutter - 如何从列表中删除任何小部件并在颤动中设置其状态

Question

在这里，我正在创建一个应用程序，其中包含一个用户可以通过该部分创建民意调查的部分。因此，当我按下添加按钮时，选项容器被添加，但是当我试图通过按下减号按钮删除选项容器时，它不起作用。有人可以帮我解决这个问题。这是我的大学项目。

import 'package:flutter/material.dart';
import 'package:note_app_demo/scaffold.dart';

List<Container> options = [
  Container(
    padding: EdgeInsets.all(15),
    child: TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
        hintText: 'Option 1',
      ),
    ),
  ),
];

class POLL extends StatefulWidget {
  const POLL({Key? key}) : super(key: key);

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

class _POLLState extends State<POLL> {
  int option_var = 1;
  @override
  Widget build(BuildContext context) {
    return SCAFFOLD(
      BODY: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.all(15),
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10)),
                  hintText: 'Write your question here',
                ),
              ),
            ),
            Column(
              children: options,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  child: GestureDetector(
                    onTap: () {
                      setState(() {
                        options.removeAt(option_var);
                      });
                      option_var--;
                    },
                    child: Icon(
                      Icons.remove_circle,
                      size: 60,
                    ),
                  ),
                ),
                Container(
                  child: GestureDetector(
                    onTap: () {
                      option_var++;
                      if (option_var < 9) {
                        setState(() {
                          options.add(
                            Container(
                              padding: EdgeInsets.all(15),
                              child: TextField(
                                decoration: InputDecoration(
                                  border: OutlineInputBorder(
                                      borderRadius: BorderRadius.circular(10)),
                                  hintText: 'Option $option_var',
                                ),
                              ),
                            ),
                          );
                        });
                      }
                    },
                    child: Icon(
                      Icons.add_circle,
                      size: 60,
                    ),
                  ),
                ),
              ],
            ),
            Container(
              child: GestureDetector(
                onTap: () {},
                child: Icon(
                  Icons.check_circle,
                  size: 60,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

是的，我检查了代码，添加有效。删除时发生错误，该数字比必要的多 1。

改成 option_var 代替了 option_var-1 因此 o

   onTap: () {
                       setState(() {
                         options.removeAt(option_var-1);
                       });
                       option_var--;
                     },

让它工作。

Answer 2

好的，所以发生这种情况的原因有很多，或者更确切地说，您的代码发生了许多非常规的事情，所以我不确定仅更改其中一个是否会修复错误。

您必须更改的第一个明显的事情是：

onTap: () {
  setState(() {
    options.removeAt(option_var);
  });
  option_var--;
},

想象一下，您的列表中有一个项目，options_var应该等于 1。所以您在说：

删除位置编号 1 中的项目。

但请记住，列表从 0 开始计数，因此第一个位置的项目将是列表中的第二个项目。您应该使用位置 0。

解决此问题的一种简单方法是将--操作符移动到设置状态之前。

onTap: () {
  option_var--;
  setState(() {
    options.removeAt(option_var);
  });
},

我还将让您知道，列表（如选项）有一个length自动更新的变量，并且与您的工作方式完全相同option_var，因此您可以使用它：

onTap: () {
  setState(() {
    options.removeAt(options.length-1);
  });
},

您可以更改的其他两件事如下：

1. 我喜欢setState与显式分配一起使用：

onTap: () {
  var _options = options.removeAt(options.length-1);
  setState(() {
    options = _options;
  });
},

2. 我会让选项成为一个_POLLState变量，比如option_var

Answer 3

每次调用setState触发小部件重建时，option_var都会重置为 1。在构建方法的顶部，当设置option_var的值时，请改用：

int option_var = options.length;

这将反映集合中项目的准确数量，从而使您的计数保持同步。

然后，在您的删除代码中，只需执行以下操作：

onPressed: () {
  setState(() {
     option_var--;
     options.removeAt(option_var);
  });         
},

在哪里保持option_var更新，并且总是从数组的末尾删除。

更新后应该是这样的：

祝你的项目好运！