組件化編程就像是搭積木一樣的開發(fā)。把整個應用拆分成許多部分，每部分各自管理自己的組件以及數(shù)據(jù)狀態(tài)，這樣達到一個更好的可維護性，可擴展性。

對于組件來說，大致會分為幾個類型的組件：

• 展示組件：展示型組件并不維護數(shù)據(jù)狀態(tài)，它更多的作用是用來展示效果與數(shù)據(jù)。
• 容器組件：容器組件并不涉及 UI 方面，而是負責處理數(shù)據(jù)與狀態(tài)。
• 布局組件：特定的布局方式，建議是把它們封裝成一個布局組件。
• 頁面組件：頁面組件負責當前頁面的組件結(jié)構(gòu)。因為一個頁面是由很多組件組成的，它們的數(shù)據(jù)關系如何？布局如何？都是在頁面組件上處理。

狀態(tài)（State）

前面說了 Flutter 借鑒 React，定義出了一套 Widget。因此在 Widget 里也有 State 的概念。

在 React 里的 State 的作用同樣也適用與 Flutter。

class StateWrap extends StatefulWidget { @override createState() => new MyComponent(); }class MyComponent extends State<StateWrap> { String text = 'Hello, world!';@override Widget build(BuildContext context) { return new Center( child: new Text(this.text), ); } } 

有一點需要注意的，首先需要一個編寫一個包裝類，它繼承至 StatefulWidget，實現(xiàn) createState 方法。

在 Dart 里，帶下劃線開頭的變量是私有變量，一般會把 State 設置為私有變量。其外在類的屬性是可以不使用 this 的。對于 State 的更新，F(xiàn)lutter 也是使用 setState。不同的是，setState 接受的不是對象，而是一個回調(diào)函數(shù)，在這個回調(diào)函數(shù)里對 State 的更改會直接響應式的影響 UI。

class StateWrap extends StatefulWidget { @override createState() => new MyComponent(); }class MyComponent extends State<StateWrap> { String _text = 'Hello, world!';void update() { // 更新 State this.setState(() { _text = 'Hello'; }); }@override Widget build(BuildContext context) { return new Center( child: new Text(_text), ); } }

屬性（Props）

在 React 里有 Props 的概念，同樣的在 Flutter 也有 Props 的概念。State 與 Props 是可以共存的，因為 State 需要使用一個 StatefulWidget 包裝，因此會比較麻煩。

Props 的定義在 StatefulWidget 里定義，并且在 createState 里傳遞。在 State 里通過 widget.xxx 獲取值。

class StateWrap extends StatefulWidget { final String title; final Function onPress; StateWrap({this.title, this.onPress});@override createState() => new MyComponent(title: title, onPress: onPress); }class MyComponent extends State<StateWrap> { // props 從 widget.xxx 獲取 @override Widget build(BuildContext context) => new Center( child: new Column( children: <Widget>[ new Text(widget.title), new FlatButton(child: const Text('Press'), onPressed: widget.onPress), ], ), ); } 

使用的時候，也非常的簡單。

new MyComponent(title: 'abc', onPress: () { // ... }) 

在 React 里，遍歷數(shù)組的時候，通常會有一些上下文信息傳遞給事件，同樣在 Flutter 也是如此類似。

onPressed: () => this.onPress(this.title) 

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