國(guó)慶后面兩天在家學(xué)習(xí)整理了一波flutter，基本把能擼過(guò)能看到的代碼都過(guò)了一遍，此文篇幅較長(zhǎng)，建議保存(star)再看。傳送門(mén)： Nealyang personal blog

前言

畢竟前端出生，找(qi)到(shi)了(bing)感(mei)覺(jué)(ru)后(men)，其實(shí)就是一個(gè)UI框架，只不過(guò)他的引擎基于C++,底層基于Skia渲染，DartVM虛擬機(jī)以及Text and so on...

2018年6月21日Google發(fā)布Flutter首個(gè)release預(yù)覽版,作為Google baba大力推出的一種全新的響應(yīng)式，跨平臺(tái)，高性能的移動(dòng)開(kāi)發(fā)框架，勢(shì)必會(huì)火一波~沒(méi)別的，就是因?yàn)镚oogle baba，當(dāng)然，從目前看來(lái)也的確越來(lái)越火了。
Questions tagged [flutter]

img

本文我們從介紹flutter基本概念到梳理常用Widget到常用app demos編寫(xiě)到_放棄,希望可以幫助每一個(gè)像我一樣的初學(xué)者。有誤地方還望大神不吝賜教~

img

國(guó)際慣例，吹一波先~

直接移步Flutter官宣ppt

關(guān)于Dart

作為Flutter入門(mén)文章，Dart必然少不了，當(dāng)然，作為Flutter入門(mén)篇，Dart預(yù)發(fā)基礎(chǔ)必然不會(huì)過(guò)多介紹。

Dart入門(mén)傳送門(mén)：Dart or Dart2,或者從Dart中文網(wǎng)中學(xué)習(xí)也不錯(cuò)其實(shí).

這里我們說(shuō)說(shuō)為啥是Dart。

許多語(yǔ)言科學(xué)家認(rèn)為，一個(gè)人說(shuō)的自然語(yǔ)言會(huì)影響他們的思維方式。早起Flutter團(tuán)隊(duì)評(píng)估了十多種語(yǔ)言最終選擇了Dart，因?yàn)?strong>它符合他們構(gòu)建用戶(hù)界面的方式。

• Dart 是AOT 編譯的，編譯成快速可預(yù)測(cè)的本地代碼，使Flutter幾乎都可以使用Dart編寫(xiě)，這不僅使Flutter變的更快，而且?guī)缀跛械臇|西都可以定制
• Dart也可以JIT編譯，開(kāi)發(fā)周期異常快，工作流顛覆常規(guī)，也使得Flutter可以實(shí)現(xiàn)非常Diao的有狀態(tài)熱重載（別扯別的，人家是出生自帶哇）
• Dart可以更輕松地創(chuàng)建以60fps運(yùn)行的流暢動(dòng)畫(huà)和轉(zhuǎn)場(chǎng)。Dart可以在沒(méi)有鎖的情況下進(jìn)行對(duì)象分配和垃圾回收。就像JavaScript一樣，Dart避免了搶占式調(diào)度和共享內(nèi)存（因而也不需要鎖）。由于Flutter應(yīng)用程序被編譯為本地代碼，因此它們不需要在領(lǐng)域之間建立緩慢的橋梁（例如，JavaScript到本地代碼）。它的啟動(dòng)速度也快得多
• Dart使Flutter不需要單獨(dú)的聲明式布局語(yǔ)言，如JSX或XML，或單獨(dú)的可視化界面構(gòu)建器，因?yàn)镈art的聲明式編程布局易于閱讀和可視化。所有的布局使用一種語(yǔ)言，聚集在一處，F(xiàn)lutter很容易提供高級(jí)工具，使布局更簡(jiǎn)單
• Dart對(duì)于IOS、Android、Web FE來(lái)說(shuō)，都還比較友好。

具體選擇Dart的原因，以及向了解Dart的，移步為什么Flutter會(huì)選擇 Dart

關(guān)于Flutter

剛開(kāi)始接觸flutter心中難免會(huì)有疑惑，不是已經(jīng)有RN、Weex等各種跨平臺(tái)移動(dòng)開(kāi)發(fā) 了，flutter優(yōu)勢(shì)在哪呢？ 看我從網(wǎng)上盜的圖！

img

