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

发布于 2025-01-11 04:48:57 字数 3337 浏览 0 评论 0原文

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

应用程序预览

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Here i am creating an app which contain a section through which a user can create a poll. So when i am pressing a add button options container get added but when i am trying to remove the option container by pressing the minus button it's not working. Can someone help me to fix this. This is my college project.

application preview

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

谷夏 2025-01-18 04:48:58

每次调用 setState 触发小部件重建时,option_var 都会重置为 1。在构建方法的顶部,设置 option_var< 的值时/strong>,改用:

int option_var = options.length;

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

然后,在删除代码中,只需执行以下操作:

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

在保持 option_var 更新的位置,并且始终从数组末尾删除。

更新后应该如下所示:

在此处输入图像描述

祝您的项目好运!

Every time you trigger the widget rebuild upon calling setState the option_var gets reset to 1. At the top of the build method, when setting the value of the option_var, use instead:

int option_var = options.length;

which will reflect the accurate number of items in the collection, thus keeping your count in sync.

Then, in your removal code, just do:

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

Where you keep the option_var updated, and you always remove from the end of the array.

It should look like this after the updates:

enter image description here

Good luck in your project!

失眠症患者 2025-01-18 04:48:58

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

更改为 option_var-1 而不是 option_var
因此,o

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

让它发挥作用。

Yes, I checked the code, the addition works. When deleting an error occurs that the number is 1 more than necessary.

Changed instead of option_var made option_var-1
Therefore o

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

made it work.

箜明 2025-01-18 04:48:58

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

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

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

假设您的列表中有一个项目,options_var 应该等于 1。所以您是说:

删除位置 1 中的项目。

但请记住,列表从 0 开始计数,因此位置号 1 中的项目将是列表中的第二个项目。您应该使用位置 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;
  });
},
  1. 我会将选项设置为 _POLLState 变量,例如 option_var

Ok, so there are many reasons why this might be happening, or rather there are many unconventional things going on with your code, so I am not sure if changing just one of them will fix the bug.

The first obvious thing you have to change is this:

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

Imagine you have a single item on your list, options_var should be equal to 1. So you are saying:

remove the item in position number 1.

But remember, lists count from 0, so the item in position number one would be the second item on your list. You should use position 0.

A simple way to fix this is to move the -- operator to before your set state.

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

I will also let you know that lists, like options, have a length variable that gets updated automatically and works exactly the same as your option_var does, so you could use it instead:

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

The other two things that you could change are as follows:

  1. I like to use setState with explicit assignments:
onTap: () {
  var _options = options.removeAt(options.length-1);
  setState(() {
    options = _options;
  });
},
  1. I would make options be a _POLLState variable, like option_var
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文