這是上篇文章文末提到的「第三個教程」的快速自學筆記。app
讀音 /'wɪdʒɪt/
危機特,文檔說借鑑了 React。我認爲 Widget 至關於 React 裏的組件 Component。less
下文將 Widget 所有稱爲「部件」。ide
部件的特色函數
這是 Flutter 應用必須調用的 API,接受一個部件。我的認爲這很像是 React 的 ReactDOM.render 操做。佈局
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
複製代碼
以上代碼的做用:post
經常使用的部件有:flex
若是你想用一些 Material 風格的部件,只須要作這幾件事就能夠:動畫
在 pubspec.yml 裏添加以下代碼ui
flutter:
uses-material-design: true
複製代碼
runApp 的時候使用 MaterialApp,並使用 Material 部件
runApp(MaterialApp(
title: 'My app', // used by the OS task switcher
home: Material(),
));
複製代碼
import 'package:flutter/material.dart';
Navigator:相似於 ReactRouter
AppBar:頂部的 bar
AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: Text('Example title'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
)
複製代碼
Scaffold: 最經常使用的佈局部件
Scaffold(
appBar: AppBar(...),
body: Center(...),
floatingActionButton: ...
);
複製代碼
這些傳參方式很像 Vue 的命名插槽。
這是一個自定義 button 部件:
class MyButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector( // <-- 注意看這裏
onTap: () {
print('MyButton was tapped!');
},
child: Container(
height: 36.0,
padding: ...,
margin: ...,
decoration: ...,
child: Center(
child: Text('Engage'),
),
),
);
}
}
複製代碼
無狀態部件從父級接收數據,並把數據存在本身的 final 成員變量裏(相似於 JS 的 const)。
有狀態的部件則知道如何建立 state 對象,並維持 state 對象。
如何使用呢?
首先聲明一個 StatefulWidget
class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
複製代碼
這個部件須要重寫 createState 方法,而這個方法的返回值的類型,必須繼承自 State 類。
_CounterState 是如何繼承 State 的呢
class _CounterState extends State<Counter> {
int _counter = 0;
void _increment() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
RaisedButton(
onPressed: _increment,
child: Text('Increment'),
),
Text('Count: $_counter'),
],
);
}
}
複製代碼
'$_counter'
混入語法_increment
,這個 _increment
會調用 State 提供的 setState 函數,給 setState 函數傳入一個函數,這個傳入的函數能夠對數據進行修改。StatefulWidget 有 createState 方法,State 有 initState 方法。
Flutter 調用 createState 方法後,獲得一個 State 對象,而後調用這個 State 對象的 initState 方法。
你的自定義 State 類能夠重寫 initState 方法,這個方法只會調用一次。好比你能夠重寫 initState 來配置動畫或者訂閱事件。
當一個 State 對象快死的時候,Flutter 會調用 State 對象的 dispose 方法。你也能夠重寫 dispose 方法,好比在裏面取消 timer 或者取消訂閱。
Flutter 默認是經過部件的 runtimeType 和出現順序來肯定一個部件的身份的,這樣才能在對比新舊部件樹的過程當中肯定哪一個是哪一個。若是你給部件賦予了 key,那麼就不用根據「出現順序」來惟一肯定組件了,由於這種方式不太靠譜。
我的認爲跟 React 的 key 有相同的做用。
key 分爲兄弟間的 key 和全局 key。目前還不知道應用場景的區別。大部分時候應該只須要用兄弟間的 key 用來區分兄弟就好了。
下一篇文章打算看看 Flutter 如何發起網絡請求。
未完待續……