圖片來(lái)源

Everything is Widget

有一種說(shuō)法認(rèn)為函數(shù)式語(yǔ)言和命令式語(yǔ)言的不同在于命令式語(yǔ)言是給計(jì)算機(jī)下達(dá)指令而函數(shù)式語(yǔ)言是向計(jì)算機(jī)描述邏輯。這種思路在Flutter UI中得到了體現(xiàn)。Flutter不提倡去操作UI，它當(dāng)然也基本不會(huì)提供操作View的API，比如我們常見(jiàn)的類(lèi)似TextView.setText(),Button.setOnClick()這種是不會(huì)有的。對(duì)界面的描述是可以數(shù)據(jù)化的(類(lèi)似XML，JSON等)，而對(duì)界面的操作是很難數(shù)據(jù)化的，這很重要，響應(yīng)式需要方便可持續(xù)的將數(shù)據(jù)映射成界面。

在Flutter中用Widget來(lái)描述界面，Widget只是View的“配置信息”，編寫(xiě)的時(shí)候利用Dart語(yǔ)言一些聲明式特性來(lái)得到類(lèi)似結(jié)構(gòu)化標(biāo)記語(yǔ)言的可讀性。Widget根據(jù)布局形成一個(gè)層次結(jié)構(gòu)。每個(gè)widget嵌入其中，并繼承其父項(xiàng)的屬性。沒(méi)有單獨(dú)的“應(yīng)用程序”對(duì)象，相反，根widget扮演著這個(gè)角色。在Flutter中，一切皆為Widget，甚至包括css樣式。

<div class="greybox"> Lorem ipsum </div>.greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Georgia; } 

在flutter中我們編寫(xiě)為

