摘要：開發(fā)之目錄頁(yè)面跳轉(zhuǎn)的頁(yè)面跳轉(zhuǎn)，主要是通過(guò)來(lái)實(shí)現(xiàn)，類似原生中的路由，分為靜態(tài)和動(dòng)態(tài)種方式。添加添加，這時(shí)，就可以這樣使用你的認(rèn)可，是我堅(jiān)持更新博客的動(dòng)力，如果覺得有用，就請(qǐng)點(diǎn)個(gè)贊，謝謝

這一篇，我們說(shuō)說(shuō)開發(fā)中會(huì)用到的地方。

【Flutter】開發(fā)之目錄

Flutter的頁(yè)面跳轉(zhuǎn)，主要是通過(guò)Navigator來(lái)實(shí)現(xiàn)，類似原生中的路由，分為靜態(tài)和動(dòng)態(tài)2種方式。

靜態(tài)

首先要在MaterialApp的routes中進(jìn)行注冊(cè)

MaterialApp(
      routes: {
        "base": (BuildContext context) {
          return BaseDemo();
        },
        "login": (BuildContext context) {
          return LoginDemo();
        }
      },
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: MainDemo(),
    );

然后進(jìn)行跳轉(zhuǎn)

              RaisedButton(
                child: Text("BaseWidget"),
                onPressed: () {
                  Navigator.pushNamed(context, "base");
                },
              )

這種方式的缺點(diǎn)也比較明顯，首先需要注冊(cè)，其次是不能傳遞參數(shù)

動(dòng)態(tài)

需要構(gòu)建MaterialPageRoute

              RaisedButton(
                child: Text("PageView"),
                onPressed: () {
                  Navigator.push(context,
                      new MaterialPageRoute(builder: (BuildContext context) {
                    return PageViewDemo();
                  }));
                },
              )

關(guān)閉頁(yè)面

主要是通過(guò)pop方法來(lái)實(shí)現(xiàn) Navigator.of(context).pop();

傳遞參數(shù)

首先，需要在目標(biāo)Widget中定義參數(shù)

class LoginDemo extends StatefulWidget {
  @override
  _LoginDemoState createState() => _LoginDemoState(tel);

  final String tel;

  LoginDemo({Key key, @required this.tel}) : super(key: key);
}

再傳遞參數(shù)

              RaisedButton(
                child: Text("Login"),
                onPressed: () {
                  Navigator.push(context,
                      new MaterialPageRoute(builder: (BuildContext context) {
                    return LoginDemo(tel: "18700000000");
                  }));
                },
              )

目標(biāo)Widget取值，這里用到的是上一篇中的登錄示例，詳情可以查看【Flutter】開發(fā)之高級(jí)Widget（三）

class _LoginDemoState extends State<LoginDemo> {
  String tel;

  _LoginDemoState(this.tel);

  TextEditingController user = new TextEditingController();
  TextEditingController pwd = new TextEditingController();

  @override
  void initState() {
    super.initState();
    setState(() {
      user.text = tel;
    });
  }
}

這里通過(guò)setState觸發(fā)Widget重新構(gòu)建刷新，將傳遞來(lái)的值設(shè)置給目標(biāo)TextField。

回傳參數(shù)

