Flutter 之 Sliver 系列控件

SliverAppBar 控件，一個 MD 的 AppBar 。屬性和 AppBar 類似，但做的效果比 AppBar 更加強(qiáng)大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介紹。那么還有些沒有的屬性：

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供余干網(wǎng)站建設(shè)、余干做網(wǎng)站、余干網(wǎng)站設(shè)計(jì)、余干網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、余干企業(yè)網(wǎng)站模板建站服務(wù)，十年余干做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

結(jié)合 elevation 使用，當(dāng)elevation 不為 0 的時候，是否顯示陰影

AppBar 展開時候的高度

true 的時候下滑AppBar優(yōu)先滑動展示，展示完成后才給滑動控件滑動

snap 為 true, 則 floating 也要為 true 。true 的時候根據(jù)手指松開的位置展開或者收縮AppBar

appBar 收縮到最小高度的時候 appBar 是否可見

SliverAppBar 往往做為 CustomScrollView 的第一個子元素，根據(jù)滾動控件的偏移量或者浮動的位置來改變 SliverAppBar 的高度。所以具體用法如下

另外在上面設(shè)計(jì)到 FlexibleSpaceBar 控件，F(xiàn)lexibleSpaceBar 有個 collapseMode 屬性

為 Sliver 系列控件添加一個 padding 。如給上面 SliverAppBar 添加一個 Padding 。

多行多列的列表控件，相當(dāng)于 Android 的 GridView，有兩個屬性

SliverChildDelegate，這里有兩種方式創(chuàng)建

SliverGridDelegate，也是有兩種方式創(chuàng)建

結(jié)合上面展示效果

和上面 delegate 屬性一樣，需要創(chuàng)建一個 SliverChildDelegate 。

比 SliverList 多一個 itemExtent 屬性，設(shè)置 item 的高度 。item 里面的子控件無法再改動高度。

上面 SliverAppBar 就是結(jié)合 SliverPersistentHeader 實(shí)現(xiàn)的效果，SliverPersistentHeader 需要一個 SliverPersistentHeaderDelegate 。 實(shí)現(xiàn) SliverPersistentHeaderDelegate 有 4 個方法需要重寫

至于效果，具體效果具體分析。

有一個 Widget 屬性，主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。

占滿一屏或者比一屏更多的布局，

滑動剩余部分展示的布局

Flutter初探--常用依賴包

國外地址：

國內(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ù)會不斷擴(kuò)充內(nèi)容~

Flutter初學(xué) —— 常用控件使用

在編寫幾個 Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場景都有對應(yīng)的處理方案；而 Dart 語言也與 Java 、 Kotlin 類似，所以對 Android 開發(fā)者來說門檻非常低；特意記錄一下常用的控件及其使用：

StatelessWidget 不需要額外的創(chuàng)建 State

StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)

only 可以單獨(dú)設(shè)置每個方向的內(nèi)邊距

類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個對齊方式， crossAxisAlignment 表示橫向的對齊方式

與 Column 相反，主軸是橫向，對齊方式類似， crossAxisAlignment 表示豎向的對齊方式

類似 SizedBox ，一個容器，但是主要功能是有一個 decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影

棧，先入后出，類似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定顯示在某一個位置

配合多 child 使用，會填充剩余的空間

Image 功能強(qiáng)大，使用不同的方法可以加載不同來源的圖片

看到這些方法，突然覺得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。

名字和 Android 的一模一樣，但是用法卻比 Android 的簡單很多：

主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個 widget ，當(dāng)然了，每個 ListView 都有其對應(yīng)的 item ，在里面的方法中編寫 widget 即可

與 ListView 類似，但是需要有一個 delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少

GridView 沒有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Flutter - 顯示/隱藏控件的幾種方法

實(shí)際效果，不會占位，隱藏時 TestWidget 不會加載，可 else 一個占位(則會加載占位的組件)

實(shí)際效果，會占位，顯示隱藏TestWidget都會加載

實(shí)際效果，不會占位，顯示隱藏TestWidget都會加載

實(shí)際效果，可選擇是否占位，不占位，隱藏時TestWidget不會加載，占位，顯示隱藏TestWidget都會加載

Visibility 選擇占位時，隱藏 TestWidget

Flutter TextFormField 控件

一個FormField包含TextField,它將TextField小部件包裝在FormField中。

表單(From)使一次進(jìn)行保存、重置或驗(yàn)證多個字段變得更容易。要在沒有表單(From)的情況下使用，請將GlobalKey傳遞給構(gòu)造函數(shù)，并使用GlobalKey.currentState保存或重置表單字段。

指定控制器時，initialValue必須為null(默認(rèn)值)。如果controller為null，那么TextEditingController將被自動構(gòu)造，其文本將初始化為initalValue或空字符串。如果這個FormField是滾動容器的一部分，該容器懶加載它的子對象，比如ListView或CustomScrollView，那么應(yīng)該指定一個控制器。控制器的生命周期應(yīng)該由滾動容器的有狀態(tài)小部件祖先來管理。

Flutter 滑動、縮放控件

onInteractionEnd 交互結(jié)束

onInteractionStart 交互開始

onInteractionUpdate 滑動時候一直會回調(diào)

focalPoint 是相對于屏幕左上角的偏移量。

localFocalPoint是相對于父容器區(qū)域左上角的偏移量。

scale縮放量。

horizontalScale水平縮放量。

verticalScale豎直縮放量。

rotation旋轉(zhuǎn)量。------ 這里說明能監(jiān)聽到旋轉(zhuǎn)量

還可以通過transformationController進(jìn)行變換控制，有興趣的可以自己研究。

參考文章