Flutter：防止 FutureBuilder 总是刷新每个更改屏幕

Question

我有 FutureBuilder 从 API 和代码中获取用户配置文件来获取这样的用户：

 Future<List<UserModel>> getUserByUsername({@required String username}) async {
    try {
      final response =
          await _client.get("$_baseUrl/getUserByUsername?username=$username");
      final Map<String, dynamic> responseJson = json.decode(response.body);
      if (responseJson["status"] == "ok") {
        List userList = responseJson['data'];
        final result = userList
            .map<UserModel>((json) => UserModel.fromJson(json))
            .toList();
        return result;
      } else {
        throw CustomError(responseJson['message']);
      }
    } catch (e) {
      return Future.error(e.toString());
    }
  }

如果您可以在上面的 GIF 中看到，My FutureBuilder 位于 BottomNavigationBar。每次我从 BottomNavigationBar 更改屏幕/页面并回到我的 FutureBuilder 总是刷新！

如何将其修复为仅刷新一次？

主屏幕

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    final username = Provider.of<SharedPreferencesFunction>(context).username;
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          CardTime(),
          FutureBuilder(
            future: userApi.getUserByUsername(username: username),
            builder: (BuildContext context,
                AsyncSnapshot<List<UserModel>> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Center(
                    child: Text(
                      snapshot.error.toString(),
                    ),
                  );
                } else {
                  final user = snapshot.data[0];
                  return CardProfil(
                    imageUrl: "${userApi.baseImageUrl}/${user.fotoUser}",
                    detailProfil: [
                      Text(
                        user.namaUser,
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Text(user.idDevice),
                    ],
                  );
                }
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          ),
        ],
      ),
    );
  }
}

共享偏好功能

import 'package:flutter/cupertino.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SharedPreferencesFunction extends ChangeNotifier {
  SharedPreferencesFunction() {
    initialSharedPreferences();
    getUsername();
  }
  String _username;
  String get username => _username;

  void initialSharedPreferences() {
    getUsername();
  }

  Future updateUsername(String username) async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    await pref.setString("username", username);
    //! It's Important !!! After update / remove sharedpreferences  , must called getUsername() to updated the value.
    getUsername();
    notifyListeners();
  }

  Future removeUsername() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    final result = await pref.remove("username");
    //! It's Important !!! After update / remove sharedpreferences  , must called getUsername() to updated the value.
    getUsername();
    print(result);
    notifyListeners();
  }

  Future getUsername() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    final result = pref.getString("username");
    _username = result;
    notifyListeners();
  }
}

final sharedpref = SharedPreferencesFunction();

更新问题

我已经尝试过 Initialize FutureBuilder 并使用 initState 和 didChangeDependencies 。但新问题是，如果我在 initState 内初始化，我的配置文件不会重建，因为 Provider listen=false。 如果我使用 didChangeDependencies 我的 FutureBuilder 仍然会在每次更改屏幕时刷新。 有什么问题吗？

使用 initState

使用 didChangeDependencies

Answer 1

在initState 或didChangeDependencies 期间初始化Future。

class _HomeScreenState extends State<HomeScreen> {
  Future<List<UserModel>> user;

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

    // must use listen false here
    final username = Provider.of<SharedPreferencesFunction>(context, listen: false).username;
    user = userApi.getUserByUsername(username: username);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    final username = Provider.of<SharedPreferencesFunction>(context).username;
    user = userApi.getUserByUsername(username: username);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FutureBuilder(
            future: user,
            builder: (context, snapshot) {
              // ...
            },
          ),
        ],
      ),
    );
  }
}

Answer 2

使用IndexedStack 作为标签栏的父级。

Answer 3

我遇到了类似的情况，并在每个视图/页面/标签栏视图/小部件/子项上使用AutomaticKeepAliveClientMixin，以保持每次我在标签栏来回切换时页面不刷新。

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

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

// Must include AutomaticKeepAliveClientMixin
class _YourClassState extends State<YourClass> with AutomaticKeepAliveClientMixin {
  Future resultGetData;

  void getData() {
    setState(() {
      resultGetData = getDataFromAPI();
    });
  }

  // Must include
  @override
  bool get wantKeepAlive => true;

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

  @override
  Widget build(BuildContext context) {
    super.build(context); // Must include
    return FutureBuilder(
      future: resultGetAllByUserIdMCId,
      builder: (context, snapshot) {
        // ...
        // Some Code
        // ...
      }
    );
  }

}

如果您想刷新数据，您可以使用运行getData() 函数的RefreshIndicator。将此代码放入FutureBuilder。 key: PageStorageKey(widget.key) 会将卷轴保存在您离开的完全相同的位置。

return RefreshIndicator(
  onRefresh: () async {
    getData();
  },
  child: ListView.separated(
    key: PageStorageKey(widget.key),
    itemCount: data.length,
    separatorBuilder: (BuildContext context, int index) {
      return Divider(height: 0);
    },
    itemBuilder: (context, index) {
      return ...;
    },
  ),
);