[Flutter][Tips][1] Flutterが画期的な理由は◯◯型UIプログラミングである点
2020-06-26
2020-07-14
宣言型UIか、命令型UIか
UIプログラミングには宣言型UI、命令型UIの2種類あります。
宣言型は従来のUIプログラミング、命令型はFlutterやReactに代表される新しいUIプログラミングです。
公式ドキュメントに下記のUIの状態遷移を例に、二者の違いを解説してあったので、訳してみました。
命令型UIプログラミング:Win32、Web、Android、iOS
通常、Win32、Web、Android、iOSのフレームワークは命令型で、プログラマにとっても馴染みのあるスタイル。UIViewを手動で作って、UIが変更された時にメソッドとセッターを使って変更します。
例えば、Swiftだとこんな感じ。
class ViewController: UIViewController {
@IBOutlet weak var label:UILabel!
@IBOutlet weak var buttom:UIButton!
//画面が表示されるときに実行される
override func viewDidLoad() {
super.viewDidLoad()
...
}
...
//ボタンが押された時に実行される
@IBAction func tapButton(_ sender: Any) {
//インスタンスbを取得し、複製
...
//複製したインスタンスbを変更
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)
}
宣言型UIプログラミング:Flutter
対して、Flutterに代表される宣言型UIプログラミングでは、様々なUI状態間の遷移方法をプログラミングする必要がありません。現在のUI状態を記述しておけば、状態遷移はフレームワークにお任せすることができます。
class _MyHomePageState extends State { //ボタンが押された(状態が変わったら)らsetStateの中身が実行される void _incrementCounter() { setState(() { _counter++; }); } ... //StatefulWidgetは状態が変わるたびにリビルドしてsetStateを呼び出す @override Widget build(BuildContext context) { return Scaffold( appBar:AppBar( ... ), body: Center( ... return ViewB( color: red, child: ViewC(...), ), floatingActionButton: FloatingActionButton( //ボタンを押した時に呼ばれる処理。setStateが呼び出される。 onPressed: _incrementCounter, )
ポイントは、UIが変更されたときに古いインスタンスbを変更するのではなく、FlutterがRenderObjectsを使って新しいウィジェットインスタンスを作成してくれる点。
ざっくりいうと、開発者が「ボタン押した時」「この画面から戻ってきた時」みたいに場合わけしていちいちViewインスタンスをnewしなくていいってことですね。一回書いとけばOKだと。
多分。
確かに、Flutter開発してる時にnewってしたことないー。