首页 > 解决方案 > 在没有用户交互 Flutter 的情况下在后台获取结果后如何再次重建 ui?

问题描述

我正在从 sqlite 获取结果 - 当第一次构建屏幕时,如果用户确实下拉刷新,我已经使用 setState() 再次重建小部件。

我的目标是无需下拉刷新或无需任何用户交互,当数据库发生任何更改时如何重建我的 ui。

另外,当我在构建页面后重新访问页面时调用哪个方法,以便我们可以执行一些 setState()?

class FavouriteScreen extends StatefulWidget {
  @override
  _FavouriteScreenState createState() => _FavouriteScreenState();
}

class _FavouriteScreenState extends State<FavouriteScreen> {
  deleteAllPersons() async {
    final db = await database;
    db.delete("Bookmark");
  }

  Future<List<Bookmark>> getAllPersons() async {
    final db = await database;
    var response = await db.query("Bookmark");
    print(response);
    List<Bookmark> list = response.map((c) => Bookmark.fromMap(c)).toList();
   
    return list;
  }

  deletePersonWithId(int id) async {
    final db = await database;

    return db.delete("Bookmark", where: "id = ?", whereArgs: [id]);
  }

  Future<void> fetchOnRefresh() async {
    await getAllPersons();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: appBar(),
        body: RefreshIndicator(
            onRefresh: fetchOnRefresh,
            child: FutureBuilder(
              future: getAllPersons(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.data != null) {
                  print(snapshot.data.length);
                  return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        if (snapshot.data != null) {
                          var key = snapshot.data[index];
                          print("------------------------");
                          print(key.urlToImage);

                          print(key.category);
                          return Column(
                            children: [
                              Card(
                                margin: EdgeInsets.all(5),
                                elevation: 5.0,
                                child: Row(
                                  children: [
                                    Expanded(
                                        child: Container(
                                      child: Image(
                                        fit: BoxFit.fill,
                                        image: NetworkImage(key.urlToImage),
                                      ),
                                    )),
                                    Expanded(
                                        flex: 2,
                                        child: Padding(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 10),
                                          child: Column(
                                            children: [
                                              Text(key.title),
                                              Text(key.category),
                                            ],
                                          ),
                                        )),
                                    GestureDetector(
                                        onTap: () {
                                          bottomsheet(context, key);
                                        },
                                        child: Icon(Icons.more_vert))
                                  ],
                                ),
                              ),
                            ],
                          );
                        }
                        return Text("waiting");
                      });
                }
                return CircularProgressIndicator();
              },
            )));
  }

标签: flutterflutter-layout

解决方案


推荐阅读