1. 程式人生 > >flutter基本元件和概念1

flutter基本元件和概念1

runApp函式接受指定的控制元件(Widget),並使其作為控制元件樹(widget tree)的根控制元件

Text:文字控制元件,在應用中建立各種樣式的文字。

Row,Column:Flex控制元件,可以建立水平(Row)或垂直(Column)方向的佈局,是基於Web的flexbox的佈局模式設計的。

Stack:非線性佈局(水平或垂直),控制元件可以堆疊在其他控制元件上,可以使用Positioned控制元件控制Stack相對頂部、右部、底部和左部的位置,是基於Web的absolute定位的佈局模式。

Container:建立矩形的可視元素,可以用BoxDecoration來設計樣式,比如背景、邊框和陰影,Container也有邊距、填充和大小限制,另外,還可以在三維空間利用矩陣進行變換。

Container(容器)為子控制元件設定Row(水平)佈局,中間的title控制元件被設定成Expanded,Expanded的作用是展開Row、Column和Flex的子控制元件,意味它可以使用剩餘的所有空間。

Navigator,通過字串標識來管理堆疊的介面,也稱為routes。Navigator讓應用程式各個介面之間平滑地過渡。

Scaffold:腳手架,能夠實現基本的app的結構,包括appbar body drawer。是實現基本質感設計視覺化的佈局結構,Scaffold控制元件使用多種不同的控制元件作為命名引數,並將每一個佈置在Scaffold適當的位置。

leading:是在title之前進行顯示。

tooltip:是長按時候的提示語

appBar:顯示在手機上的bar

actions:是在顯示在titlte後面的widget的集合

body:主體部位。

GestureDetector:點選後會呼叫 onTap,並且 檢測各種輸入手勢,包括點選、拖動和縮放。

StatefulWidget,這個控制元件儲存可變狀態, 在createState()方法中返回的就是 實現State的物件,在裡面如果要進行狀態的改變(也就是要重新整理佈局)就要呼叫setState({});

StatelessWidget:無狀態控制元件,這時候只需要在build中進行渲染控制元件就行了。

BoxDecoration:用來進行裝飾控制元件。設定顏色,陰影,邊距線等。

color:設定顏色 能夠通過color:Colors.yellow進行設定基礎顏色,也能通過 color:const Color(0xffff0000)進行指定顏色,注意要指定透明度。

TextStyle:設定字型樣式

new Image,用於從ImageProvider獲取影象。
new Image.asset,用於使用key從AssetBundle獲取影象。
new Image.network,用於從URL地址獲取影象。
new Image.file,用於從File獲取影象。

Stack即層疊佈局控制元件,能夠將子控制元件層疊排列。 Stack控制元件的每一個子控制元件都是定位或不定位,定位的子控制元件是被Positioned控制元件包裹的

ListView:實現滾動

Align:進行設定對齊方式,主要用於stact中

SizedBox:無論設定的有多小,都能最少包含裡面的內容。

AspectRatio:中屬性aspectRation 設定容器的寬高比例

DecoratedBox:能夠在渲染元件的時候,能渲染裝飾。

Opacity:其中的屬性opacity 設定透明度

PopupMenuButton:設定彈出的框子類似popupWindow