前言

緊接上文界面篇，上文中在構建布局的時候因為是直接將文字圖片顯示出來的，所以消息類Message，和日知錄類One都是采用的無狀態的StatelessWidget類，這次我們需要調用接口，然后將返回的數據動態的顯示到那兩個控件上去，StatelessWidget類已經無法滿足需求了，這個時候我們需要使用Flutter提供的另一個類StatefulWidget，一旦控件繼承了這個類則說明該空間是一個有狀態的控件，可以進行動態更新等。

• 推薦閱讀:?《StatefulWidget》,?《State.setState》，《為您的Flutter應用程序添加交互》

到目前為止，我們只使用了無狀態的widget。無狀態widget從它們的父widget接收參數， 它們被存儲在final型的成員變量中。 當一個widget被要求構建時，它使用這些存儲的值作為參數來構建widget。 為了構建更復雜的體驗 - 例如，以更有趣的方式對用戶輸入做出反應 - 應用程序通常會攜帶一些狀態。 Flutter使用StatefulWidget來滿足這種需求。StatefulWidget是特殊的widget，它知道如何生成State對象，然后用它來保持狀態。

解析

那么該如何創建一個有狀態的widget，同時又如何進行網絡請求并對控件的狀態進行更新呢？我們一個一個的解決。

創建一個有狀態的Message控件

//消息 class Message extends StatefulWidget {@overrideMessageState createState() => new MessageState(); }class MessageState extends State<Message> {@overrideWidget build(BuildContext context) {//這里創建頁面} } 復制代碼

build函數的內容其實和之前創建無狀態的Message控件的是一樣的，直接復制來就好

@overrideWidget build(BuildContext context) {return new Padding(padding: new EdgeInsets.all(18.0),child: new Column(children: <Widget>[new Container(child: new Row(children: <Widget>[new Icon(Icons.message,color: Colors.black26,size: 17.0,),new Container(margin: new EdgeInsets.only(left: 5.0),child: new Text('消息',style: new TextStyle(color: Color(0xFF888888)),),)],),),new Divider(color: Color(0xFF888888),),new Container(margin: new EdgeInsets.all(10.0),child: new Text("這里是消息"),),new Divider(color: Color(0xFF888888),)],),);} 復制代碼

進行網絡請求并更新控件 在flutter中進行網絡請求有兩種方式

• 在Flutter中發起HTTP網絡請求
• 開源庫——dio 在這里推薦使用第二種,dio是一個強大的Dart Http請求庫，支持Restful API、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載、超時等。和安卓里的OkHttp類似。具體用法可以查看傳送門，文檔寫的很詳細。 回到該應用，在這里我們需要創建一個getMessage（）方法，并通過get請求相應的接口，然后對返回的res進行解析即可，如下所示：

String message = "這里是消息模塊";@overridevoid initState() {super.initState();getMessage();}//獲取消息void getMessage() {Dio().get(Constant.GET_MSG).then((res) {if (res.statusCode == 200) {int code = res.data['code'];if (code == 200) {String info = res.data['info'][0];print(info);setState(() {message = info;});}}});} 復制代碼

說明一下：

調用setState()是至關重要的，因為它告訴框架控件的狀態已經改變，控件應該重新繪制。在這里的作用就是將之前設置的message變量變為從接口中獲取的變量。

json的解析，推薦閱讀《在 Flutter 中解析復雜的 JSON》

我們如果需要在控件一開始渲染的時候就要發送網絡請求，需要在initState()函數中調用getMessage()方法

該頁代碼

因為日知錄部分的基本上也是網絡請求和動態渲染控件，道理是一致的，所以我就直接在這里貼上代碼了。

