资讯专栏INFORMATION COLUMN

【Flutter】开发之实战Widget(四)

funnyZhang / 877人阅读

摘要:开发之目录页面跳转的页面跳转,主要是通过来实现,类似原生中的路由,分为静态和动态种方式。添加添加,这时,就可以这样使用你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢

前言

这一篇,我们说说开发中会用到的地方。

【Flutter】开发之目录

页面跳转

Flutter的页面跳转,主要是通过Navigator来实现,类似原生中的路由,分为静态和动态2种方式。

静态

首先要在MaterialApproutes中进行注册

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

然后进行跳转

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

这种方式的缺点也比较明显,首先需要注册,其次是不能传递参数

动态

需要构建MaterialPageRoute

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

关闭页面

主要是通过pop方法来实现 Navigator.of(context).pop();

传递参数

首先,需要在目标Widget中定义参数

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

  final String tel;

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

再传递参数

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

目标Widget取值,这里用到的是上一篇中的登录示例,详情可以查看【Flutter】开发之高级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;
    });
  }
}

这里通过setState触发Widget重新构建刷新,将传递来的值设置给目标TextField

回传参数

首先是在关闭时,加入参数 Navigator.of(context).pop("0000000"); 接收时,静态和动态方式的参数回传都是通过then方法来完成的,这里就以动态方式为例

              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("关闭"),
              ),
              onTap: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

网络请求

flutter内置HttpClient可以用来做网络请求,但是官方建议使用 dio

官方原话: HttpClient本身功能较弱,很多常用功能都不支持。我们建议您使用dio 来发起网络请求,它是一个强大易用的dart http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载

我们就从善如流,直接使用dio来实现网络请求

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;
      });
    });
  }

关于dio的更多用法,请参考 dio 官方文档

将请求返回的数据展示到Text

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("NetDemo"),
        actions: [
          RaisedButton(
            child: Text("发起请求"),
            onPressed: () {
              getData();
            },
          ),
        ],
      ),
      body: Container(
        child: Text("${jsonString}"),
      ),
    );
  }

JSON 序列化

上一步中,我们拿到了网络请求返回的json,怎么把它转换为对象呢?这就涉及到了序列化

1.flutter 内置的 json,老版本中为JSON

首先,添加导入 import "dart:convert";

  void getData() {
    Dio dio = new Dio();
    dio.request(
      "https://***/module/index.php");,
      data: {"p", "1"},
    ).then((onValue) {
      print(onValue);
      //dynamic 代表动态数据类型 即可以是数字、字符串等任意类型
      Map list = json.decode(onValue.toString());

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

使用数据

  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"],
            ),
    );
}

虽然说问题解决了,但是这种方式的弊端很明显,我们直到运行时才知道值的类型,这样会失去了大部分静态类型语言特性:类型安全、自动补全和最重要的编译时异常。这样一来,我们的代码可能会变得非常容易出错。

2.手动序列化

只需要添加BaseModel,并传入泛型,在其中添加json转对象的方法即可。

添加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;
}

这时,就可以这样使用

  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,
            ),
    );
}

你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/6980.html

相关文章

  • Flutter交互实战-即刻App探索页下拉&拖拽效果

    摘要:前言最近比较热门,但是成体系的文章并不多,前期避免不了踩坑我这篇文章主要介绍如何使用实现一个比较复杂的手势交互,顺便分享一下我在使用过程中遇到的一些小坑,减少大家入坑作者链接先睹为快本项目支持运行,效果如下对了,顺便分享一下生成的小窍门,建 前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑;我这篇文章主要介绍如何使用Flutter实现一个比较复杂...

    miracledan 评论0 收藏0
  • Flutter交互实战-即刻App探索页下拉&拖拽效果

    摘要:前言最近比较热门,但是成体系的文章并不多,前期避免不了踩坑我这篇文章主要介绍如何使用实现一个比较复杂的手势交互,顺便分享一下我在使用过程中遇到的一些小坑,减少大家入坑作者链接先睹为快本项目支持运行,效果如下对了,顺便分享一下生成的小窍门,建 前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑;我这篇文章主要介绍如何使用Flutter实现一个比较复杂...

    wdzgege 评论0 收藏0
  • Flutter 开发实战与前景展望 - RTC Dev Meetup

    摘要:稳定性中大部分异常是不会引起应用崩溃,更多会在上体现为红色错误堆栈,上异常等等。它是的实现类,实现跨帧保存的就是存放在这里,同时它也充当了和之间的桥梁。一整块的重绘区域,决定重绘的影响区域。手势在手势中引入了竞技的概念事件在中尤为重要。大家好,我是郭树煜,Github GSY 系列开源项目的作者,系列包括有 GSYVideoPlayer 、GSYGitGithubApp(FlutterRea...

    _ipo 评论0 收藏0
  • Flutter 面试知识点集锦

    摘要:中的的线程是以事件循环和消息队列的形式存在,包含两个任务队列,一个是内部队列,一个是外部队列,而的优先级又高于。同时还有处理按住时的事件额外处理,同时手势处理一般在的子类进行。谷歌大会之后,有不少人咨询了我 Flutter 相关的问题,其中有不少是和面试相关的,如今一些招聘上也开始罗列 Flutter 相关要求,最后想了想还是写一期总结吧,也算是 Flutter 的阶段复习。 ⚠️系统完...

    andong777 评论0 收藏0
  • Flutter实战》中文原创书籍开源

    摘要:实战为中文网开源电子书项目,本书系统介绍了各个方面,是第一本中文原创技术书籍在线阅读地址实战部分目录缘起起步移动开发技术简介简介搭建开发环境语言简介第一个应用计数器示例路由管理包管理资源管理调试基础简介文本字体样式按钮图片和单选框和复选框输 showImg(https://segmentfault.com/img/bVbld8W?w=500&h=691); 《Flutter实战》 为F...

    sevi_stuo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<