Flutter：“可关闭”小部件内的SnackBar无法正常工作

问题描述

“我的主屏幕”是一个Scaffold，其正文中包含dismissible个小部件列表。每个dismissible的孩子都是我创建的自定义窗口小部件，名为Box。我有一个FloatingActionButton，带我到新屏幕，可以在列表中添加更多Box。 （每个Box都将字符串作为参数，用作其标题）。

我希望方法ondismissed显示SnackBar并带有文本“（框的标题）已排除”。但是，这不能按预期方式工作。问题在于，它总是显示所包含的最后一个框的标题，而不是我刚刚解雇的那个框的标题。例如，如果我添加一个名为“ {Box 1”的Box，然后添加一个名为““ Box 2”的Box”，然后我关闭了“ Box 1”，则小吃店会显示“排除了Box 2” “。

我在做什么错了？

以下是相关代码：

import 'package:Flutter/material.dart';
import 'Box.dart';
import 'addCounter.dart';

class Home extends StatefulWidget {
  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {

  List<String> lista;

  void incrementLista(String novoItem) {
    print('$lista');
    setState(() {
      lista.add(novoItem);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counters'),backgroundColor: Colors.black,),body: ListView.builder(
        itemCount: lista.length,itemBuilder: (context,index) {
          return dismissible(
              background: Container(color: Colors.grey[800],child: Icon(Icons.delete,color: Colors.grey[100])),key: Key(lista[index]),ondismissed: (direction) {
                setState(() {
                  lista.removeAt(index);
                });
                Scaffold.of(context).showSnackBar(
                    SnackBar(content: Text(lista[index] + ' excluded.')));
              },child: Box(lista[index]));
        },floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.grey[1000],onpressed: () {
            //Navega para tela de adicionar tarefa
            Navigator.push(
                context,MaterialPageRoute(
                    builder: (context) => AddCounter(f: incrementLista)));
          },child: Icon(Icons.add,color: Colors.white)),floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,bottomNavigationBar: BottomNavigationBar(
        //backgroundColor: Colors.grey[50],unselectedItemColor: Colors.grey[700],items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.list),title: Text('List'),BottomNavigationBarItem(
            icon: Icon(Icons.insert_chart),title: Text('Chart'),],// currentIndex: _selectedindex,selectedItemColor: Colors.blue,//onTap: _onItemTapped,);
  }
}

这是addCounter.dart的代码：

import 'package:Flutter/material.dart';

class AddCounter extends StatefulWidget {
  final Function f;
  AddCounter({@required this.f});

  @override
  _AddCounterState createState() => _AddCounterState();
}

class _AddCounterState extends State<AddCounter> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Add a counter'),backgroundColor: Colors.blue,body: Column(children: [
          Padding(
            padding: EdgeInsets.all(15),child: TextField(
              controller: myController,decoration: Inputdecoration(
                  enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue,width: 2)),hintText: 'Type a name for the counter'),RaisedButton(
            color: Colors.green,onpressed: () {
              widget.f(myController.text);
              Navigator.pop(context);
            },child: Text(
              'Save',style: TextStyle(color: Colors.white),)
        ]));
  }
}

解决方法

我认为问题在于您首先删除了列表中的项目。显示SnackBar时，该项目已被删除，因此您无法在列表中访问它。因此，我建议先显示小吃栏，然后删除该项目。

例如：（在您的itemBuilder中）

return Dismissible(
          background: Container(color: Colors.grey[800],child: Icon(Icons.delete,color: Colors.grey[100])),key: Key(lista[index]),onDismissed: (direction) {
            Scaffold.of(context).showSnackBar(
                SnackBar(content: Text(lista[index] + ' excluded.')));

            setState(() {
              lista.removeAt(index);
            });
          },child: Box(lista[index]));
    },