Flutter入门篇(一)
距離Google發布Flutter已經有很長一段時間了,又是一門新的技術,那么我們到底是學呢還是學呢還是學呢?不要問我,我不知道,鬼特么知道我這輩子還要學習多少東西。其實新技術的出現也意味著,老技術會面臨淘汰危機,而你將面臨著失業危機。用一句話來說:你永遠不知道意外和驚喜哪個先來~~
環境搭建
Flutter的安裝就不在這里演示了,可以從下面幾個網站上學習安裝。
- Flutter官網
- Flutter中文網
- Flutter社區
這些網站也通過豐富的Flutter學習資料
Flutter的第一個應用
在創建一個Flutter應用后,我們可以看到如下的demo代碼。(其中注釋是個人翻譯,如有不正確請諒解)
import 'package:flutter/material.dart';//應用啟動 void main() => runApp(MyApp());class MyApp extends StatelessWidget {// 這個App的根WidgetWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo', //應用名theme: ThemeData(// 這個應用的主題//// 你用 "flutter run"運行這個應用,你將看到一個藍色的ToolBar。// 你也可以改變下面primarySwatch 的值,從Colors.blue變成 Colors.green。// 然后執行 "hot reload" ,可以看到計數器并沒有恢復初始狀態0,這個應用也并沒有重啟。primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);// 我們可以知道這個MyHomePage 的 widget 是這個應用的首頁,而且它是有狀態的,//這就意味著下面定義的State對象中的字段能夠影響應用的顯示。//這個類是這個狀態的配置類,它所持有的這個title值是其父類提供的,//被創建狀態的方法使用,在Widget的子類中總是被標記為“final”final String title;_MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {// 回調setState去告訴Flutter framework 已經有一些狀態發生了改變,// 讓下面這個返回Widget的build方法去展示更新的內容。當然,如果我們沒有回調// 這個setState,那么build方法也不會被調用,也就不會有什么更新展示。_counter++;});}Widget build(BuildContext context) {// 這個方法在每次setState的時候被調用,例如上面的_incrementCounter方法。//// Flutter framework 是被優化過的,所以它的重新運行build方法是非??焖俚?#xff0c;只需要// 運行你需要更新的內容,不需要去分別所有的widgets的實例。return Scaffold(appBar: AppBar(// 我們能夠使用在App.build方法中創建的值,并且賦值// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text(widget.title),),body: Center(// Center是一個布局Widget,它提供一個child 并且規定了只能居于父類的正中心child: Column(// Column 也是一個布局Widget,它有一系列的子布局并且這些子布局都是垂直方向的。// 默認情況下,Column會調整它自己的大小去適應子級的橫向大小。//// 調用 "debug painting"可以看每一個widget的線框//// Column 有大量的屬性去控制自己的大小和它子級的位置,這里使用了mainAxisAlignment// 讓其子布局內容是垂直方向排列。mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} }復制代碼運行Flutter
我使用的是Android Studio 創建的Flutter應用,可以看到如下所示的編譯界面
- 點擊Run (就是那個綠色的三角)之后我們可以看到如下運行結果:
- 點擊藍色的“+”號我們可以看到,中間的數字一直在增加,所以demo給我的是一個簡單計數器的實現
Demo分析
我們從官網知道Flutter是用Dart語言進行編碼的,我們是不是需要單獨去學習掌握這門語言呢?在我看來是不需要的,因為單獨去學習一門新的語言的過程是很枯燥的,我們可以從Demo中去學習,這樣更高效一些。所以我們來分析一下上述例子給了我們一個怎樣的知識點。
import 'package:flutter/material.dart';void main() => runApp(MyApp()); class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} } 復制代碼通過上述代碼我們知道:
- 首先導入了一個叫做material的dart文件。
- 通過一個main()方法調用了MyApp的一個類。
- 這個MyApp就是這個應用的入口。(根據runApp可知)
對于一個Flutter小白就會有疑問了:
- 為什么要導入material的文件呢? 遇到這樣不明白的地方,我們就可以去官網查資料了,官網給的回答如下:
Flutter提供了許多widgets,可幫助您構建遵循Material Design的應用程序。Material應用程序以MaterialApp widget開始, 該widget在應用程序的根部創建了一些有用的widget,其中包括一個Navigator, 它管理由字符串標識的Widget棧(即頁面路由棧)。Navigator可以讓您的應用程序在頁面之間的平滑的過渡。 是否使用MaterialApp完全是可選的,但是使用它是一個很好的做法。
也就是說主要是為了向開發者提供已經實現好了的material設計風格,我們可以進入(Windows下Ctrl +鼠標左鍵,Mac下Command+鼠標左鍵 )material.dart源碼,可以發現如下:
library material;export 'src/material/about.dart'; export 'src/material/animated_icons.dart'; ... // 很多,這里就不占用大量篇幅 export 'widgets.dart'; 復制代碼從官網我們知道已經有大量的widgets供給我們使用,那么這些在哪里呢? 當然就是上面的widgets.dart文件了,我們進入這個文件中可以看到內容大致如下:
export 'src/widgets/animated_cross_fade.dart'; ... export 'src/widgets/framework.dart'; ... export 'src/widgets/will_pop_scope.dart'; 復制代碼也是不同的dart文件,我們進入第一個animated_cross_fade:
class AnimatedCrossFade extends StatefulWidget { /// Creates a cross-fade animation widget.... } 復制代碼從給的注釋可以知道,這就是一個帶淡入淡出動畫的Widget,這個Widget繼承自StatefulWidget,可以看到StatefulWidget也就是繼承自Widget
abstract class StatelessWidget extends Widget {/// Initializes [key] for subclasses.const StatelessWidget({ Key key }) : super(key: key);/// Creates a [StatelessElement] to manage this widget's location in the tree.////// It is uncommon for subclasses to override this method.StatelessElement createElement() => StatelessElement(this);Widget build(BuildContext context); }abstract class StatefulWidget extends Widget {/// Initializes [key] for subclasses.const StatefulWidget({ Key key }) : super(key: key);/// Creates a [StatefulElement] to manage this widget's location in the tree.////// It is uncommon for subclasses to override this method.StatefulElement createElement() => StatefulElement(this);State createState(); } 復制代碼到此我們驚奇的發現,Demo代碼中的MyApp繼承的StatelessWidget原來也在這里,但是MyHomePage卻繼承自StatefulWidget,這是為什么呢?這就會引出第二個問題:
- StatelessWidget和StatefulWidget 的區別是什么呢?
StatefulWidget可以擁有狀態,這些狀態在widget生命周期中是可以變的,而StatelessWidget是不可變的。 StatefulWidget至少由兩個類組成:
- 一個StatefulWidget類。
- 一個 State類; StatefulWidget類本身是不變的,但是 State類中持有的狀態在widget生命周期中可能會發生變化。
StatelessWidget用于不需要維護狀態的場景,它通常在build方法中通過嵌套其它Widget來構建UI,在構建過程中會遞歸的構建其嵌套的Widget
這也就是為什么MyApp是繼承自StatelessWidget 而 MyHomePage 繼承自StatefulWidget:
- MyApp中不需要更改狀態,僅僅嵌套一個MyHomePage 的Widget
- 而MyHomePage 要繼承StatefulWidget的原因是:通過點擊+去增加數字大小,改變了顯示的狀態,所以需要繼承StatefulWidget。
分析執行方式
我們回到 MyApp這個類的build方法中,可以看到它返回了一個MaterialApp的一個Widget,在前面說過,Material Design的應用是以MaterialApp widget開始的,所以返回了一個MaterialApp
return MaterialApp(title: 'Flutter Demo', //應用名theme: ThemeData(primarySwatch: Colors.blue, // 主題色),home: MyHomePage(title: 'Flutter Demo Home Page'), // 首頁); 復制代碼從上可以知道由于計數是一個可變的更新狀態,那么就需要兩個類去實現:
- 一個繼承自StatefulWidget, 就是我們的MyHomePage
- 一個繼承自State用于維護這個狀態,也就是我們的_MyHomePageState
MyHomePage這個類里面沒有太多內容:
- 通過構造方法將title值傳入
- 通過createState 返回了一個_MyHomePageState的有狀態的State
到此處我們知道了實際上對數據的操作肯定就在_MyHomePageState中:
class _MyHomePageState extends State<MyHomePage> {int _counter = 0;void _incrementCounter() {setState(() {// 回調setState去告訴Flutter framework 已經有一些狀態發生了改變,// 讓下面這個返回Widget的build方法去展示更新的內容。當然,如果我們沒有回調// 這個setState,那么build方法也不會被調用,也就不會有什么更新展示。_counter++;});}Widget build(BuildContext context) {// 這個方法在每次setState的時候被調用,例如上面的_incrementCounter方法。//// Flutter framework 是被優化過的,所以它的重新運行build方法是非常快速的,只需要// 運行你需要更新的內容,不需要去分別所有的widgets的實例。return Scaffold(appBar: AppBar(// 我們能夠使用在App.build方法中創建的值,并且賦值title: Text(widget.title),),body: Center(// Center是一個布局Widget,它提供一個child 并且規定了只能居于父類的正中心child: Column(// Column 也是一個布局Widget,它有一系列的子布局并且這些子布局都是垂直方向的。// 默認情況下,Column會調整它自己的大小去適應子級的橫向大小。//// 調用 "debug painting"可以看每一個widget的線框//// Column 有大量的屬性去控制自己的大小和它子級的位置,這里使用了mainAxisAlignment// 讓其子布局內容是垂直方向排列。mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);} 復制代碼可以看出這里提供了兩個方法:build和_incrementCounter,我們已經知道一般Widget里面的build方法返回的是一個頁面布局。
_incrementCounter的實現內容很簡單: 就是使用setState方法去自增這個_counter,但此處一點要注意,更改狀態一定要使用 setState,如果不調用 setState將不會有任何的改變,即使你自增了這個_counter。(可以自己嘗試一下)
我們從注釋中可知,這個build方法在每次更新狀態(setState)的時候進行調用,我們在build的方法中增加一行打印的代碼進行驗證:
Widget build(BuildContext context) {print("build again");return Scaffold(...); 復制代碼發現果然是每一次點擊+就會調用一次build方法,那這就會引出一個問題:這樣每一次都進行更新,會影響新能嗎?
Flutter framework 被優化于快速重啟運行,只需要運行你需要更新的內容,不需要去分別重新構建所有的widgets的實例。
所以完全不必擔心這個每次都執行build方法會影響性能。
從整體的布局我們知道,build返回了一個Scaffold的widget:
class Scaffold extends StatefulWidget {/// Creates a visual scaffold for material design widgets.const Scaffold({Key key,this.appBar,this.body,this.floatingActionButton,this.floatingActionButtonLocation,this.floatingActionButtonAnimator,this.persistentFooterButtons,this.drawer,this.endDrawer,this.bottomNavigationBar,this.bottomSheet,this.backgroundColor,this.resizeToAvoidBottomPadding,this.resizeToAvoidBottomInset,this.primary = true,this.extendBody = false,this.drawerDragStartBehavior = DragStartBehavior.down,}) : assert(primary != null),assert(extendBody != null),assert(drawerDragStartBehavior != null),super(key: key);復制代碼可以知道,這個也是繼承于StatefulWidget,里面有很多可以設置的初始值,這里使用到了三個:
- appBar-布局標題欄
- body-內容顯示區域
- floatingActionButton-浮動按鈕
將從MyApp攜帶的title賦值給appBar的title,讓其顯示在界面頂端。內容(body)使用了一個Center居中布局,讓其child(也是一個widget)只能顯示在當前正中位置。
class Center extends Align {/// Creates a widget that centers its child.const Center({ Key key, double widthFactor, double heightFactor, Widget child }): super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child); } 復制代碼緊接著返回了一個Column的child,這個widget 是縱向排列,可有有一系列的子集,所以在Column 布了兩個Text,一個顯示固定文本,一個顯示可變的文本:
class Column extends Flex {Column({Key key,MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,MainAxisSize mainAxisSize = MainAxisSize.max,CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,TextDirection textDirection,VerticalDirection verticalDirection = VerticalDirection.down,TextBaseline textBaseline,List<Widget> children = const <Widget>[],}) : super(children: children,key: key,direction: Axis.vertical,mainAxisAlignment: mainAxisAlignment,mainAxisSize: mainAxisSize,crossAxisAlignment: crossAxisAlignment,textDirection: textDirection,verticalDirection: verticalDirection,textBaseline: textBaseline,); } 復制代碼需要注意的是,對變量的占位符使用的$符號,就跟java中使用%是一樣的。 最后一個就是我們點擊事件的按鈕floatingActionButton,通過onPressed去調用_incrementCounter方法實現自增計數。 整個運行的流程就到這里算是講完了。
Hot Reload(熱加載)
在文章開始的時候我們知道,我們有一個一道雷一樣的圖標,那就是Hot Reload,這個怎么個意思呢?就是說你如果更新了你的代碼,不用重新運行整個都重新運行,直接使用這個就可以了,可以很迅速的將你更新的內容重新顯示。 在這里有一個很有意思的事情: 我們點擊+讓計數器顯示到1,然后將主題的顏色改成綠色:primarySwatch: Colors.green,
class MyApp extends StatelessWidget {// This widget is the root of your application.Widget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// 主題從藍色更改為綠色primarySwatch: Colors.green,),home: MyHomePage(title: 'Flutter Demo Home Page'),);} } 復制代碼然后點擊hot reload 會發現,我們的主題更改為綠色了,但是我的計數器顯示的數字仍然是1,并沒有變成0。這也印證了上面的那句話,hot reload只會更改所需要更改的內容,不會影響全部。
總結
這里在做一個總結,希望對才你有所幫助
- 在flutter中,絕大部分可使用的內容都是widget
- 如果只是顯示內容,不涉及更改狀態,就是用StatelessWidget;如果涉及狀態的變更就是用StatefulWidget
- StatefulWidget的實現需要兩步:一個是需要創建繼承StatefulWidget的類;另一個就是創建繼承State的類,一般在State中控制整個狀態。
- 更新狀態一定要調用setState方法,不然不會起作用
- hot reload只會影響更改的內容
總結
以上是生活随笔為你收集整理的Flutter入门篇(一)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaScript君,请您坦诚相待~~
- 下一篇: POJ 1904 King's Ques