Flutter了解之手勢(shì)

描述了屏幕上指針（觸摸、鼠標(biāo)、觸控筆）的位置和移動(dòng)。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),解放企業(yè)網(wǎng)站建設(shè),解放品牌網(wǎng)站建設(shè),網(wǎng)站定制,解放網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,解放網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

Flutter中可以使用Listener(功能性組件)來監(jiān)聽原始觸摸事件

例1

例2

例3

忽略PointerEvent

手勢(shì): 描述由一個(gè)或多個(gè)指針移動(dòng)組成的語義動(dòng)作，如拖動(dòng)、縮放、雙擊等。

Material大多數(shù)widget已經(jīng)對(duì)tap或手勢(shì)做出了響應(yīng)。 例如 IconButton和 FlatButton 響應(yīng)單擊，ListView響應(yīng)滑動(dòng)事件觸發(fā)滾動(dòng)。

用于手勢(shì)識(shí)別的功能性組件，通過它可以來識(shí)別各種手勢(shì)。

例（單擊）

例（添加Material觸摸水波效果 InkWell組件）

例（滑動(dòng)關(guān)閉 Dismissable組件）

例（單擊、雙擊、長(zhǎng)按）

例（滑動(dòng)）

例（掃動(dòng)---單一方向）

例（縮放）

GestureRecognizer是一個(gè)抽象類。

一種手勢(shì)的識(shí)別器對(duì)應(yīng)一個(gè)GestureRecognizer的子類。

例

由于手勢(shì)競(jìng)爭(zhēng)最終只有一個(gè)勝出者，所以，當(dāng)有多個(gè)手勢(shì)識(shí)別器時(shí)，可能會(huì)產(chǎn)生沖突。

例

例

在APP中經(jīng)常會(huì)需要一個(gè)廣播機(jī)制，用以跨頁面通知。比如一個(gè)需要登錄的APP中，頁面會(huì)關(guān)注用戶登錄或注銷事件，來進(jìn)行一些狀態(tài)更新。

這時(shí)候，一個(gè)事件總線便會(huì)非常有用，事件總線通常實(shí)現(xiàn)了訂閱者模式，訂閱者模式包含發(fā)布者和訂閱者兩種角色，可以通過事件總線來觸發(fā)事件和監(jiān)聽事件。

對(duì)于一些簡(jiǎn)單的應(yīng)用，事件總線是足以滿足業(yè)務(wù)需求的，如果決定使用狀態(tài)管理包的話，一定要想清楚APP是否真的有必要使用它，防止“化簡(jiǎn)為繁”、過度設(shè)計(jì)。

例

在widget樹中，每一個(gè)節(jié)點(diǎn)都可以分發(fā)通知，通知會(huì)沿著當(dāng)前節(jié)點(diǎn)向上傳遞，所有父節(jié)點(diǎn)都可以通過NotificationListener來監(jiān)聽通知。

Flutter中將這種由子向父的傳遞通知的機(jī)制稱為通知冒泡（Notification Bubbling）。

通知冒泡和用戶觸摸事件冒泡是相似的，但有一點(diǎn)不同：通知冒泡可以中止，但用戶觸摸事件不行。

通知冒泡和Web開發(fā)中瀏覽器事件冒泡原理是相似的，都是事件從出發(fā)源逐層向上傳遞，可以在上層節(jié)點(diǎn)任意位置來監(jiān)聽通知/事件，也可以終止冒泡過程，終止冒泡后，通知將不會(huì)再向上傳遞。

Flutter的UI框架實(shí)現(xiàn)中，除了在可滾動(dòng)組件在滾動(dòng)過程中會(huì)發(fā)出ScrollNotification之外，還有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，F(xiàn)lutter正是通過這種通知機(jī)制來使父元素可以在一些特定時(shí)機(jī)來做一些事情。

例

例

例

阻止冒泡

通知冒泡原理

Flutter Button（按鈕）

在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

MaterialButton 是一個(gè) Materia 風(fēng)格的按鈕。

一般來說，如果需要點(diǎn)擊事件，就要嵌套一個(gè) Button，因?yàn)?Container、Text 等組件都沒有點(diǎn)擊事件。

RaisedButton 與 MaterialButton 類似。

FlatButton 與 MaterialButton 類似，不同的是它是透明背景的。如果一個(gè) Container 想要點(diǎn)擊事件時(shí)，可以使用 FlatButton 包裹，而不是 MaterialButton。因?yàn)?MaterialButton 默認(rèn)帶背景，而 FlatButton 默認(rèn)不帶背景。

