認(rèn)識(shí) Flutter

Flutter 是谷歌的移動(dòng) UI 框架，可以快速在 IOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶界面。

Flutter 可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter 正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且 Flutter 是完全免費(fèi)、開(kāi)源的

終端命令

flutter run

運(yùn)行，并且顯示虛擬機(jī)

r

熱更新

p

• 第一次按下，顯示標(biāo)尺（表格）

• 再次按下，標(biāo)尺消失

o

• 如果在 Android 模式下，就會(huì)查看 iOS 模式下樣式

• 如果在 iOS 模式下，就會(huì)查看 Android 模式下樣式

q

退出，虛擬機(jī)關(guān)閉

R

熱重啟

熱更新的另一種方法

啟動(dòng) VSCode 的 Debug，等待啟動(dòng)后，每次想要調(diào)試的時(shí)候 ctrl+s

初始 Flutter 語(yǔ)法

案例

    import 'package:flutter/material.dart';

    void main() => runApp(new MyApp());

    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
    }

    class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;

    @override
    _MyHomePageState createState() => new _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
    int _counter = 0;

    void _incrementCounter() {
        setState(() {
        _counter++;
        });
    }

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
        appBar: new AppBar(
            title: new Text(widget.title),
        ),
        body: new Center(
            child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                new Text(
                'You have pushed the button this many times:',
                ),
                new Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
                ),
            ],
            ),
        ),
        floatingActionButton: new FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
        );
    }
    }

導(dǎo)入包

import 'package:flutter/material.dart';

此行代碼作用是導(dǎo)入了 Material UI 組件庫(kù)。Material 是一種標(biāo)準(zhǔn)的移動(dòng)端和 web 端的視覺(jué)設(shè)計(jì)語(yǔ)言，F(xiàn)lutter 默認(rèn)提供了一套豐富的 Material 風(fēng)格的 UI 組件

應(yīng)用入口

void main() => runApp(MyApp());

與 C/C++、java 類似，F(xiàn)lutter 應(yīng)用中 main 函數(shù)為應(yīng)用程序的入口。main 函數(shù)中調(diào)用了 runApp 方法，它的功能是啟動(dòng) Flutter 應(yīng)用。runApp 它接受一個(gè) Widget 參數(shù)，在本示例中它是一個(gè) MyApp 對(duì)象，MyApp() 是 Flutter 應(yīng)用的根組件

應(yīng)用結(jié)構(gòu)

    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return new MaterialApp(
                //應(yīng)用名稱  
                title: 'Flutter Demo', 
                theme: new ThemeData(
                    //藍(lán)色主題  
                    primarySwatch: Colors.blue,
                ),
                //應(yīng)用首頁(yè)路由  
                home: new MyHomePage(title: 'Flutter Demo Home Page'),
            );
        }
    }

• MyApp 類代表 Flutter 應(yīng)用，它繼承了 StatelessWidget 類，這也就意味著應(yīng)用本身也是一個(gè) widget

• Flutter 在構(gòu)建頁(yè)面時(shí)，會(huì)調(diào)用組件的 build 方法，widget 的主要工作是提供一個(gè) build() 方法來(lái)描述如何構(gòu)建 UI 界面（通常是通過(guò)組合、拼裝其它基礎(chǔ) widget）

• MaterialApp 是 Material 庫(kù)中提供的 Flutter APP 框架，通過(guò)它可以設(shè)置應(yīng)用的名稱、主題、語(yǔ)言、首頁(yè)及路由列表。MaterialApp 也是一個(gè) widget

• Scaffold 是 Material 庫(kù)中提供的頁(yè)面腳手架，它包含導(dǎo)航欄和 Body 以及 FloatingActionButton

StatefulWidget

    class MyHomePage extends StatefulWidget {
        MyHomePage({Key key, this.title}) : super(key: key);
        final String title;
        @override
        _MyHomePageState createState() => new _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
        ...
    }

MyHomePage 是 Flutter 應(yīng)用的首頁(yè)，它繼承自 StatefulWidget 類，表示它是一個(gè)有狀態(tài)的組件（Stateful widget）。

有狀態(tài)組件(Stateful widget)和無(wú)狀態(tài)組件(Stateless widget)的不同

1. Stateful widget 可以擁有狀態(tài)，這些狀態(tài)在 widget 生命周期中是可以變的，而 Stateless widget 是不可變的

2. Stateful widget 至少由兩個(gè)類組成

   • 一個(gè) StatefulWidget 類

   • 一個(gè) State 類；StatefulWidget 類本身是不變的，但是 State 類中持有的狀態(tài)在 widget 生命周期中可能會(huì)發(fā)生變化

_MyHomePageState 類是 MyHomePage 類對(duì)應(yīng)的狀態(tài)類

其他

     Widget build(BuildContext context) {
        return new Scaffold(
        appBar: new AppBar(
            title: new Text(widget.title),
        ),
        body: new Center(
            child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                new Text(
                'You have pushed the button this many times:',
                ),
                new Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
                ),
            ],
            ),
        ),
        floatingActionButton: new FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
        ),
        );
    }

• Scaffold 是 Material 組件庫(kù)中提供的一個(gè)組件，它提供了默認(rèn)的導(dǎo)航欄、標(biāo)題和包含主屏幕 widget 樹(shù)（后同“組件樹(shù)”或“部件樹(shù)”）的 body 屬性

• body 的組件樹(shù)中包含了一個(gè) Center 組件，Center 可以將其子組件樹(shù)對(duì)齊到屏幕中心。此例中，Center 子組件是一個(gè) Column 組件，Column 的作用是將其所有子組件沿屏幕垂直方向依次排列；此例中 Column 子組件是兩個(gè) Text，第一個(gè) Text 顯示固定文本，第二個(gè) Text 顯示 _counter 狀態(tài)的數(shù)值