import 'package:flutter/material.dart'; import 'package:flutter_guohe/common/eventBus.dart'; import 'package:dio/dio.dart'; import 'package:flutter_guohe/views/customview.dart'; import 'package:flutter_guohe/utils/constant.dart';class Today extends StatefulWidget {@overrideTodayState createState() => new TodayState(); }class TodayState extends State<Today> {//打開drawervoid openDrawer() {eventBus.fire(new EventOpenDrawer(true));}@overrideWidget build(BuildContext context) {return new MaterialApp(home: new Scaffold(appBar: new AppBar(leading: new IconButton(icon: Icon(Icons.home),onPressed: () {//打開draweropenDrawer();},),title: new Text("今日"), //設置標題內容backgroundColor: Color.fromARGB(255, 119, 136, 213), //設置appbar背景顏色centerTitle: true, //設置標題是否局中),body: new ListView(children: <Widget>[new Header(), //頭部new BigDivider(),new TodayKb(), //今日課表new BigDivider(),new Message(), //消息new BigDivider(),new One() //日知錄],),),);} }//首頁的頭部信息 class Header extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Container(height: 100.0,margin: new EdgeInsets.all(8.0),child: new Row(children: <Widget>[new Expanded(child: new Column(children: <Widget>[//頭像new Container(width: 60.0,height: 60.0,margin: new EdgeInsets.all(8.0),decoration: BoxDecoration(image: DecorationImage(image: new AssetImage('assets/imgs/ic_menu_score.png'),//從Assets加載圖片fit: BoxFit.cover,),shape: BoxShape.circle,),),new Text('查成績',textAlign: TextAlign.center,)],),flex: 1,),new Expanded(child: new Column(children: <Widget>[//頭像new Container(width: 60.0,height: 60.0,margin: new EdgeInsets.all(8.0),decoration: BoxDecoration(image: DecorationImage(image: new AssetImage('assets/imgs/ic_menu_pe.png'),//從Assets加載圖片fit: BoxFit.cover,),shape: BoxShape.circle,),),new Text('查體育',textAlign: TextAlign.center,)],),flex: 1,),new Expanded(child: new Column(children: <Widget>[//頭像new Container(width: 60.0,height: 60.0,margin: new EdgeInsets.all(8.0),decoration: BoxDecoration(image: DecorationImage(image: new AssetImage('assets/imgs/ic_menu_bus.png'),//從Assets加載圖片fit: BoxFit.cover,),shape: BoxShape.circle,),),new Text('查校車',textAlign: TextAlign.center,)],),flex: 1,),new Expanded(child: new Column(children: <Widget>[//頭像new Container(width: 60.0,height: 60.0,margin: new EdgeInsets.all(8.0),decoration: BoxDecoration(image: DecorationImage(image: new AssetImage('assets/imgs/ic_menu_system.png'),//從Assets加載圖片fit: BoxFit.cover,),shape: BoxShape.circle,),),new Text('校園系統',textAlign: TextAlign.center,)],),flex: 1,),new Expanded(child: new Column(children: <Widget>[//頭像new Container(width: 60.0,height: 60.0,margin: new EdgeInsets.all(8.0),decoration: BoxDecoration(image: DecorationImage(image: new AssetImage('assets/imgs/ic_menu_more.png'),//從Assets加載圖片fit: BoxFit.cover,),shape: BoxShape.circle,),),new Text('更多',textAlign: TextAlign.center,)],),flex: 1,),],),);} }//今日課表 class TodayKb extends StatefulWidget {@overrideTodayKbState createState() => new TodayKbState(); }class TodayKbState extends State<TodayKb> {@overrideWidget build(BuildContext context) {//跳轉至課表_toKb() {print('跳轉至課表');}return new Padding(padding: new EdgeInsets.all(18.0),child: new Column(children: <Widget>[new Container(child: new Row(children: <Widget>[new Icon(Icons.camera,color: Colors.black26,size: 17.0,),new Container(margin: new EdgeInsets.only(left: 5.0),child: new Text('今日課表',style: new TextStyle(color: Color(0xFF888888)),),)],),),new Divider(color: Color(0xFF888888),),new Container(margin: new EdgeInsets.only(top: 30.0, bottom: 2.0),child: new Text("今天居然沒有課~" + "\uD83D\uDE01"),),new GestureDetector(child: new Container(margin: new EdgeInsets.only(top: 30.0, bottom: 2.0),child: new Text('點我查看完整課表',style: new TextStyle(color: Color(0xFF888888,),fontSize: 12.0)),),onTap: _toKb,),],),);} }//消息 class Message extends StatefulWidget {@overrideMessageState createState() => new MessageState(); }class MessageState extends State<Message> {String message = "這里是消息模塊";@overridevoid initState() {super.initState();getMessage();}//獲取消息void getMessage() {Dio().get(Constant.GET_MSG).then((res) {if (res.statusCode == 200) {int code = res.data['code'];if (code == 200) {String info = res.data['info'][0];print(info);setState(() {message = info;});}}});}@overrideWidget build(BuildContext context) {return new Padding(padding: new EdgeInsets.all(18.0),child: new Column(children: <Widget>[new Container(child: new Row(children: <Widget>[new Icon(Icons.message,color: Colors.black26,size: 17.0,),new Container(margin: new EdgeInsets.only(left: 5.0),child: new Text('消息',style: new TextStyle(color: Color(0xFF888888)),),)],),),new Divider(color: Color(0xFF888888),),new Container(margin: new EdgeInsets.all(10.0),child: new Text(message),),new Divider(color: Color(0xFF888888),)],),);} }//日知錄 class One extends StatefulWidget {@overrideOneState createState() => new OneState(); }class OneState extends State<One> {String date = "2018/09/14";String imgUrl = 'http://image.wufazhuce.com/Fn5E1UnrcvN0jwFRiOtDZ2WnQa4N';String imgAuthor = "Fahmi Ramadhan";String imgKind = "攝影";String url = "http://m.wufazhuce.com/one/2202";String word = "戀愛不是用談的，是墜入的。";String wordFrom = "《寂寞東京鐵塔》";//獲取日知錄的內容void getOneContent() {FormData formData = new FormData.from({"TransCode": "030111", "OpenId": "123456789", "Body": "123456789"});Dio().post(Constant.ONE, data: formData).then((res) {setState(() {date = res.data['Body']['date'].toString().split(" ")[0].replaceAll("-", "/");imgUrl = res.data['Body']['img_url'];imgAuthor = res.data['Body']['img_author'];imgKind = res.data['Body']['img_kind'];url = res.data['Body']['url'];word = res.data['Body']['word'];wordFrom = res.data['Body']['word_from'];});});}@overridevoid initState() {// TODO: implement initStatesuper.initState();getOneContent();}@overrideWidget build(BuildContext context) {return new Padding(padding: new EdgeInsets.all(18.0),child: new Column(children: <Widget>[new Container(child: new Row(children: <Widget>[new Icon(Icons.email,color: Colors.black26,size: 17.0,),new Container(margin: new EdgeInsets.only(left: 5.0),child: new Text('日知錄',style: new TextStyle(color: Color(0xFF888888)),),)],),),new Divider(color: Color(0xFF888888),),new Container(margin: new EdgeInsets.all(10.0),child: new Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Text(date,style: new TextStyle(color: Color(0xFF888888)),),new Margin(indent: 6.0),new Image(image: new NetworkImage(imgUrl)),new Margin(indent: 6.0),new Text(imgAuthor + " | " + imgKind,style: new TextStyle(color: Color(0xFF888888)),),new Margin(indent: 6.0),new Text(word,textAlign: TextAlign.center,style: new TextStyle(color: Color(0xFF888888)),),new Margin(indent: 6.0),new Text(wordFrom,style: new TextStyle(color: Color(0xFF888888)),)],),),new Divider(color: Color(0xFF888888),)],),);} } 復制代碼

總結

以上是生活随笔為你收集整理的利用Flutter写一个跨平台的果核APP（3）——网络请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。