var container = new Container( // grey box child: new Text( "Lorem ipsum", style: new TextStyle( fontSize: 24.0 fontWeight: FontWeight.w900, fontFamily: "Georgia", ), ), width: 320.0, height: 240.0, color: Colors.grey[300], ); 

可以看到我們css樣式中的font定義的樣式，在flutter中，需要new TextStyle，TextStyle就是一個(gè)Widget，并且樣式必須作用與Container中的child：text上，不存在web中樣式的繼承。

剛開(kāi)始接觸的同學(xué)就類(lèi)比于react中扯的，一切皆為組件吧，其實(shí)widget是對(duì)頁(yè)面UI的一種描述。他功能類(lèi)有點(diǎn)似于android中的xml，react中的jsx。widget在渲染的時(shí)候會(huì)轉(zhuǎn)化成element。Element相比于widget增加了上下文的信息。element是對(duì)應(yīng)widget，在渲染樹(shù)的實(shí)例化節(jié)點(diǎn)。由于widget是immutable的，所以同一個(gè)widget可以同時(shí)描述多個(gè)渲染樹(shù)中的節(jié)點(diǎn)。但是Element是描述固定在渲染書(shū)中的某一個(gè)特定位置的點(diǎn)。簡(jiǎn)單點(diǎn)說(shuō)widget作為一種描述是可以復(fù)用的，但是element卻跟需要繪制的節(jié)點(diǎn)一一對(duì)應(yīng)。那element是最終渲染的view么？抱歉，還不是。element繪制時(shí)會(huì)轉(zhuǎn)化成rendObject。RendObject才是真正經(jīng)過(guò)layout和paint并繪制在屏幕上的對(duì)象。在flutter中有三套渲染相關(guān)的tree，分別是：widget tree， element tree & rendObject tree。三者的渲染流程如下：

img

有沒(méi)有一種 jsx -> virtual Dom -> real dom滴感覺(jué)呢~

img

咳咳，后面會(huì)介紹基礎(chǔ)常用的Widget配合一些demo，大家可能對(duì)這個(gè)體會(huì)就會(huì)更加清晰一些。

組合大于繼承

Flutter中很多借鑒了react的思想，甚至包括后面會(huì)說(shuō)到的state。

Widget本身通常由許多更小的、單一的小小widget組成，甚至小到它單一下來(lái)并沒(méi)有什么作用的感覺(jué)，這些Widget幾幾組合形成一個(gè)強(qiáng)大的自定義的大大Widget。

比如一個(gè)Container，對(duì)于Web FE來(lái)說(shuō)可能就是個(gè)div，而他就是由很多的widget組成，這些widget負(fù)責(zé)布局、繪制、定位、大小等。我們可以使用各種姿勢(shì)來(lái)組合他們而不是繼承他們。類(lèi)層次結(jié)構(gòu)很淺且很寬，可以最大限度的增加可能組合的數(shù)量

img

框架結(jié)構(gòu)

img

上面的圖片是Flutter分層框架結(jié)構(gòu)圖，對(duì)大部分開(kāi)發(fā)者而言，最常用的是Widgets層，屏幕上可見(jiàn)與不可見(jiàn)的元素都由Widgets層實(shí)現(xiàn)，這些元素被稱(chēng)為Widget。在Widgets層在上層，有兩個(gè)現(xiàn)成的Widget庫(kù)，Material庫(kù)即Material Design的Widget庫(kù)，Material Design是Google I/O 2014發(fā)布的設(shè)計(jì)語(yǔ)言，目前成為統(tǒng)一Android Mobile、Android Table、Desktop Chrome等平臺(tái)的設(shè)計(jì)語(yǔ)言規(guī)范。Cupertino庫(kù)則是一個(gè)模仿iOS設(shè)計(jì)風(fēng)格的Widget庫(kù)。

底層是Flutter Engine虛擬機(jī)，在這一層次中需要了解一下的是Skia，Skia是Google研發(fā)的包括圖形、文本、圖像、動(dòng)畫(huà)等多方面的圖形引擎，不僅用于Google Chrome瀏覽器，Android系統(tǒng)也采用Skia作為繪圖處理引擎。

GPU渲染:

img

state生命周期:

img

作為初學(xué)者看上面的圖有點(diǎn)云里霧里的，且先做到心里有數(shù)~

Flutter走馬觀(guān)花

關(guān)于Flutter環(huán)境問(wèn)題這里不再贅述
此后~大量代碼來(lái)襲

基礎(chǔ)Widget之material版Hello world

國(guó)際慣例，hello world

import 'package:flutter/material.dart';class MyAppBar extends StatelessWidget{ MyAppBar({this.title});// final Widget title;@override Widget build(BuildContext context){ return new Container( height: 56.0, padding: const EdgeInsets.symmetric(horizontal:8.0), decoration: new BoxDecoration( color:Colors.blue[400] ), child: Row( children: <Widget>[ new IconButton( icon:new Icon(Icons.menu), tooltip:'Navigation menu', onPressed: (){ print('點(diǎn)擊Menu'); }, ), new Expanded( child:new Center( child:title ) ), new IconButton( icon:Icon(Icons.search), tooltip:'Search', onPressed: (){ print('點(diǎn)擊搜索按鈕'); }, ) ], ), ); } }class MyScaffold extends StatelessWidget{ @overrideWidget build(BuildContext context){ return Material( child: new Column( children:<Widget>[ new MyAppBar( title:new Text( 'Hello World', style:Theme.of(context).primaryTextTheme.title), ), new Expanded( child:new Center( child:Text('Hello World!!!') ) ) ] ), ); } }void main(){ runApp( new MaterialApp( title:'My app', home:new MyScaffold() ) ); } 

img
代碼地址：https://github.com/Nealyang/flutter

這個(gè)UI的確有些對(duì)不起人了，上面的title被擋住了。且先不去適配，后面我們使用Material提供的Scaffold即可

第一個(gè)例子，重點(diǎn)說(shuō)下代碼（用過(guò)的Widget記?。?/p>

• 一切都是Widget，且Widget前面的new可有可無(wú)。
• 類(lèi)MyAppBar和MyScaffold中使用了Container、Row、Column、Text、IconButton、Icon、BoxDecoration、Center、Expanded等常用Widget
  • Container一個(gè)擁有繪制、定位、調(diào)整大小的 widget。類(lèi)似于div，我們可以用它來(lái)創(chuàng)建矩形視圖，container 可以裝飾為一個(gè)BoxDecoration, 如 background、一個(gè)邊框、或者一個(gè)陰影。 Container 也可以具有邊距（margins）、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外， Container可以使用矩陣在三維空間中對(duì)其進(jìn)行變換。
  • Row、Column其實(shí)就是flex布局中的flex-direction
  • Expanded它會(huì)填充尚未被其他子項(xiàng)占用的的剩余可用空間。Expanded可以擁有多個(gè)children。然后使用flex參數(shù)來(lái)確定他們占用剩余空間的比例。更多細(xì)節(jié)可以參看：flutter控件Flexible和 Expanded的區(qū)別
• 先定義了一個(gè)MyAppBar的類(lèi)，構(gòu)造函數(shù)中接受一個(gè)Widget的title，其實(shí)我們也可以接受String title然后在類(lèi)中自己去new Title(title)
• runApp函數(shù)接受給定的Widget并使用其作為widget根。
• widget的主要工作是實(shí)現(xiàn)一個(gè)build函數(shù)，用以構(gòu)建自身。一個(gè)widget通常由一些較低級(jí)別widget組成。Flutter框架將依次構(gòu)建這些widget，直到構(gòu)建到最底層的子widget時(shí)，這些最低層的widget通常為RenderObject，它會(huì)計(jì)算并描述widget的幾何形狀。

基本交互之material版Hello world

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { // app的根Widget @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( // 這是設(shè)置的app主題 // 運(yùn)行后你可以看到app有一個(gè)藍(lán)色的toobar，并且在不退出app的情況下修改代碼會(huì)熱更新 primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);// 這是應(yīng)用中一個(gè)基類(lèi)，繼承自StateFulWidget，意味著這個(gè)類(lèi)擁有一個(gè)state對(duì)象，該對(duì)象里的一些字段會(huì)影響app的UI // 這個(gè)類(lèi)是state的一些配置項(xiàng)。通過(guò)構(gòu)造函數(shù)來(lái)獲取值，這個(gè)值一般在State中消費(fèi)，并且使用final關(guān)鍵字。其實(shí)類(lèi)似于react中的defaultPropsfinal String title;@override _MyHomePageState createState() => new _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> { int _counter = 0;void _incrementCounter() { setState(() { // setState方法告訴Flutter，這個(gè)State中有些值發(fā)生了變化，以便及時(shí)將新值更新到UI上， // 如果我不通過(guò)setState更改_count字段，那么Flutter并不會(huì)調(diào)用build匿名函數(shù)去更新界面 _counter++; }); }@override Widget build(BuildContext context) { // build方法會(huì)在每次setState的時(shí)候重新運(yùn)行，例如上面的_incrementCounter方法被調(diào)用 //Flutter已經(jīng)被優(yōu)化了重新構(gòu)建的方法，所以你只會(huì)去更新需要去更新的部分，不必去單獨(dú)更新里面的一些更細(xì)小的widget，類(lèi)似于React中diff return new Scaffold( appBar: new AppBar( // 這里我們使用從App.build方法中初始化MyHomePage時(shí)候傳入的title值來(lái)設(shè)置我們的title title: new Text(widget.title), ), body: new Center( // Center是一個(gè)布局Widget，他只有一個(gè)child（區(qū)分row or cloumn等是children），并且會(huì)將child的widget居中顯示 child: new Column( // Column也是一個(gè)布局widget，他可以有多個(gè)子widget // Column 有很多的屬性去控制他的大小以及子widget的位置，這里我們使用mainAxisAlignment來(lái)讓children在垂直線(xiàn)上居中， // 這里的主軸就是垂直的，因?yàn)镃olumn就是垂直方向的，這里可以大概想象為display:flex，flex-directions:column,align-item,justifyContent。。。 mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'Hello World!', style:TextStyle( fontSize:24.0, color: Colors.redAccent, decorationStyle:TextDecorationStyle.dotted, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, decoration: TextDecoration.underline ) ), 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), ),//最后這個(gè)逗號(hào)有利于格式化代碼 ); } } 

img

注釋上基本已經(jīng)加了，這里重點(diǎn)說(shuō)下，StatefulWidget和StatelessWidget.

• Stateless widgets 是不可變的，這意味著它們的屬性不能改變——所有的值都是 final
• Stateful widgets 持有的狀態(tài)可能在 widget 生命周期中發(fā)生變化，實(shí)現(xiàn)一個(gè) stateful widget 至少需要兩個(gè)類(lèi)：1）一個(gè) StatefulWidget 類(lèi)；2）一個(gè) State 類(lèi)，StatefulWidget 類(lèi)本身是不變的，但是 State 類(lèi)在 widget 生命周期中始終存在
• 如果需要變化需要重新創(chuàng)建。StatefulWidget可以保存自己的狀態(tài)。那問(wèn)題是既然widget都是immutable的，怎么保存狀態(tài)？其實(shí)Flutter是通過(guò)引入了State來(lái)保存狀態(tài)。當(dāng)State的狀態(tài)改變時(shí)，能重新構(gòu)建本節(jié)點(diǎn)以及孩子的Widget樹(shù)來(lái)進(jìn)行UI變化。注意：如果需要主動(dòng)改變State的狀態(tài)，需要通過(guò)setState()方法進(jìn)行觸發(fā)，單純改變數(shù)據(jù)是不會(huì)引發(fā)UI改變的。

還有關(guān)于key的部分這里就不做介紹了，其實(shí)就類(lèi)似與react中key的概念，便于diff，提高效率的。
具體可以查看 Key

到這里，我們看到了Flutter的一些基本用法，Widget的套用、樣式的編寫(xiě)、事件的注冊(cè)，如果再學(xué)習(xí)下一些路由、請(qǐng)求、緩存是不是就可以自己開(kāi)發(fā)APP了呢 img

OK，強(qiáng)化下編寫(xiě)界面，咱再來(lái)些demo吧~

布局Widget

img

自己寫(xiě)的后，發(fā)現(xiàn)跟官網(wǎng)實(shí)現(xiàn)方式不同，代碼地址

具體實(shí)現(xiàn)可以參照官網(wǎng)教程

這里不再贅述，下面我們說(shuō)下對(duì)于布局的理解和感受以及常用布局widget。

從一個(gè)前端的角度來(lái)說(shuō)，說(shuō)到畫(huà)界面，可能還是對(duì)布局這塊比較敏感

img

[圖片上傳失敗...(image-1f7c51-1543900799550)])

當(dāng)然，這里我們還是說(shuō)下目前常用的flex布局，基本拿到頁(yè)面從大到小拆分后就是如上圖。

所以Widget布局其實(shí)也就是Row和Column用的最多，然后由于Flutter一切皆為組件的理念，可能會(huì)需要用到別的類(lèi)css布局的Widget，譬如：Container。其實(shí)咱就理解為塊元素吧！

下面簡(jiǎn)單演示下一些常用的Widget，這里就不在贅述Row和Column了。傳送門(mén)：布局Widget

Container

可以添加padding、margin、border、background color、通常用于裝飾其他Widget

img

代碼鏈接 Nealyang/flutter

class MyHomePage extends StatelessWidget{ @override Widget build(BuildContext context){ Container cell (String imgSrc){ return new Container( decoration: new BoxDecoration( border:Border.all(width:6.0,color:Colors.black38), borderRadius: BorderRadius.all(const Radius.circular(8.0)) ), child: Image.asset( 'images/$imgSrc', width: 180.0, height: 180.0, fit: BoxFit.cover, ), ); }return Container( padding: const EdgeInsets.all(10.0), color: Colors.grey, child: new Column( mainAxisSize: MainAxisSize.min, children:<Widget>[ new Container( margin: const EdgeInsets.only(bottom:10.0), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children:<Widget>[ cell('1.jpg'), cell('2.jpg') ] ), ), new Container( margin: const EdgeInsets.only(bottom:10.0), child: new Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children:<Widget>[ cell('3.jpg'), cell('4.jpg') ] ), ), ] ), ); } } 

