如何删除特定索引中ListView中的小部件?
我已经找了好几个小时了,都找不到了。我有一个用这个构造函数构建的ListView ListView.builder 物品计数:5, itemBuilder:上下文,int索引{ 返回服务索引:索引,; }, , 现在在ServiceCard小部件中,我有一个按钮可以删除ListView树中的当前小部件,例如第三个ServiceCard小部件 尝试了许多无效的方法。我感到惊讶的是,即使是颤振文档也没有显示如何实现这种通用功能 我已经尝试给ListView一个变量,这样我就可以访问它并删除其中所需的小部件。不幸的是,没有这样的功能 我已经尝试给ListView一个准备好的ServiceCard小部件列表,然后我使用它的长度作为ListView的itemCounter。然后从指定的ServiceCard小部件上按钮的设置状态中的列表中删除项目 我尝试使用一种方法,该方法将索引作为参数,并且仅在当前索引等于已删除项的索引的情况下返回ServiceCard。不幸的是,这会删除最后一张服务卡,而不是指定的服务卡 以下是ServiceCard小部件:如何删除特定索引中ListView中的小部件?,listview,flutter,delete-row,Listview,Flutter,Delete Row,我已经找了好几个小时了,都找不到了。我有一个用这个构造函数构建的ListView ListView.builder 物品计数:5, itemBuilder:上下文,int索引{ 返回服务索引:索引,; }, , 现在在ServiceCard小部件中,我有一个按钮可以删除ListView树中的当前小部件,例如第三个ServiceCard小部件 尝试了许多无效的方法。我感到惊讶的是,即使是颤振文档也没有显示如何实现这种通用功能 我已经尝试给ListView一个变量,这样我就可以访问它并删除其中所需的
class ServiceCard extends StatefulWidget {
ServiceCard({this.index});
int index;
@override
_ServiceCardState createState() => _ServiceCardState();
}
class _ServiceCardState extends State<ServiceCard> {
void onFormSubmitted() {
var form = formKey.currentState;
if (form.validate()) {
form.save();
}
}
@override
Widget build(BuildContext context) {
int index = widget.index;
return Container(
height: 440,
child: Column(
children: <Widget>[
ExpandableRoundRectangleContainer(
widgetList: <Widget>[
Container(
height: 370,
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
//column for tow TextField with headers
Column(
children: <Widget>[
HeaderTextWithFormTextFieldAndSizedBox(
headerText: 'Service Name',
hintText: 'Write your service name here...',
autoFocus: true,
iconData: Icons.info_outline,
validatorFunction: (String value) {
if (value.length > 0 && value.length < 6) {
return '*Service name should be more than 5 letters';
} else if (value.length == 0) {
return '* Service name is required';
}
},
onSaved: (String value) {},
),
HeaderTextWithFormTextFieldAndSizedBox(
headerText: 'Service Description',
hintText: 'Write your service description here...',
autoFocus: false,
iconData: Icons.info_outline,
validatorFunction: (String value) {
if (value.length > 0 && value.length < 6) {
return '* Service description should be more than 5 letters';
} else if (value.length == 0) {
return '* Service description is required';
}
},
letterCount: 200,
maxLines: 3,
contentPadding: 13,
onSaved: (String value) {},
),
],
),
//only add the add service button when it is the last card
Visibility(
// visible: widget.index == serviceNamesList.length - 1 ,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: RoundButtonWithIconFix(
text: 'Add Another Service',
buttonWidth: 160,
buttonColor: kAppLightBlueColor,
onButtonPressed: () {},
icon: Icons.add_box,
color: Colors.white,
iconTextSpacing: 5,
iconSize: 25,
),
),
),
Positioned(
bottom: 50,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: RoundButtonWithIconFix(
text: 'Remove Service',
buttonWidth: 130,
buttonColor: kAppLightBlueColor,
onButtonPressed: () {
setState(() {
});
},
icon: Icons.delete,
color: Colors.white,
iconTextSpacing: 5,
iconSize: 25,
),
),
),
],
),
),
],
),
Visibility(
// visible: widget.index == serviceNamesList.length - 1 ,
child: DoneButton(
onPressed: onFormSubmitted,
),
),
],
),
);
}
}
您可以创建一个列表并将其传递给ListView,然后使用remove函数删除实际对象并调用setState{}刷新UI 以下是您可以运行的示例:
class StreamBuilderIssue extends StatefulWidget {
@override
_StreamBuilderIssueState createState() => _StreamBuilderIssueState();
}
class _StreamBuilderIssueState extends State<StreamBuilderIssue> {
List<ServiceCard> serviceCardList;
void removeServiceCard(index) {
setState(() {
serviceCardList.remove(index);
});
}
@override
void initState() {
super.initState();
serviceCardList = List.generate(
5, (index) => ServiceCard(removeServiceCard, index: index));
}
@override
Widget build(BuildContext context) {
print('build + ${serviceCardList.length}');
return Scaffold(
body: ListView(
children: <Widget>[...serviceCardList],
),
);
}
}
class ServiceCard extends StatelessWidget {
final int index;
final Function(ServiceCard) removeServiceCard;
const ServiceCard(this.removeServiceCard, {Key key, @required this.index})
: super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text(
'Index: ${index.toString()} Hashcode: ${this.hashCode.toString()}'),
RaisedButton(
color: Colors.accents.elementAt(3 * index),
onPressed: () {
removeServiceCard(this);
},
child: Text('Delete me'),
),
],
);
}
}
下面是显示其行为的gif
我展示了索引和hashcode,以表明它确实是在构建中删除的所需对象,您有一个索引,只需使用它从该索引中删除该项即可。你能展示一些代码吗,因为我已经尝试了很多方法,但仍然没有给出想要的方法。thanksHow您是否执行远程服务CardThis;在有状态的小部件中?