摘要:開發(fā)之目錄頁面跳轉(zhuǎn)的頁面跳轉(zhuǎn),主要是通過來實現(xiàn),類似原生中的路由,分為靜態(tài)和動態(tài)種方式。添加添加,這時,就可以這樣使用你的認可,是我堅持更新博客的動力,如果覺得有用,就請點個贊,謝謝
前言這一篇,我們說說開發(fā)中會用到的地方。
【Flutter】開發(fā)之目錄
頁面跳轉(zhuǎn)Flutter的頁面跳轉(zhuǎn),主要是通過Navigator來實現(xiàn),類似原生中的路由,分為靜態(tài)和動態(tài)2種方式。
靜態(tài)
首先要在MaterialApp的routes中進行注冊
MaterialApp(
routes: {
"base": (BuildContext context) {
return BaseDemo();
},
"login": (BuildContext context) {
return LoginDemo();
}
},
title: "Flutter Demo",
theme: ThemeData(
primarySwatch: Colors.brown,
),
home: MainDemo(),
);
然后進行跳轉(zhuǎn)
RaisedButton(
child: Text("BaseWidget"),
onPressed: () {
Navigator.pushNamed(context, "base");
},
)
這種方式的缺點也比較明顯,首先需要注冊,其次是不能傳遞參數(shù)
動態(tài)
需要構(gòu)建MaterialPageRoute
RaisedButton(
child: Text("PageView"),
onPressed: () {
Navigator.push(context,
new MaterialPageRoute(builder: (BuildContext context) {
return PageViewDemo();
}));
},
)
關(guān)閉頁面
主要是通過pop方法來實現(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ā)之高級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觸發(fā)Widget重新構(gòu)建刷新,將傳遞來的值設(shè)置給目標(biāo)TextField。
回傳參數(shù)
首先是在關(guān)閉時,加入?yún)?shù) Navigator.of(context).pop("0000000"); 接收時,靜態(tài)和動態(tài)方式的參數(shù)回傳都是通過then方法來完成的,這里就以動態(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ò)請求
flutter內(nèi)置HttpClient可以用來做網(wǎng)絡(luò)請求,但是官方建議使用 dio
官方原話: HttpClient本身功能較弱,很多常用功能都不支持。我們建議您使用dio?來發(fā)起網(wǎng)絡(luò)請求,它是一個強大易用的dart http請求庫,支持Restful API、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載
我們就從善如流,直接使用dio來實現(xiàn)網(wǎng)絡(luò)請求
在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的更多用法,請參考 dio 官方文檔
將請求返回的數(shù)據(jù)展示到Text上
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("NetDemo"),
actions: [
RaisedButton(
child: Text("發(fā)起請求"),
onPressed: () {
getData();
},
),
],
),
body: Container(
child: Text("${jsonString}"),
),
);
}
JSON 序列化
上一步中,我們拿到了網(wǎng)絡(luò)請求返回的json,怎么把它轉(zhuǎn)換為對象呢?這就涉及到了序列化
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 代表動態(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"],
),
);
}
雖然說問題解決了,但是這種方式的弊端很明顯,我們直到運行時才知道值的類型,這樣會失去了大部分靜態(tài)類型語言特性:類型安全、自動補全和最重要的編譯時異常。這樣一來,我們的代碼可能會變得非常容易出錯。
2.手動序列化
只需要添加BaseModel,并傳入泛型,在其中添加json轉(zhuǎn)對象的方法即可。
添加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,
),
);
}
你的認可,是我堅持更新博客的動力,如果覺得有用,就請點個贊,謝謝
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/6980.html
摘要:前言最近比較熱門,但是成體系的文章并不多,前期避免不了踩坑我這篇文章主要介紹如何使用實現(xiàn)一個比較復(fù)雜的手勢交互,順便分享一下我在使用過程中遇到的一些小坑,減少大家入坑作者鏈接先睹為快本項目支持運行,效果如下對了,順便分享一下生成的小竅門,建 前言 Flutter最近比較熱門,但是Flutter成體系的文章并不多,前期避免不了踩坑;我這篇文章主要介紹如何使用Flutter實現(xiàn)一個比較復(fù)雜...
摘要:前言最近比較熱門,但是成體系的文章并不多,前期避免不了踩坑我這篇文章主要介紹如何使用實現(xiàn)一個比較復(fù)雜的手勢交互,順便分享一下我在使用過程中遇到的一些小坑,減少大家入坑作者鏈接先睹為快本項目支持運行,效果如下對了,順便分享一下生成的小竅門,建 前言 Flutter最近比較熱門,但是Flutter成體系的文章并不多,前期避免不了踩坑;我這篇文章主要介紹如何使用Flutter實現(xiàn)一個比較復(fù)雜...
摘要:穩(wěn)定性中大部分異常是不會引起應(yīng)用崩潰,更多會在上體現(xiàn)為紅色錯誤堆棧,上異常等等。它是的實現(xiàn)類,實現(xiàn)跨幀保存的就是存放在這里,同時它也充當(dāng)了和之間的橋梁。一整塊的重繪區(qū)域,決定重繪的影響區(qū)域。手勢在手勢中引入了競技的概念事件在中尤為重要。大家好,我是郭樹煜,Github GSY 系列開源項目的作者,系列包括有 GSYVideoPlayer 、GSYGitGithubApp(FlutterRea...
摘要:中的的線程是以事件循環(huán)和消息隊列的形式存在,包含兩個任務(wù)隊列,一個是內(nèi)部隊列,一個是外部隊列,而的優(yōu)先級又高于。同時還有處理按住時的事件額外處理,同時手勢處理一般在的子類進行。谷歌大會之后,有不少人咨詢了我 Flutter 相關(guān)的問題,其中有不少是和面試相關(guān)的,如今一些招聘上也開始羅列 Flutter 相關(guān)要求,最后想了想還是寫一期總結(jié)吧,也算是 Flutter 的階段復(fù)習(xí)。 ??系統(tǒng)完...
閱讀 1897·2021-11-24 09:39
閱讀 2134·2021-09-22 15:50
閱讀 1991·2021-09-22 14:57
閱讀 699·2021-07-28 00:13
閱讀 1064·2019-08-30 15:54
閱讀 2356·2019-08-30 15:52
閱讀 2686·2019-08-30 13:07
閱讀 3787·2019-08-30 11:27