如何从列表中删除任何小部件并在 flutter 中设置其状态
在这里,我正在创建一个应用程序,其中包含用户可以创建民意调查的部分。因此,当我按下添加按钮时,选项容器会被添加,但是当我尝试通过按减号按钮删除选项容器时,它不起作用。有人可以帮我解决这个问题吗?这是我的大学项目。
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.
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
每次调用 setState 触发小部件重建时,option_var 都会重置为 1。在构建方法的顶部,设置 option_var< 的值时/strong>,改用:
这将反映集合中项目的准确数量,从而使您的计数保持同步。
然后,在删除代码中,只需执行以下操作:
在保持 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:
which will reflect the accurate number of items in the collection, thus keeping your count in sync.
Then, in your removal code, just do:
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:
Good luck in your project!
是的,我检查了代码,添加有效。删除时发生错误,该数字比必要的多了 1。
更改为 option_var-1 而不是 option_var
因此,o
让它发挥作用。
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
made it work.
好吧,发生这种情况的原因有很多,或者更确切地说,您的代码中发生了许多非常规的事情,所以我不确定仅更改其中之一是否可以修复该错误。
您必须更改的第一个明显的事情是:
假设您的列表中有一个项目,
options_var
应该等于 1。所以您是说:但请记住,列表从 0 开始计数,因此位置号 1 中的项目将是列表中的第二个项目。您应该使用位置 0。
解决此问题的一个简单方法是将
--
运算符移至设置状态之前。我还会告诉您,列表(如选项)有一个
length
变量,该变量会自动更新,并且其工作方式与您的option_var
完全相同,因此您可以使用它:您可以更改的另外两件事如下:
setState
与显式赋值一起使用:_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:
Imagine you have a single item on your list,
options_var
should be equal to 1. So you are saying: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.I will also let you know that lists, like options, have a
length
variable that gets updated automatically and works exactly the same as youroption_var
does, so you could use it instead:The other two things that you could change are as follows:
setState
with explicit assignments:_POLLState
variable, likeoption_var