該布局中每個(gè)圖像使用一個(gè)Container來(lái)添加一個(gè)圓形的灰色邊框和邊距。然后使用容器將列背景顏色更改為淺灰色。

GridView

可滾動(dòng)的網(wǎng)格布局，理解為display：grid

GridView提供兩個(gè)預(yù)制list，當(dāng)GridView檢測(cè)到內(nèi)容太長(zhǎng)時(shí)，會(huì)自動(dòng)滾動(dòng)。如果需要構(gòu)建自定義grid，可是使用GridView.count或 GridView.extent來(lái)指定允許設(shè)置的列數(shù)以及指定項(xiàng)最大像素寬度。

img

代碼鏈接 Nealyang/flutter

List<Container> _buildGridTileList(int count) {return new List<Container>.generate( count, (int index) => new Container(child: new Image.asset('images/${index+1}.jpg'))); }Widget buildGrid() { return new GridView.extent( maxCrossAxisExtent: 150.0, padding: const EdgeInsets.all(4.0), mainAxisSpacing: 4.0, crossAxisSpacing: 4.0, children: _buildGridTileList(10)); }class MyHomePage extends StatelessWidget{ @override Widget build(BuildContext context){ returnnew Center( child: buildGrid(), ); } } 

如上是指定maxCrossAxisExtent，我們可以直接去指定列數(shù)，例如官網(wǎng)的代碼實(shí)例：

