每次我重新访问 BottomNavigationbar 中的页面时更新页面

Question

在我的应用中，用户可以在底部导航栏的不同页面上存储喜欢的项目。我的问题是页面没有正确刷新。如果您添加收藏夹，它只会在重新启动应用程序时显示。如果收藏夹页面与相应的 bottomnavitem 位于相同的小部件层次结构中，则该功能可以正常工作。

https://pastebin.com/nZ2jrLqK

    class Favorites extends StatefulWidget {
  const Favorites({Key? key}) : super(key: key);

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

class _FavoritesState extends State<Favorites> {
  // ignore: prefer_typing_uninitialized_variables
  var database;
  List<Mechanism> people = <Mechanism>[];

  Future initDb() async {
    database = await openDatabase(
      join(await getDatabasesPath(), 'person_database.db'),
      onCreate: (db, version) {
        return db.execute(
          "CREATE TABLE person(id INTEGER PRIMARY KEY,  name TEXT, height TEXT, mass TEXT, hair_color TEXT, skin_color TEXT, eye_color TEXT, birth_year TEXT, gender TEXT)",
        );
      },
      version: 1,
    );

    getPeople().then((value) {
      setState(() {
        people = value;
      });
    });
  }

  Future<List<Mechanism>> getPeople() async {
    final Database db = await database;

    final List<Map<String, dynamic>> maps = await db.query('person');
    return List.generate(maps.length, (i) {
      return Mechanism(
        id: maps[i]['id'],
        name: maps[i]['name'] as String,
      );
    });
  }


  @override
  void initState() {
    super.initState();
    initDb();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backGround,
      appBar: AppBar(
        backgroundColor: appbarColor,
        title: const Text("Favorites"),
      ),
      body: ListView.builder(
          itemCount: people.length,
          itemBuilder: (context, index) {
            var person = people[index];
            return ListTile(
              title: Text(
                person.name,
                style: const TextStyle(color: titleColor),
              ),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =>
                          MechanismDtl(mechanism: person, id: index)),
                );
              },
            );
          }),
    );
  }
}

编辑：用户可以存储项目的页面

class MarkFavs extends StatefulWidget {
  const MarkFavs({Key key}) : super(key: key);

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

class _MarkFavsState extends State<MarkFavs> {
  TextEditingController searchController = TextEditingController();
  List<People> shownList = <People>[
    People(name: 'Test', id: 1),
    People(name: 'Test2', id: 2),
    People(name: 'Test3', id: 3)
  ];
  List<People> initialData = <People>[
    People(name: 'Test', id: 1),
    People(name: 'Test2', id: 2),
    People(name: 'Test3', id: 3)
  ];

  void queryPeople(String queryString) {
    if (kDebugMode) {
      print("queryString = $queryString");
    }

    setState(() {
      shownList = initialData.where((string) {
        if (string.name.toLowerCase().contains(queryString.toLowerCase())) {
          return true;
        } else {
          return false;
        }
      }).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backGround,
      appBar: AppBar(
        backgroundColor: appbarColor,
        title: const Text('Detail'),
      ),
      body: Column(
        children: <Widget>[
          TextButton.icon(
            label: const Text('Favorites'),
            icon: const Icon(
              Icons.storage,
              color: titleColor,
            ),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const Favorites()),
              );
            },
          ),
          Expanded(
            child: PeopleList(
              people: shownList,
            ),
          ),
        ],
      ),
    );
  }
}

class PeopleList extends StatelessWidget {
  final List<People> people;

  const PeopleList({Key key, this.people}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: people.length,
      itemBuilder: (context, index) {
        var person = people[index];
        var name = person.name;
        return ListTile(
          title: Text(
            name,
            style: const TextStyle(color: titleColor),
          ),
          onTap: () {
            person.id = index;
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) =>
                      MechanismDtl(mechanism: person, id: index)),
            );
          },
        );
      },
    );
  }
}

Answer 1

也许不是最有效的方法，但如果您从 parent 小部件提供到收藏夹 class 的回传，您可以在 parent 小部件中调用 setState（假设parent 小部件重新加载数据库）。

    class Favorites extends StatefulWidget {
  const Favorites({Key? key, this.passback}) : super(key: key);
  final Function passback;

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

然后回传看起来像：

passback() {
   setState(){
     //Reload db
   }
}

并将其传递到收藏夹（不适用于命名路由 AFAIK）

  Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => Favourites(passback: passback)),
 );

然后当用户将项目添加到他们的收藏夹时调用回传。

Answer 2

解决它很丑陋，但它正在工作。如果你知道更好的方法请告诉我！

class Favorites extends StatefulWidget {
  const Favorites({Key? key}) : super(key: key);

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

class _FavoritesState extends State<Favorites> {
  // ignore: prefer_typing_uninitialized_variables
  var database;
  List<TestItems> items = <TestItems>[];

  Future initDb() async {
    database = await openDatabase(
      join(await getDatabasesPath(), 'person_database.db'),
      onCreate: (db, version) {
        db.execute(
          "CREATE TABLE person(id INTEGER PRIMARY KEY,  name TEXT)",
        );
      },
      version: 1,
    );

    getItems().then((value) {
      setState(() {
        items = value;
      });
    });
  }

  Future<List<TestItems>> getItems() async {
    final Database db = await database;

    final List<Map<String, dynamic>> maps = await db.query('person');
    return List.generate(maps.length, (i) {
      return TestItems(
        id: maps[i]['id'],
        name: maps[i]['name'] as String,
      );
    });
  }

  Future<void> deleteDB(int id) async {
    final db = await database;
    await db.delete(
      'person',
      where: "id = ?",
      whereArgs: [id],
    );
  }

  @override
  void initState() {
    super.initState();
    initDb();
  }

      @override
      Widget build(BuildContext context) {
// Updates the page every time the build method gets called
        initDb().then((value) {
          setState(() {
            items = value;
          });
        });
        return Scaffold(
            appBar: AppBar(
              title: const Text("Favorites"),
            ),
            body: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  var item = items[index];
                  return ListTile(
                    title: Text(
                      item.name,
                    ),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => ItemDtl(items: item, id: index)),
                      );
                    },
                    trailing: IconButton(
                      color: Colors.red,
                      icon: const Icon(Icons.delete_forever_rounded),
                      onPressed: () {
                        deleteDB(item.id).then((value) {
                          getItems().then((value) {
                            setState(() {
                              items = value;
                            });
                          });
                        });
                      },
                    ),
                  );
                }));
      }
    }

每次我重新访问 BottomNavigationbar 中的页面时更新页面

Updating a page every time I revisit the page in BottomNavigationbar

datastore

flutter

sqflite

flutter-bottomnavigation