Appbar應顯示在顫振中使用futurebuilder的記錄數

我剛剛創建了一個演示，以便更好地了解未來的建設者

顯示來自 api 的所有用戶并出現的腳手架主體應顯示用戶數

加載時出現的標題顯示為 0 但未更改...如何重建它

這是我的代碼

class _withmodelState extends State<withmodel> {

  List<UserModel> userlist=[];

  Future<List<UserModel>> getdata() async {
    final resp =
        await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

    if (resp.statusCode == 200) {
      print('i ma called');
      List<dynamic> dlist = json.decode(resp.body);
      await Future.delayed(Duration(seconds: 2));

      userlist= dlist.map((e) => UserModel.fromJson(e)).toList();
      return userlist;
    }
    return userlist;


  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          appBar: AppBar(title: Text("Total users=" userlist.length.toString()),),
      body: MyBody(
        //MyBody returning FutureBuilder for showing userlist array;
      ),
    ));
  }

uj5u.com熱心網友回復：

你可以ChangeNotifier這樣使用，首先創建一個這樣的類：

class WithmodelDecl with ChangeNotifier {
  ValueNotifier<int> totalUsers = ValueNotifier<int>(0);
}

WithmodelDecl withmodeldecl = new WithmodelDecl();

然后像這樣使用它：

return SafeArea(
        child: Scaffold(
          appBar: PreferredSize(
          child: ValueListenableBuilder<int>(
              valueListenable: withmodeldecl.totalUsers,
              builder: (context, value, _) {
                return AppBar(
                  title: Text("Total users="   value.toString()),
                );
              }),
          preferredSize: AppBar().preferredSize),
      body: MyBody(
        //MyBody returning FutureBuilder for showing userlist array;
      ),
));

最后將您更改getdata為：

Future<List<UserModel>> getdata() async {
    final resp =
        await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

    if (resp.statusCode == 200) {
      print('i ma called');
      List<dynamic> dlist = json.decode(resp.body);
      await Future.delayed(Duration(seconds: 2));

      userlist= dlist.map((e) => UserModel.fromJson(e)).toList();
      withmodeldecl.totalUsers.value = userlist.length;
      return userlist;
    }
    return userlist;


  }

uj5u.com熱心網友回復：

當計數可用時，您還需要重建Text用于顯示計數的小部件，即Future完成。

您需要像這樣包裝該Text小部件FutureBuilder：

return SafeArea(
  child: Scaffold(
    appBar: AppBar(
      title: FutureBuilder<List<UserModel>>(
        future: getdata(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            final List<UserModel> userlist = snapshot.data!;
            return Text("Total users= ${userlist.length}");
            // it's better to use String interpolation than "Total users="   snapshot.data!.length.toString()
          } else {
            // return loading widget
          }
        },
      ),
    ),
    body: MyBody(
      //MyBody returning FutureBuilder for showing userlist array;
    ),
  ),
);

最好有Future一個變數，然后像這樣使用它，以避免在呼叫build()方法時不必要的和重復呼叫它：

late final Future<List<UserModel>> _userListFuture;

并在您的 中初始化它initState()，如下所示：

@override
void initState() {
  super.initState();
  _userListFuture = Future<List<UserModel>>(getdata);
}

并FutureBuilder像這樣使用它：

FutureBuilder<List<UserModel>>(
  future: _userListFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // return your widget showing data
    } else {
      // return loading widget
    }
  },
)

標籤：扑镖颤振布局

上一篇：無法在AndroidStudio的Flutter中的資產中添加自定義字體

下一篇：如何在顫動的影像上應用漸變顏色