一：Widget

在flutter中，一切的顯示都是在Widget中，Widget 是一切顯示的基礎。
作為響應式的渲染，屬于 MVVM 的實現機制。我們可以通過修改數據，再用setState 設置數據，Flutter 會自動通過綁定的數據更新 Widget 。所以我們需要做的就是實現 Widget 界面，并且將其與對應的數據綁定起來。
那么這里是不是又只能用setState進行響應式的開發呢？并不是的。
Widget作為抽象類，下面是分為有狀態（StatefulWidget）和無狀態（StatelessWidget）兩種的。而這里的有狀態Widget就是進行響應式開發來使用的，而無狀態的StatelessWidget同樣可以使用，來進行構造不需要變化的控件。

我們來看看Widget 1.PNG

這里是我根據繼承關系繪制的UML圖，暫且把需要的先畫了，有些簡單畫的是我覺得沒必要說的 hhh
這里最重要的一個父類就是Widget了，里面有個

final Key key; 

是所有子類都需要繼承并使用的。這里是表示的一個密鑰，其實就是控件的標識。注釋里說明：

//控制一個Widgets如何替換樹中的另一個Widgets。 //如果兩個Widgets的[runtimeType]和[key]屬性分別是[operator ==]，則新Widgets將替換舊//Widgets //更新底層元素（即通過使用新Widgets調用[Element.update]）。 //否則，將從樹中刪除舊元素，將新窗口Widgets擴展為元素，并將新元素插入樹中 //此外，使用[GlobalKey]作為窗口Widgets的[key]允許元素在樹周圍移動（更改父級）而///不會丟失狀態。//當找到一個新的Widgets時（它的鍵和類型與同一位置的前一個Widgets不匹配）， //但是在前一幀的樹中的某個地方有一個具有相同全局鍵的Widgets，那么該Widgets的元素將被移動到 新的位置。 //通常，作為另一個Widgets的唯一子節點的Widgets不需要一個明確的密鑰。 

StatefulWidget和StatelessWidget前面有過敘述，接下來還會進行敘述。我們看看其他三個。
ProxyWidget:提供子窗口Widgets的窗口Widgets，而不是構建新窗口Widgets。 （其下有很多子類）
RenderObjectWidget:提供RenderObjectElement的配置，包裝RenderObject，并提供應用程序的實際呈現。（實際就是渲染Widget）
PreferredSizeWidget：Widgets的接口，如果它不受限制，可以返回此Widgets所希望的大小。

二：StatelessWidget

Widget 和 Widget 之間通過 child: 進行嵌套。其中有的 Widget 只能有一個 child，而有的Widget可以有多個child。
我們可以寫一個demo來測試一下StatelessWidget。

void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: new TestDemo(title: 'test demo',) ); } } class TestDemo extends StatelessWidget{ TestDemo({Key key, this.title}) : super(key: key); final String title;@override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar( title: new Text('flutter Bar'), ), body: new Center( child: new Text(title), ), ); } } 

可以看到，StatelessWidget類內部一定有一個build方法返回一個Widget。而且home屬性傳入的是一個Widget。這里的home是調用TestDemo返回了Scaffold。然后MyApp再返回MaterialApp。
MaterialApp是材料App，一般作為APP頂層的主頁入口，可配置主題，多語言，路由等。
Scaffold是腳手架，一般用戶頁面的承載Widget，包含appbar、snackbar、drawer等material design的設定。
AppBar是安卓的ToolBar一樣的控件。

里面還可以返回一些其余控件，比如說AppBar有標題，二級頁面返回按鍵。Scaffold有懸浮按鈕等。

class TestDemo extends StatelessWidget{ TestDemo({Key key, this.title}) : super(key: key); final String title;@override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: new AppBar( title: new Text('flutter Bar'), leading: new Icon(Icons.list), ), body: new Center( child: new Text(title), ), floatingActionButton: FloatingActionButton( tooltip: 'Increment', child: new Icon(Icons.add), ), ); } } 

2.PNG

如圖所示。

三：StatefulWidget

需要創建管理的是主要是 State ， 通過 State 的 build 方法去構建控件。在 State 中，你可以動態改變數據，也就是繼承 State<>的實現。在 setState 之后，改變的數據會觸發 Widget 重新構建刷新。

class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title;@override _MyHomePageState createState() => _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> { int _counter = 0;void _incrementCounter() { setState(() { _counter++; }); }@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( 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項目中的代碼，大致邏輯就是點擊floatingActionButton響應，調用_incrementCounter函數。函數內是setState。setState 之后，改變的數據會觸發 Widget 重新構建刷新，更新counter的Text( '$_counter', )

大致邏輯就是如此，需要編寫的地方就是繼承了state<>的類了，而state的生命周期：

• initState ：初始化
• didChangeDependencies：在 initState 之后調用，此時可以獲取其他 State 。
• dispose ：銷毀，只會調用一次。

注意一下 child: Column(），這里面是下面要講的內容：布局。

四：布局

布局文檔
常用的大概有：

• Row：一個以水平數組的形式顯示其子部件的Widget
  children是一個Widget數組（可以有多個子 Widget），當然這里如果一直顯示的話會存在越界的情況。

• Colum：一個以豎直數組的形式顯示其子部件的Widget。
  children是一個Widget數組（可以有多個子 Widget）

• Container：一個結合了常見的繪制，定位和大小調整Widget
  children是一個Widget（只有一個子 Widget），默認充滿，包含color、寬高、decoration 等等配置。

• Expanded：創建一個Widget，用于展開Row，Column或Flex的子項展開以填充主軸中的可用空間。
  children是一個Widget（只有一個子 Widget）。在 Colum 和 Row 中充滿。

• Stack：一個相對于它的框的邊緣來定位它的子部件的Widget。
  children是一個Widget數組（有多個子 Widget）。 子Widget堆疊在一起。

• Card ：大致效果為Android的CardView
  children是一個Widget（只有一個子 Widget）

其余還有一些輔助的布局如：Center（），padding（）等等。
我們使用一些來試試：

void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home:new TestDemo() ); } }class TestDemo extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return new Scaffold( appBar: AppBar( brightness: Brightness.light, title: Text('TestCard'), ),body: Column( children: <Widget>[ Card( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ AspectRatio( aspectRatio: 18.0 / 11.0, child: Icon(Icons.favorite), ), Padding( padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Title'), SizedBox(height: 8.0), Text('Secondary Text'), ], ), ), ], ), ), Expanded( child:Text('這是一個特別特別特別特別特別長的Text，以便于測試我們需要的效果，'), ), ], ) ); } } 

測試效果如圖：

3.PNG
本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/17533.html