flutter控件,flutter 插件

Flutter 之 Sliver 系列控件

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

成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供余干網(wǎng)站建設(shè)、余干做網(wǎng)站、余干網(wǎng)站設(shè)計(jì)、余干網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(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 的時(shí)候，是否顯示陰影

AppBar 展開(kāi)時(shí)候的高度

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

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

appBar 收縮到最小高度的時(shí)候 appBar 是否可見(jiàn)

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

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

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

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

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

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

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

和上面 delegate 屬性一樣，需要?jiǎng)?chuàng)建一個(gè) SliverChildDelegate 。

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

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

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

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

占滿(mǎn)一屏或者比一屏更多的布局，

滑動(dòng)剩余部分展示的布局

Flutter初探--常用依賴(lài)包

國(guó)外地址：

國(guó)內(nèi)鏡像：

以 flutter_screenutil 為例

路由框架 annotation_route

狀態(tài)管理 provider

UI適配 flutter_screenutil

刷新控件 flutter_easyrefresh

網(wǎng)絡(luò)請(qǐng)求 dio

toast控件 fluttertoast

圖表庫(kù) charts_flutter

網(wǎng)絡(luò)監(jiān)聽(tīng) connectivity

事件總線 event_bus

日歷組件 table_calendar

官方webview webview_flutter

第三方webview flutter_webview_plugin

該篇文章為常用依賴(lài)包總結(jié)，用來(lái)記錄所需要的常用依賴(lài)包，后續(xù)會(huì)不斷擴(kuò)充內(nèi)容~

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

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

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

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

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

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

與 Column 相反，主軸是橫向，對(duì)齊方式類(lèi)似， crossAxisAlignment 表示豎向的對(duì)齊方式

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

棧，先入后出，類(lèi)似于 Android 上的 FrameLayout

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

配合多 child 使用，會(huì)填充剩余的空間

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

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

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

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

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

GridView 沒(méi)有 build ， children 表示所有的子 view

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

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

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

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

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

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

Visibility 選擇占位時(shí)，隱藏 TestWidget

Flutter TextFormField 控件

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

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

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

Flutter 滑動(dòng)、縮放控件

onInteractionEnd 交互結(jié)束

onInteractionStart 交互開(kāi)始

onInteractionUpdate 滑動(dòng)時(shí)候一直會(huì)回調(diào)

focalPoint 是相對(duì)于屏幕左上角的偏移量。

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

scale縮放量。

horizontalScale水平縮放量。

verticalScale豎直縮放量。

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

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

參考文章

新聞標(biāo)題：flutter控件,flutter 插件
網(wǎng)頁(yè)路徑：http://m.jiaotiyi.com/article/dsdcejh.html