我如何移動 function **未來<void> fetchData()** 到服務 class</void>

Question

我想將我的代碼重組為MVVM ，我是 flutter 的新手，如何將上面的 function 重組為服務 Class import 'dart:convert';

import 'package:amaizi_test/models/UserModel.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class JsonApiPhp extends StatefulWidget {
  @override
  _JsonApiPhpState createState() => _JsonApiPhpState();
}

class _JsonApiPhpState extends State<JsonApiPhp> {

  bool loading = true;
  final String url = 'https://jsonplaceholder.typicode.com/users';
  var client = http.Client();
  List<UserModel> users = [];


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

我想重組我的文件，

  Future<void> fetchData() async {
    http.Response response = await client.get(Uri.parse(url));
    if(response.statusCode == 200){ // Connection Ok
      List responseJson = json.decode(response.body);
      responseJson.map((m) => users.add(new UserModel.fromJson(m))).toList();
      setState(() {
        loading = false;
      });
    } else {
      throw('error');
    }
  }

並在 HomePage InitState 中初始化

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: loading ?
        Container(
          child: Center(
            child: CircularProgressIndicator(),
          ),
        ) :
        ListView.builder(
          itemCount: users.length,
          itemBuilder: (BuildContext context, int index){
            return Card(
              child: ListTile(
                title: Text(
                  users[index].name,
                ),
              ),
            );
          },
        )
      ),
    );
  }
}

// function 調用 API 並在 UI 中顯示

Answer 1

例如，您可以在 lib 目錄中創建目錄“services”，然后在該目錄 dart 中創建包含您的服務 class 的文件。例如：

class ServerApiService{
  Future<List<User>> fetchData() async {
    ///your code, but without setState()
    return users;
  }
}

在Initstate之后，您可以創建服務object，並從服務class致電您的FetchData function。而不是創建服務class 8828282828295402888888 ENTERCER ENSTIRE 8888888 ENSTERS APPS APPS APPS APPRISP APPRISP APPRISP APPRISP APPP APPP APPR APPP APPP APPR APPP APPP APPR APPRAPP APPRY -88創建到i88。

您可以使用 FutureBuilder 小部件從 fetchData() 方法訪問數據。

FutureBuilder<List<User>>(
    future: users,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        var data = snapshot.data!;
        return ListView.builder(
            itemCount: data.length,
            itemBuilder: (BuildContext context, int index) {
              User user = data[index];
              return Card(
                  child: ListTile(
                  title: Text(
                  user.name,
                 ),
                ),
               )
            });
      }
      else if (snapshot.hasError) {
        return Text("${snapshot.error}");
      }
      else {
        return Container(
          child: Center(
            child: CircularProgressIndicator(),
          ),
        );
      }
    });

訪問 FutureBuilder 的用戶（未來：用戶）從服務 object 獲取數據。

還有一點要注意：如果在 initState() 內部你會在其他代碼之上調用 super.initState() 會更好。 用 super.initState 開始你的 initState 並用 super.dispose 結束你的 dispose