Flutter之对接接口并显示

Fluter对接接口并显示的整个过程还是比较复杂的，我花了比较长的时间进行研究，以对接查询接口为例，整理如下：

若接口的返回数据为：

[{"id":1,"question":"世界上最大的海洋是？","type":"radio","options":"北冰洋,太平洋,印度洋","rightAnswer":"太平洋"},{"id":2,"question":"下面这张图是谁？","type":"radio","options":"陈独秀,李大钊,叶挺,胡适,蔡锷,胡宗南","rightAnswer":"李大钊","pic":"https://z3.ax1x.com/2021/05/22/gOiiKH.jpg"},{"id":3,"question":"要慎重对待朋友交往，坚持择善而交，多同（）交朋友，注意净化自己的社交圈。","type":"radio","options":"普通群众,基层干部,先进模范,专家学者","rightAnswer":"普通群众"},{"id":4,"question":"1927年9月29日，秋收起义各部队到达江西永新县三湾村，在毛领导下进行了改编，史称三湾改编。三湾改编的措施（ ）。","type":"checkbox","checkboxOptions":[{"id":1,"title":"确立了毛在党中央和红军的领导地位","isRight":0,"quizId":4},{"id":2,"title":"开始改变旧军队的习气和不良作风","isRight":1,"quizId":4},{"id":3,"title":"从组织上确立了党对军队的领导","isRight":1,"quizId":4},{"id":4,"title":"是建设无产阶级领导的新型人民军队的重要开端","isRight":1,"quizId":4}]},{"id":5,"question":"通过延安整风，中共初步确立了密切联系群众的思想路线，将马克思主义中国化的第一个理论成果确定为党的指导思想。","type":"radio","options":"对,错","rightAnswer":"错"}]

1.在pubspec.yaml文件中增加dio依赖，然后安装依赖

如：

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  fluttertoast: ^3.0.3
  shared_preferences: ^0.5.1
  dio: 3.0.9

2.新建一个异步函数，用getDioQuiz函数进行网络请求，使用await等待拿到结果，最后函数返回一个List。

Future<List> fetchData() async{
    List arr = await getDioQuiz();return arr;
}

getDioQuiz函数代码如下，quizList即为需要显示的列表：

static Future<List> getDioQuiz() async{
  Dio dio = new Dio();
  Response response = await dio.get(Global.host + "getAllQuiz");
  List<Quiz> quizList = (response.data as List<dynamic>).map((e) => Quiz.fromJson((e as Map<String,dynamic>))).toList();
  return quizList;
}

其中Global.host是一个静态全局变量

global.dart代码如下：

class Global{
  static bool isChangeQuizOrder = true;
  static bool isChangeOptionOrder = true;
  static String dropdownValue = 'all';
  static String host = "http://1.15.186.160:8003/quiz/";
}

3.新建Quiz和Option对应的实体类quiz.dart和option.dart。

quiz.dart

import 'option.dart';

class Quiz {
  int id;
  String question;
  String type;
  String options;
  String rightAnswer;
  String pic;
  List<Option> checkboxOptions;

  Quiz({this.id, this.question, this.type, this.options, this.rightAnswer, this.pic, this.checkboxOptions});

  Quiz.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    question = json['question'];
    type = json['type'];
    options = json['options'];
    rightAnswer = json['rightAnswer'];
    pic = json['pic'];
    if (json['checkboxOptions'] != null) {
      checkboxOptions = new List<Option>();
      json['checkboxOptions'].forEach((v) {
        checkboxOptions.add(new Option.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['question'] = this.question;
    data['type'] = this.type;
    data['options'] = this.options;
    data['rightAnswer'] = this.rightAnswer;
    data['pic'] = this.pic;
    data['checkboxOptions'] = this.checkboxOptions;
    if (this.checkboxOptions != null) {
      data['checkboxOptions'] = this.checkboxOptions.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

option.dart

class Option {
  int id;
  String title;
  int isRight;
  int quizId;
  bool isSelected;

  Option({this.id, this.title, this.isRight, this.quizId, this.isSelected=false});

  factory Option.fromJson(Map<String, dynamic> json) {
    return Option(
      id: json['id'],
      title: json['title'],
      isRight: json['isRight'],
      quizId: json['quizId'],
    );
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['isRight'] = this.isRight;
    data['quizId'] = this.quizId;
    return data;
  }
}

4.在build函数中加上FutureBuilder组件等待接口请求返回数据

@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: fetchData(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return Scaffold(
          appBar: AppBar(
            title: Text('问题${_count + 1}'),
          ),
          body: Container(
            child: ListView(children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    child: Text((list[_count] as Quiz).question,
                        style: TextStyle(fontSize: 20, color: Colors.black)),
                    margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
                  ),
                  showPic(),
                  Column(children: generateOptions()),
                ],
              )
            ]),
          )
        );
      }
      return Text('');
    }
  );
}

return Text('')为请求接口时显示的页面，可以修改为：

return Scaffold(
  body: Center(
    child: Text('页面加载中……'),
  ),
);

5.由于build函数会在程序运行过程中多次执行，导致fetchData函数也被多次执行。

要想让fetchData函数只被执行一次。我们可以在类里新建状态值

Future _fetchData;

在initState进行调用

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

再换掉build里future对应的值

@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: _fetchData,
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return Scaffold(
          appBar: AppBar(
            title: Text('问题${_count + 1}'),
          ),
          body: Container(
            child: ListView(children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    child: Text((list[_count] as Quiz).question,
                        style: TextStyle(fontSize: 20, color: Colors.black)),
                    margin: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
                  ),
                  showPic(),
                  Column(children: generateOptions()),
                ],
              )
            ]),
          )
        );
      }
      return Text('');
    }
  );
}

即可。