Flutter：Dismissible 小部件內的 SnackBar 無法正常工作

Question

My Home Screen 是一個Scaffold ，在其主體上有一個Dismissible小部件列表。 每個Dismissible的子項都是我創建的自定義小部件，名為Box 。 我有一個FloatingActionButton ，它將我帶到一個新屏幕，我可以在其中將更多Box es 添加到列表中。 （每個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),
            ),
          )
        ]));
  }
}

Answer 1

我認為問題在於您首先刪除了列表中的項目。 當您顯示 SnackBar 時，該項目已被刪除，因此您無法在列表中訪問它。 所以我建議先顯示 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]));
    },