摘要:开发之目录页面跳转的页面跳转,主要是通过来实现,类似原生中的路由,分为静态和动态种方式。添加添加,这时,就可以这样使用你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢
前言这一篇,我们说说开发中会用到的地方。
【Flutter】开发之目录
页面跳转Flutter的页面跳转,主要是通过Navigator来实现,类似原生中的路由,分为静态和动态2种方式。
静态
首先要在MaterialApp的routes中进行注册
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最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑;我这篇文章主要介绍如何使用Flutter实现一个比较复杂...
摘要:前言最近比较热门,但是成体系的文章并不多,前期避免不了踩坑我这篇文章主要介绍如何使用实现一个比较复杂的手势交互,顺便分享一下我在使用过程中遇到的一些小坑,减少大家入坑作者链接先睹为快本项目支持运行,效果如下对了,顺便分享一下生成的小窍门,建 前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑;我这篇文章主要介绍如何使用Flutter实现一个比较复杂...
摘要:稳定性中大部分异常是不会引起应用崩溃,更多会在上体现为红色错误堆栈,上异常等等。它是的实现类,实现跨帧保存的就是存放在这里,同时它也充当了和之间的桥梁。一整块的重绘区域,决定重绘的影响区域。手势在手势中引入了竞技的概念事件在中尤为重要。大家好,我是郭树煜,Github GSY 系列开源项目的作者,系列包括有 GSYVideoPlayer 、GSYGitGithubApp(FlutterRea...
摘要:中的的线程是以事件循环和消息队列的形式存在,包含两个任务队列,一个是内部队列,一个是外部队列,而的优先级又高于。同时还有处理按住时的事件额外处理,同时手势处理一般在的子类进行。谷歌大会之后,有不少人咨询了我 Flutter 相关的问题,其中有不少是和面试相关的,如今一些招聘上也开始罗列 Flutter 相关要求,最后想了想还是写一期总结吧,也算是 Flutter 的阶段复习。 ⚠️系统完...
阅读 1898·2021-11-24 09:39
阅读 2134·2021-09-22 15:50
阅读 1991·2021-09-22 14:57
阅读 700·2021-07-28 00:13
阅读 1065·2019-08-30 15:54
阅读 2358·2019-08-30 15:52
阅读 2686·2019-08-30 13:07
阅读 3787·2019-08-30 11:27