new GridView.count( primary: false, padding: const EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text('He\'d have you all unravel at the'), const Text('Heed not the rabble'), const Text('Sound of screams but the'), const Text('Who scream'), const Text('Revolution is coming...'), const Text('Revolution, they...'), ], ) 

通過(guò)crossAxisCount直接指定列數(shù)。

Stack

層疊布局，position為absolute的感jio~

使用Stack來(lái)組織需要重疊的widget。widget可以完全或部分重疊底部widget。子列表中的第一個(gè)widget是base widget; 隨后的子widget被覆蓋在基礎(chǔ)widget的頂部。Stack的內(nèi)容不能滾動(dòng)。有點(diǎn)類(lèi)似于weex中的設(shè)置了absolute的感覺(jué)。底部組件永遠(yuǎn)在上面組件的上面。

ListView

可滾動(dòng)的長(zhǎng)列表，可以水平或者垂直。

Card

Material風(fēng)格組件，卡片，AntD啥的組件庫(kù)經(jīng)常會(huì)出現(xiàn)的那種組件。

在flutter中，Card具有圓角和陰影，更改Card的elevation屬性可以控制陰影效果。

ListTile

Material風(fēng)格組件，我理解為常用的列表Item的樣式，最多三行文字，可選的行前、行尾的圖標(biāo)

