Question

我遵循了flutter网站上的启动名称生成器教程，没有问题。但是后来我想增加从已保存列表中删除单词对的功能。那也可行，但是当从列表中删除一个单词时，listview不会更新，我不得不回到主页并再次打开列表以查看效果。我在删除单词对的setState函数中搜索了一种更新listview的方法，但找不到任何东西。因此，在setstate中删除单词对后，我只是弹出路由并再次将其推入。谁能提出更好的方法？谢谢

Answer 1

您也许可以使用StreamBuilder来做到这一点。使用该参数，您的参数应如下所示：

stream: FirebaseDatabase.instance.reference().child(
      "profiles").onValue

如您所见，onValue会在您删除值时自动更新屏幕。

Answer 2

假设您刚刚使用了startup name generator tutorial中的main.dart，则只需修改_buildRow函数以添加一个删除按钮，然后该按钮将调用setState，然后像这样修改_suggestions列表：

Widget _buildRow(WordPair pair) {
    return ListTile(
        title: Text(
          pair.asPascalCase,
          style: _biggerFont,
        ),
        subtitle: RaisedButton(
            child: Text('delete'),
            onPressed: () {
              setState(() {
                _suggestions.remove(pair);
              });
            }));
  }

这是完整的main.dart：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords(),
    );
  }
}

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _biggerFont = const TextStyle(fontSize: 18.0);

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          // Add a one-pixel-high divider widget before each row in theListView.
          if (i.isOdd) return Divider();

          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    return ListTile(
        title: Text(
          pair.asPascalCase,
          style: _biggerFont,
        ),
        subtitle: RaisedButton(
            child: Text('delete'),
            onPressed: () {
              setState(() {
                _suggestions.remove(pair);
              });
            }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

Answer 3

我通过将已保存对的列表制成一个单独的有状态小部件来解决此问题。我知道这会在每次删除配对时刷新列表，但我认为这两个有状态小部件的状态之间的链接将会丢失，并且每当我从已保存的配对列表中删除配对时，就会删除另一个配对图标有状态的小部件不会更新。但是令人惊讶的是我错了。各州之间以某种方式联系在一起。我认为这是因为它们是同一堆栈上的两个有状态小部件。我开始非常喜欢扑打。

如何刷新路线页面

3 个答案: