在編寫幾個 Flutter 項目后,發(fā)現(xiàn) Flutter 的強大之處在于業(yè)務(wù)中所有用到的控件以及場景都有對應(yīng)的處理方案;而 Dart 語言也與 Java 、 Kotlin 類似,所以對 Android 開發(fā)者來說門檻非常低;特意記錄一下常用的控件及其使用:
公司主營業(yè)務(wù):成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出興安盟烏蘭浩特免費做網(wǎng)站回饋大家。
StatelessWidget 不需要額外的創(chuàng)建 State
StatefulWidget 創(chuàng)建 State 類,并可以在其中保存一些狀態(tài)
only 可以單獨設(shè)置每個方向的內(nèi)邊距
類似于 LinearLayout 中的 orientation 設(shè)置為 vertical , mainAxisAlignment 表示豎向的一個對齊方式, crossAxisAlignment 表示橫向的對齊方式
與 Column 相反,主軸是橫向,對齊方式類似, crossAxisAlignment 表示豎向的對齊方式
類似 SizedBox ,一個容器,但是主要功能是有一個 decoration —— 裝飾器,作用是繪制背景,或者使用 item 中的陰影
棧,先入后出,類似于 Android 上的 FrameLayout
通常配合 Stack 使用,固定顯示在某一個位置
配合多 child 使用,會填充剩余的空間
Image 功能強大,使用不同的方法可以加載不同來源的圖片
看到這些方法,突然覺得 Flutter 太香了,而且 Image 可以配置 clip 等裁剪出不同形狀的圖片,無論是圓形還是五角星都不在話下,然而 Android 要實現(xiàn)不規(guī)則的形狀,可是要下不少功夫的。
名字和 Android 的一模一樣,但是用法卻比 Android 的簡單很多:
主要就是 itemCount 與 itemBuilder ,其余就是配置樣式, itemBuilder 需要返回一個 widget ,當然了,每個 ListView 都有其對應(yīng)的 item ,在里面的方法中編寫 widget 即可
與 ListView 類似,但是需要有一個 delegate 類,作用是設(shè)置有多少列,每一列之間的間距是多少
GridView 沒有 build , children 表示所有的子 view
最常用的控件之一,有非常多的樣式, Flutter 中通常是使用裝飾器來處理控件的,如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
Flutter中給我們預(yù)先定義好了一些按鈕控件給我們用,常用的按鈕如下
我們先來看看MaterialButton中的屬性,可以看到能設(shè)置的屬性還是很多的。
下面我們來看看常用屬性
而在Android中如果我們要修改按鈕樣式的話,需要通過selector和Shape等方式進行修改,相比較Flutter來說是要麻煩不少的
RaisedButton的構(gòu)造方法如下,由于繼承自MaterialButton,所以MaterialButton中的大多數(shù)屬性這邊都能用,且效果一致,這里就不在贅述了
下面我們來看一下屬性
接收一個方法,點擊按鈕時回調(diào)該方法。如果傳null,則表示按鈕禁用
如下圖所示
按鈕文本控件,一般都是傳一個Text Widget
按鈕顏色
按鈕的文本顏色
點擊按鈕時水波紋顏色
高亮顏色,點擊(長按)按鈕后的顏色
陰影范圍,一般不會設(shè)置太大
內(nèi)邊距,使用
或者
shape用來設(shè)置按鈕的形狀,其接收值是ShapeBorder類型,ShapeBorder是一個抽象類,我們來看看有哪些實現(xiàn)類
可以看到,實現(xiàn)類還是很多的,我們主要來看看常用的即可。
borderRadius 接收一個BorderRadius類型的值,常用方法如下
我們可以把borderRadius分為上下左右四個方向,下面的方法都是對這四個方向進行設(shè)置,
帶斜角的長方形邊框
圓形邊框
圓角矩形
兩端是半圓的邊框
FlatButton跟RaisedButton用法基本一致,下面我們就直接用一下
注意,OutlineButton是一個有默認邊線且背景透明的按鈕,也就是說我們設(shè)置其邊線和顏色是無效的,其他屬性跟MaterialButton中屬性基本一致
下面我們直接來使用
效果如下:
IconButton是直接繼承自StatelessWidget的,默認沒有背景
我們來看一下他的構(gòu)造方法
可以看到,icon是必填參數(shù)
icon接收一個Widget,但是一般我們都是傳入一個Icon Widget
其他屬性跟MaterialButton中的屬性用法基本一致
我們來用一下
效果如下:
我們也可以傳一個Text或其他Widget,這個大家自行嘗試吧
如果我們需要設(shè)置按鈕的最小寬度以及高度,button屬性中并沒有提供對應(yīng)的設(shè)置方法
使用如下:
Flutter中Button內(nèi)容大概就是這些
國外地址:
國內(nèi)鏡像:
以 flutter_screenutil 為例
路由框架 annotation_route
狀態(tài)管理 provider
UI適配 flutter_screenutil
刷新控件 flutter_easyrefresh
網(wǎng)絡(luò)請求 dio
toast控件 fluttertoast
圖表庫 charts_flutter
網(wǎng)絡(luò)監(jiān)聽 connectivity
事件總線 event_bus
日歷組件 table_calendar
官方webview webview_flutter
第三方webview flutter_webview_plugin
該篇文章為常用依賴包總結(jié),用來記錄所需要的常用依賴包,后續(xù)會不斷擴充內(nèi)容~
本地Flutter 2.10.1,Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子,初學(xué)Flutter ,文章會根據(jù)學(xué)習(xí)進度不定時更新,請多多指教~~
SliverAppBar 控件,一個 MD 的 AppBar 。屬性和 AppBar 類似,但做的效果比 AppBar 更加強大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 , 里面有 AppBar 控件的介紹。那么還有些沒有的屬性:
結(jié)合 elevation 使用,當elevation 不為 0 的時候,是否顯示陰影
AppBar 展開時候的高度
true 的時候下滑AppBar優(yōu)先滑動展示,展示完成后才給滑動控件滑動
snap 為 true, 則 floating 也要為 true 。true 的時候根據(jù)手指松開的位置展開或者收縮AppBar
appBar 收縮到最小高度的時候 appBar 是否可見
SliverAppBar 往往做為 CustomScrollView 的第一個子元素,根據(jù)滾動控件的偏移量或者浮動的位置來改變 SliverAppBar 的高度。所以具體用法如下
另外在上面設(shè)計到 FlexibleSpaceBar 控件,F(xiàn)lexibleSpaceBar 有個 collapseMode 屬性
為 Sliver 系列控件添加一個 padding 。如給上面 SliverAppBar 添加一個 Padding 。
多行多列的列表控件,相當于 Android 的 GridView,有兩個屬性
SliverChildDelegate,這里有兩種方式創(chuàng)建
SliverGridDelegate,也是有兩種方式創(chuàng)建
結(jié)合上面展示效果
和上面 delegate 屬性一樣,需要創(chuàng)建一個 SliverChildDelegate 。
比 SliverList 多一個 itemExtent 屬性,設(shè)置 item 的高度 。item 里面的子控件無法再改動高度。
上面 SliverAppBar 就是結(jié)合 SliverPersistentHeader 實現(xiàn)的效果,SliverPersistentHeader 需要一個 SliverPersistentHeaderDelegate 。 實現(xiàn) SliverPersistentHeaderDelegate 有 4 個方法需要重寫
至于效果,具體效果具體分析。
有一個 Widget 屬性,主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。
占滿一屏或者比一屏更多的布局,
滑動剩余部分展示的布局
一個FormField包含TextField,它將TextField小部件包裝在FormField中。
表單(From)使一次進行保存、重置或驗證多個字段變得更容易。要在沒有表單(From)的情況下使用,請將GlobalKey傳遞給構(gòu)造函數(shù),并使用GlobalKey.currentState保存或重置表單字段。
指定控制器時,initialValue必須為null(默認值)。如果controller為null,那么TextEditingController將被自動構(gòu)造,其文本將初始化為initalValue或空字符串。如果這個FormField是滾動容器的一部分,該容器懶加載它的子對象,比如ListView或CustomScrollView,那么應(yīng)該指定一個控制器??刂破鞯纳芷趹?yīng)該由滾動容器的有狀態(tài)小部件祖先來管理。