如何删除特定索引中ListView中的小部件?

如何删除特定索引中ListView中的小部件?,listview,flutter,delete-row,Listview,Flutter,Delete Row,我已经找了好几个小时了,都找不到了。我有一个用这个构造函数构建的ListView ListView.builder 物品计数:5, itemBuilder:上下文,int索引{ 返回服务索引:索引,; }, , 现在在ServiceCard小部件中,我有一个按钮可以删除ListView树中的当前小部件,例如第三个ServiceCard小部件 尝试了许多无效的方法。我感到惊讶的是,即使是颤振文档也没有显示如何实现这种通用功能 我已经尝试给ListView一个变量,这样我就可以访问它并删除其中所需的

我已经找了好几个小时了,都找不到了。我有一个用这个构造函数构建的ListView

ListView.builder 物品计数:5, itemBuilder:上下文,int索引{ 返回服务索引:索引,; }, ,

现在在ServiceCard小部件中,我有一个按钮可以删除ListView树中的当前小部件,例如第三个ServiceCard小部件

尝试了许多无效的方法。我感到惊讶的是,即使是颤振文档也没有显示如何实现这种通用功能

我已经尝试给ListView一个变量,这样我就可以访问它并删除其中所需的小部件。不幸的是,没有这样的功能

我已经尝试给ListView一个准备好的ServiceCard小部件列表,然后我使用它的长度作为ListView的itemCounter。然后从指定的ServiceCard小部件上按钮的设置状态中的列表中删除项目

我尝试使用一种方法,该方法将索引作为参数,并且仅在当前索引等于已删除项的索引的情况下返回ServiceCard。不幸的是,这会删除最后一张服务卡,而不是指定的服务卡

以下是ServiceCard小部件:

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;在有状态的小部件中?