IconButton 顧名思義就是 Icon + Button 的復(fù)合體，當(dāng)某個(gè) Icon 需要點(diǎn)擊事件時(shí)，使用 IconButton 最好不過。

其外，還有已經(jīng)定義好的 Icon Button：CloseButton、BackButton。他們都有導(dǎo)航返回的能力。

FloatingActionButton 是一個(gè)浮動(dòng)在頁面右下角的浮動(dòng)按鈕。

在 Scaffold 里使用的時(shí)候，它是一個(gè)浮動(dòng)狀態(tài)的按鈕，在其他地方使用，就不會(huì)浮動(dòng)了。

ButtonBar 是一個(gè)布局組件，可以讓 Button 排列在一行。

flutter項(xiàng)目升級(jí)2.0過程填坑記錄

在此之前先推薦看大佬的: 填坑指導(dǎo)

iOS需要注意：

1、flutter2.0要求cocoapods 升級(jí)到1.9.0

詳情看這篇博客

2、原來flutter項(xiàng)目中的podfile文件是舊版本的ccocoapods了，刪除podfile和對(duì)應(yīng)的.lock，然后flutter項(xiàng)目重新運(yùn)行使用它自動(dòng)生成的podfile文件

3、安裝CocoaPods

卸載cocoapods：sudo gem uninstall cocoapods

查看cocoapods版本：pod --version

指定版本安裝：

sudo gem install -n /usr/local/bin cocoapods -v 1.9.3（新MacOS系統(tǒng)升級(jí)）

不指定版本安裝

sudo gem install -n /usr/local/bin cocoapods

說明 :老項(xiàng)目sdk1.17.0===升級(jí)到2.0.1,當(dāng)前所有操作基于win平臺(tái)

到此為止環(huán)境已經(jīng)準(zhǔn)備妥當(dāng)，正式進(jìn)入項(xiàng)目修改。

所有的插件都要適配到空安全，插件是否支持均會(huì)有對(duì)應(yīng)說明Null safety,適配過程不確定版本的話，可以使用dio: any,適配完事后再在pubspec.lock文件中查看具體的版本修改過來,實(shí)在有部分插件沒有支持的，參考下面

部分插件在適配空安全的版本放棄維護(hù)了，得自行更新或?qū)ふ姨娲纾?flutter_swiper 變?yōu)?flutter_swiper_null_safety ，插件更新后要注意項(xiàng)目中的用法是否需要更新

2.1.1: 以前采用的是 provide 插件共享全局?jǐn)?shù)據(jù),現(xiàn)在變化為 provider ，用法改變, 點(diǎn)擊參考 ，以防文章丟失，我重復(fù)一遍：

比如:

2.1.2: dio版本升級(jí)到4.0.0最新版后，部分用法改變

2.2.1

2.2.2

解決方案:

2.2.3

解決方案:

2.2.4

解決方案:

2.2.5

解決方案:

2.2.6

解決方案:

2.2.7

解決方案:

2.2.8

解決方案: child 換為sliver

2.2.8.1

解決方案: 項(xiàng)目目錄下: android--app-build.gradle --minSdkVersion改為:18 或者19

2.2.8.2

解決方案: 在pubspec.yarm管理里面添加:publish_to

2.2.8.3

解決方案: video_player升級(jí)后字段發(fā)生了變化，initialized字段更換為:isInitialized(_controller.value.isInitialized)

2.2.8.4

解決方案:

2.2.8.5

解決方案:

2.2.8.6

解決方案: 方案一:刪除ios目錄下的Podfile.lock 文件然后重新運(yùn)行 pod install命令

方案二:刪除ios目錄下的Podfile.lock與Podfile文件 重新運(yùn)行flutter run或flutter build ios

方案三:刪除ios目錄,重新運(yùn)行 flutter create . 命令，注意有"."這個(gè)符號(hào)不要忘記

2.2.8.7

這個(gè)報(bào)錯(cuò)一般對(duì)應(yīng)的就是下面的報(bào)錯(cuò)，注意看后面的報(bào)錯(cuò)信息，看是哪個(gè)插件報(bào)錯(cuò)。

解決方案: 把Podfile的版本注釋打開，改為platform :ios, '9.0' 或者是更高的版本

全局替換

1.將new List() 替換為[];

2.TextField的inputFormatters:[WhitelistingTextInputFormatter.digitsOnly] 替換為[FilteringTextInputFormatter.digitsOnly]

