flutter從入門到精通四

widget

Flutter 從 React 中吸收靈感（若是有react的編程經驗，會很容易理解flutter），經過現代化框架建立出精美的組件。
它的核心思想是用 widget 來構建你的 UI 界面。 在flutter中，一切都是Widget，Widget描述了在當前的配置和狀態下視圖所應該呈現的樣子。當 widget 的狀態改變時，它會從新構建其描述（展現的 UI），框架則會對比先後變化的不一樣，以肯定底層渲染樹從一個狀態轉換到下一個狀態所需的最小更改
下面是一些經常使用的widget

• Text能夠用來在應用內建立帶樣式的文本。
• Row, Column這兩個 flex widgets 可讓你在水平 (Row) 和垂直(Column) 方向建立靈活的佈局。它是基於 web 的 flexbox 佈局模型設計的，會是其中的元素水平和垂直方向都是居中的
• Stack不是線性（水平或垂直）定位的，而是按照繪製順序將 widget 堆疊在一塊兒。你能夠用 Positioned widget 做爲Stack 的子 widget，以相對於 Stack 的上，右，下，左來定位它們。 Stack 是基於 Web 中的絕對位置佈局模型設計的
• Container widget 能夠用來建立一個可見的矩形元素。 Container 可使用 BoxDecoration 來進行裝飾，如背景，邊框，或陰影等。 Container 還能夠設置外邊距、內邊距和尺寸的約束條件等。
• Navigator：它管理由字符串標識的 widget 棧，也稱爲「routes」。 Navigator 可讓你在應用的頁面中平滑的切換

爲了得到(MaterialApp)主題的數據，許多 Material Design 的 widget 須要在 MaterialApp 中才能顯現正常。所以，請使用 MaterialApp 運行應用,以下：

處理手勢

大多數應用都須要經過系統來處理一些用戶交互。構建交互式應用程序的第一步是檢測輸入手勢，這裏經過建立一個簡單的按鈕來了解其工做原理：

GestureDetector widget 沒有可視化的展示，但它能識別用戶的手勢。當用戶點擊 Container 時， GestureDetector 會調用其 onTap() 回調，在這裏會向控制檯打印一條消息。你可使用 GestureDetector 檢測各類輸入的手勢，包括點擊，拖動和縮放。
許多 widget 使用 GestureDetector 爲其餘 widget 提供可選的回調。例如，IconButton、RaisedButton 和 FloatingActionButton widget 都有 onPressed() 回調，當用戶點擊 widget 時就會觸發這些回調。
爲了構建更復雜的體驗，例如，以更有趣的方式對用戶輸入作出反應—應用一般帶有一些狀態。 Flutter 使用 StatefulWidgets 來實現這一想法。 StatefulWidgets 是一種特殊的 widget，它會生成 State 對象，用於保存狀態。

上面的程序有幾點須要注意：

• _counter和_add是私有屬性和私有方法，只要前面加上（__）都是私有的
• 在字符串中直接調用屬性或者方法能夠經過$直接調用

下一章節，咱們介紹

掃碼關注公衆號，有更多精彩文章等你哦