img

代碼鏈接 Nealyang/flutter

總結(jié)

從目前我個(gè)人淺薄的Flutter技能來(lái)說(shuō)，最大的困難可能是找不到合適的Widget去實(shí)現(xiàn)想要的布局或者效果，甚至包括css樣式作用于那個(gè)Widget，譬如Opacity是一個(gè)widget而不是一個(gè)css樣式~

所以對(duì)于Flutter，我們還是要多折騰，多些demo，類(lèi)似網(wǎng)上很多仿xxxApp等~

對(duì)于畫(huà)界面，更多的還可以參看下官網(wǎng)教程：Flutter for Web開(kāi)發(fā)者

一切才剛剛開(kāi)始

Flutter一切基于Widget，搞定widget就好比，搞定英語(yǔ)單詞一樣，單詞、詞組都賊6了還怕英語(yǔ)？

別急別急，借用張晟哥的圖來(lái)給大家消消火氣~

widgets

所以說(shuō)，F(xiàn)lutter有一個(gè)龐大的組件體系，需要花費(fèi)非常多的時(shí)間去梳理。

!更重要的是：多實(shí)踐

本來(lái)最后一章是自己寫(xiě)的一個(gè)demo的講解~

可惜時(shí)間評(píng)估不準(zhǔn)確，漏評(píng)估了假期惰性。。。考慮篇幅，后面補(bǔ)上仿XXX的Demo吧~~

img

參考鏈接 && 好文推薦

• Flutter的原理及美團(tuán)的實(shí)踐
• Flutter從入門(mén)到進(jìn)階
• Flutter快速上車(chē)之Widget
• 深入了解Flutter界面開(kāi)發(fā)
• flutter控件Flexible和 Expanded的區(qū)別
• 常用Widget
• 閑魚(yú)專(zhuān)家詳解:Flutter React編程范式實(shí)踐
• Flutter 布局詳解
• 在Flutter中構(gòu)建布局
• Flutter中文網(wǎng)

Demo 推薦

• 基于Flutter的俄羅斯方塊小游戲
• 基于Google Flutter的開(kāi)源中國(guó)客戶(hù)端
• 實(shí)時(shí)聊天APP
• 超完整的Flutter項(xiàng)目 維護(hù)個(gè)人Github
• 山寨掘金
• 開(kāi)眼視頻

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18405.html