初學Flutter,簡單的做個筆記,實時更新
1.Flutter中進行頁面跳轉:
onPressed: () {
Navigator.push(context, new MaterialPageRoute(builder: (context)=> new MyScaffold(),)
);
}
或者,在main.dart中統一管理
home: MyHomePage(),
//路由
routes: <String, WidgetBuilder> {
'/LayoutPage':(BuildContext context) =>new LayoutPage(),
},
在需要需要跳轉的地方
Navigator.of(context).pushNamed('/LayoutPage');
2.類之間傳值
new MyFadeTest(title: 'Fade Demo')
接收類
final String title;
//帶參數的構造方法
MyFadeTest({Key key, this.title}) : super(key: key);
使用這個值
new Text(widget.title)
或者:
final String lable;
CustomButton(this.lable);
@override
Widget build(BuildContext context) {
return new RaisedButton(onPressed: (){},child: new Text(lable));
}
當使用CustomButton類時候
new CustomButton('Hello')
3.斷點調試
在VScode編輯器中,跟AS同樣的方式打一個斷點,之後按F5,當代碼執行到斷點處就會停止
參考資料:http://www.jintiankansha.me/t/uCAhjuWVDQ
打印日誌:print() ;結果會打印到控制檯 DEBUG CONSOLE中。
4.異步操作
@override
Widget build(BuildContext context) {
// 當請求完數據後調用setState()方法,會重新調用此方法
}
//async 相當於異步操作 await等待這個耗時操作
void loadData() async {
String dataURL = "https://jsonplaceholder.typicode.com/posts";
http.Response response = await http.get(dataURL);
// setState 會觸發build方法再次運行並更新數據
setState(() {
List widgets = json.decode(response.body);
});
}
說明:Dart是單線程語言,所以在UI線程執行網絡請求不會導致程序阻塞。但是如果太大數據時候,需要使用Isolates。
5.動態顯示隱藏View
new Offstage(
// true:隱藏 false:顯示
offstage: false,
child: new RaisedButton(
child: new Text('fff'),
onPressed: _layout,
),
)6.操作符
var i;
init() {
i ?? 999; //如果i爲空,就返回999
i ??= 999; // 如果i爲空,就爲i賦值999
var result = i ~/ 99; //整除
// result =10
}
7.快捷操作
-.在編輯器中輸入stl時候,會自動生成無狀態控件模塊,輸入stf會成功有狀態控件模塊
8.佈局相關
1.Widget和Widget之間通過child進行嵌套。
2.有的widget只能有一個child,如果想用多個child,需要在外層包裹一個children:[]
9.ListTitle 佈局很好用
參考:https://juejin.im/post/5c88d6c4f265da2de970bc24
10.Android原生接收Flutter傳值中文亂碼問題
String decodeValue = URLDecoder.decode(value, "UTF-8");
11.原生接入Flutter熱重載
Terminal中命令行進入flutter_module目錄下, 輸入命令 flutter attach,然後 Run一次項目,之後就可以在Terminal 中輸入r(熱加載)、R(熱重啓)
12.Flutter中使用本地資源(文件、圖片)
需要先在pubspec.yaml文件中聲明需要assets,比如我的圖片路徑是assets/images
flutter:
uses-material-design: true
assets:
- assets/images/class_default.png