首先是在關(guān)閉時(shí)，加入?yún)?shù) Navigator.of(context).pop("0000000"); 接收時(shí)，靜態(tài)和動(dòng)態(tài)方式的參數(shù)回傳都是通過(guò)then方法來(lái)完成的，這里就以動(dòng)態(tài)方式為例

              RaisedButton(
                child: Text("Login"),
                onPressed: () {
                  Navigator.push(context,
                      new MaterialPageRoute(builder: (BuildContext context) {
                    return LoginDemo(tel: "18700000000");
                  })).then((onValue) {
                    buildDialog(context, onValue);
                  });
                },
              )

  void buildDialog(BuildContext context, String text) {
    showDialog(
      context: context,
      builder: (BuildContext content) {
        return AlertDialog(
          title: Text("提示"),
          content: Text(text),
          actions: [
            GestureDetector(
              child: Container(
                child: Text("關(guān)閉"),
              ),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

網(wǎng)絡(luò)請(qǐng)求

flutter內(nèi)置HttpClient可以用來(lái)做網(wǎng)絡(luò)請(qǐng)求，但是官方建議使用 dio

官方原話： HttpClient本身功能較弱，很多常用功能都不支持。我們建議您使用dio?來(lái)發(fā)起網(wǎng)絡(luò)請(qǐng)求，它是一個(gè)強(qiáng)大易用的dart http請(qǐng)求庫(kù)，支持Restful API、FormData、攔截器、請(qǐng)求取消、Cookie管理、文件上傳/下載

我們就從善如流，直接使用dio來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求

在pubspec.yaml文件中添加依賴 dio: ^2.1.4

  void getData() {
    Dio dio = new Dio();
    dio.request(
      //使用自己的接口
      "https://***/module/index.php");,
      data: {"p", "1"},
    ).then((onValue) {
      print(onValue);
      setState(() {
        jsonString = onValue;
      });
    });
  }

關(guān)于dio的更多用法，請(qǐng)參考 dio 官方文檔

將請(qǐng)求返回的數(shù)據(jù)展示到Text上

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("NetDemo"),
        actions: [
          RaisedButton(
            child: Text("發(fā)起請(qǐng)求"),
            onPressed: () {
              getData();
            },
          ),
        ],
      ),
      body: Container(
        child: Text("${jsonString}"),
      ),
    );
  }

JSON 序列化

上一步中，我們拿到了網(wǎng)絡(luò)請(qǐng)求返回的json，怎么把它轉(zhuǎn)換為對(duì)象呢？這就涉及到了序列化

1.flutter 內(nèi)置的 json，老版本中為JSON

首先，添加導(dǎo)入 import "dart:convert";

  void getData() {
    Dio dio = new Dio();
    dio.request(
      "https://***/module/index.php");,
      data: {"p", "1"},
    ).then((onValue) {
      print(onValue);
      //dynamic 代表動(dòng)態(tài)數(shù)據(jù)類型 即可以是數(shù)字、字符串等任意類型
      Map list = json.decode(onValue.toString());

      setState(() {
        data = list["data"];
      });
    });
  }

使用數(shù)據(jù)

  Widget _listView() {
    return ListView.builder(
      itemBuilder: (context, index) {
        return MoveItem(data[index]);
      },
      itemCount: data.length,
    );
  }

class MoveItem extends StatelessWidget {
  var model;

  MoveItem(this.model);

  @override
  Widget build(BuildContext context) {
    return Container(     
            child: Image.network(
              "http://chuangfen.oss-cn-hangzhou.aliyuncs.com" +
                  model["head_image"],
            ),
    );
}

雖然說(shuō)問(wèn)題解決了，但是這種方式的弊端很明顯，我們直到運(yùn)行時(shí)才知道值的類型，這樣會(huì)失去了大部分靜態(tài)類型語(yǔ)言特性：類型安全、自動(dòng)補(bǔ)全和最重要的編譯時(shí)異常。這樣一來(lái)，我們的代碼可能會(huì)變得非常容易出錯(cuò)。

2.手動(dòng)序列化

只需要添加BaseModel，并傳入泛型，在其中添加json轉(zhuǎn)對(duì)象的方法即可。

添加BaseModel

import "dart:convert";

class BaseModel<T> {
  int status;
  String msg;
  T data;

  BaseModel(this.status, this.msg, this.data);

  BaseModel.fromJson(String jsonString) {
    Map data = json.decode(jsonString);
    BaseModel(data["status"], data["msg"], data["data"]);
  }

  Map toJson() => {
        "status": status,
        "msg": msg,
        "data": data,
      };
}

添加ExpertModel，

class ExpertModel {
  String nick_name;
  String head_image;
  String id;
  String signature;
}

這時(shí)，就可以這樣使用

  void getData() {
    Dio dio = new Dio();
    dio.request(
      "https://www.yfbr2018.com/module/index.php");,
      data: {"p", "1"},
    ).then((onValue) {
      BaseModel> baseModel =
          BaseModel>.fromJson(onValue.toString());

      setState(() {
        jsonString = onValue;
        data = baseModel.data;
      });
    });
  }

class MoveItem extends StatelessWidget {
  ExpertModel model;

  MoveItem(this.model);

  @override
  Widget build(BuildContext context) {
    return Container(     
            child: Image.network(
              "http://chuangfen.oss-cn-hangzhou.aliyuncs.com" +
                 model.head_image,
            ),
    );
}