setState 没有在 Dart / Flutter 中重新加载状态?

2024-05-05

我遵循了 Google CodeLabs 的 Flutter 教程 -

Part 1 https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1

Part 2 https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2

然后我尝试添加共享首选项 https://pub.dartlang.org/packages/shared_preferences保存数据。保存数据可以正常工作,但删除则不行。

我的完整代码位于https://github.com/deadcoder0904/flutter-startup-name-generator/ https://github.com/deadcoder0904/flutter-startup-name-generator/

屏幕 1(列出所有启动名称)

屏幕 2(此处显示屏幕 1 中所有已保存的启动名称)

On Screen 2,通过单击垃圾桶图标删除启动名称不会立即删除数据。我必须穿越到Screen 1并再次返回Screen 2查看正在删除的项目。

错误是在setState下面或者您也可以查看在 Github 上 https://github.com/deadcoder0904/flutter-startup-name-generator/blob/master/lib/main.dart#L117-L121具有良好的格式

void _pushSaved() {
    Navigator.of(context).push(
        MaterialPageRoute<void>(
            builder: (BuildContext context) {
                final Iterable<ListTile> tiles = _saved.map(
                    (String word) {
                        return ListTile(
                            title: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                    Text(
                                        word,
                                        style: _biggerFont,
                                    ),
                                    IconButton(
                                        icon: const Icon(Icons.delete),
                                        onPressed: () {
                                            setState(() {
                                                _saved.remove(word);
                                                savePrefs(_saved);
                                            });
                                        },
                                    )
                                ],
                            ),
                        );
                    },
                );

                final List<Widget> divided = ListTile.divideTiles(
                    context: context,
                    tiles: tiles,
                ).toList();

                return Scaffold(
                    appBar: AppBar(
                        title: const Text('Saved Suggestions'),
                    ),
                    body: ListView(children: divided),
                );
            },
        ),
    );
}

_saved.remove(word); inside setState不会立即删除启动名称。

我应该制作另一个有状态组件吗?我该如何解决?


那是因为您在构建器中创建的小部件不是Stateful.

创建一个StatefulWidget并从MaterialPageRoute.

只需进行一些更改:

void _pushSaved() {
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context) => FavoriteList(
            data: _saved, savePrefs: savePrefs, biggerFont: _biggerFont),
      ),
    );
  }

创建一个新的StatefulWidget

class FavoriteList extends StatefulWidget {
  final Set<String> data;
  final Function savePrefs;
  final TextStyle biggerFont;
  FavoriteList({Key key, this.data, this.savePrefs, this.biggerFont})
      : super(key: key);

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

class _FavoriteListState extends State<FavoriteList> {
  Set<String> _saved;
  Future<SharedPreferences> _prefs = SharedPreferences.getInstance();

  @override
  void initState() {
    _saved = widget.data;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final Iterable<ListTile> tiles = _saved.map(
      (String word) {
        return ListTile(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                word,
                style: widget.biggerFont,
              ),
              IconButton(
                icon: const Icon(Icons.delete),
                onPressed: () {
                  setState(() {
                    _saved.remove(word);
                    widget.savePrefs(_saved);
                  });
                },
              )
            ],
          ),
        );
      },
    );

    final List<Widget> divided = ListTile.divideTiles(
      context: context,
      tiles: tiles,
    ).toList();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Saved Suggestions'),
      ),
      body: ListView(children: divided),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

setState 没有在 Dart / Flutter 中重新加载状态? 的相关文章

随机推荐