3.TextField的inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-z|A-Z|0-9]"))]替換為FilteringTextInputFormatter.allow(RegExp("[a-z|A-Z|0-9]"))

4.Stack組件中overflow: Overflow.visible改為 clipBehavior: Clip.none；overflow: Overflow.clip改為clipBehavior:Clip.hardEdge

5.ListWheelScrollView組件中clipToSize = false改為clipBehavior: Clip.none,clipToSize = true改為 Clip.hardEdge

6.TextField中maxLengthEnforced: true改為maxLengthEnforcement:MaxLengthEnforcement.enforced

7.FlatButton、RaisedButton、OutlineButton的變化： 官方參考

顏色的屬性發(fā)生了變化，由原來的Color 變?yōu)榱薓aterialStatePropertyColor, 這是未了解決不同狀態(tài)(pressed、hovered、focused、disabled)下按鈕顏色的變化

例如

8.出現(xiàn)如下警告

9.showSnackBar報(bào)錯(cuò)誤

解決方案: Scaffold換為ScaffoldMessenger

10.textSelectionColor棄用

解決方案:

11.charts_flutter升級(jí)后屬性報(bào)錯(cuò)

解決方案:

12.flutter 真機(jī)調(diào)試無法訪問網(wǎng)絡(luò)，dio報(bào)錯(cuò)

解決方案:

android:

ios:

問題12完整參考

Flutter基礎(chǔ)Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中給我們預(yù)先定義好了一些按鈕控件給我們用，常用的按鈕如下

我們先來看看MaterialButton中的屬性，可以看到能設(shè)置的屬性還是很多的。

下面我們來看看常用屬性

而在Android中如果我們要修改按鈕樣式的話，需要通過selector和Shape等方式進(jìn)行修改，相比較Flutter來說是要麻煩不少的

RaisedButton的構(gòu)造方法如下，由于繼承自MaterialButton，所以MaterialButton中的大多數(shù)屬性這邊都能用，且效果一致，這里就不在贅述了

下面我們來看一下屬性

接收一個(gè)方法，點(diǎn)擊按鈕時(shí)回調(diào)該方法。如果傳null，則表示按鈕禁用

如下圖所示

按鈕文本控件，一般都是傳一個(gè)Text Widget

按鈕顏色

按鈕的文本顏色

點(diǎn)擊按鈕時(shí)水波紋顏色

高亮顏色，點(diǎn)擊（長(zhǎng)按）按鈕后的顏色

陰影范圍，一般不會(huì)設(shè)置太大

內(nèi)邊距,使用

或者

shape用來設(shè)置按鈕的形狀，其接收值是ShapeBorder類型，ShapeBorder是一個(gè)抽象類，我們來看看有哪些實(shí)現(xiàn)類

可以看到，實(shí)現(xiàn)類還是很多的，我們主要來看看常用的即可。

borderRadius 接收一個(gè)BorderRadius類型的值，常用方法如下

我們可以把borderRadius分為上下左右四個(gè)方向，下面的方法都是對(duì)這四個(gè)方向進(jìn)行設(shè)置，

帶斜角的長(zhǎng)方形邊框

圓形邊框

圓角矩形

兩端是半圓的邊框

FlatButton跟RaisedButton用法基本一致，下面我們就直接用一下

注意，OutlineButton是一個(gè)有默認(rèn)邊線且背景透明的按鈕，也就是說我們?cè)O(shè)置其邊線和顏色是無效的，其他屬性跟MaterialButton中屬性基本一致

下面我們直接來使用

效果如下：

IconButton是直接繼承自StatelessWidget的，默認(rèn)沒有背景

我們來看一下他的構(gòu)造方法

可以看到，icon是必填參數(shù)

icon接收一個(gè)Widget，但是一般我們都是傳入一個(gè)Icon Widget

其他屬性跟MaterialButton中的屬性用法基本一致

我們來用一下

效果如下：

我們也可以傳一個(gè)Text或其他Widget，這個(gè)大家自行嘗試吧

如果我們需要設(shè)置按鈕的最小寬度以及高度，button屬性中并沒有提供對(duì)應(yīng)的設(shè)置方法

使用如下：

Flutter中Button內(nèi)容大概就是這些

當(dāng)前題目：包含flatflutter的詞條
標(biāo)題鏈接：http://chinadenli.net/article46/dsdiehg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、全網(wǎng)營銷推廣、Google、電子商務(wù)、關(guān)鍵詞優(yōu)化、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)