如何从列表中删除任何小部件并在 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。所以您说的是：

remove the item in position number 1.

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

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

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

我还会告诉您，列表和选项一样，有一个 length 变量，它会自动更新并且与您的 option_var 完全相同，因此您可以改用它：

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

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

我喜欢将 setState 与显式赋值一起使用：

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

我会让选项成为一个 _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，并且始终从数组末尾删除。

更新后应该是这样的：

祝你项目顺利！

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

How to remove any widget from a list and set its state in flutter

cross-platform

dart

flutter

flutter-container