描述了屏幕上指針(觸摸、鼠標、觸控筆)的位置和移動。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),解放企業(yè)網(wǎng)站建設(shè),解放品牌網(wǎng)站建設(shè),網(wǎng)站定制,解放網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,解放網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
Flutter中可以使用Listener(功能性組件)來監(jiān)聽原始觸摸事件
例1
例2
例3
忽略PointerEvent
手勢: 描述由一個或多個指針移動組成的語義動作,如拖動、縮放、雙擊等。
Material大多數(shù)widget已經(jīng)對tap或手勢做出了響應(yīng)。 例如 IconButton和 FlatButton 響應(yīng)單擊,ListView響應(yīng)滑動事件觸發(fā)滾動。
用于手勢識別的功能性組件,通過它可以來識別各種手勢。
例(單擊)
例(添加Material觸摸水波效果 InkWell組件)
例(滑動關(guān)閉 Dismissable組件)
例(單擊、雙擊、長按)
例(滑動)
例(掃動---單一方向)
例(縮放)
GestureRecognizer是一個抽象類。
一種手勢的識別器對應(yīng)一個GestureRecognizer的子類。
例
由于手勢競爭最終只有一個勝出者,所以,當(dāng)有多個手勢識別器時,可能會產(chǎn)生沖突。
例
例
在APP中經(jīng)常會需要一個廣播機制,用以跨頁面通知。比如一個需要登錄的APP中,頁面會關(guān)注用戶登錄或注銷事件,來進行一些狀態(tài)更新。
這時候,一個事件總線便會非常有用,事件總線通常實現(xiàn)了訂閱者模式,訂閱者模式包含發(fā)布者和訂閱者兩種角色,可以通過事件總線來觸發(fā)事件和監(jiān)聽事件。
對于一些簡單的應(yīng)用,事件總線是足以滿足業(yè)務(wù)需求的,如果決定使用狀態(tài)管理包的話,一定要想清楚APP是否真的有必要使用它,防止“化簡為繁”、過度設(shè)計。
例
在widget樹中,每一個節(jié)點都可以分發(fā)通知,通知會沿著當(dāng)前節(jié)點向上傳遞,所有父節(jié)點都可以通過NotificationListener來監(jiān)聽通知。
Flutter中將這種由子向父的傳遞通知的機制稱為通知冒泡(Notification Bubbling)。
通知冒泡和用戶觸摸事件冒泡是相似的,但有一點不同:通知冒泡可以中止,但用戶觸摸事件不行。
通知冒泡和Web開發(fā)中瀏覽器事件冒泡原理是相似的,都是事件從出發(fā)源逐層向上傳遞,可以在上層節(jié)點任意位置來監(jiān)聽通知/事件,也可以終止冒泡過程,終止冒泡后,通知將不會再向上傳遞。
Flutter的UI框架實現(xiàn)中,除了在可滾動組件在滾動過程中會發(fā)出ScrollNotification之外,還有一些其它的通知,如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等,F(xiàn)lutter正是通過這種通知機制來使父元素可以在一些特定時機來做一些事情。
例
例
例
阻止冒泡
通知冒泡原理
在 Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。
一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。
MaterialButton 是一個 Materia 風(fēng)格的按鈕。
一般來說,如果需要點擊事件,就要嵌套一個 Button,因為 Container、Text 等組件都沒有點擊事件。
RaisedButton 與 MaterialButton 類似。
FlatButton 與 MaterialButton 類似,不同的是它是透明背景的。如果一個 Container 想要點擊事件時,可以使用 FlatButton 包裹,而不是 MaterialButton。因為 MaterialButton 默認帶背景,而 FlatButton 默認不帶背景。
IconButton 顧名思義就是 Icon + Button 的復(fù)合體,當(dāng)某個 Icon 需要點擊事件時,使用 IconButton 最好不過。
其外,還有已經(jīng)定義好的 Icon Button:CloseButton、BackButton。他們都有導(dǎo)航返回的能力。
FloatingActionButton 是一個浮動在頁面右下角的浮動按鈕。
在 Scaffold 里使用的時候,它是一個浮動狀態(tài)的按鈕,在其他地方使用,就不會浮動了。
ButtonBar 是一個布局組件,可以讓 Button 排列在一行。
在此之前先推薦看大佬的: 填坑指導(dǎo)
iOS需要注意:
1、flutter2.0要求cocoapods 升級到1.9.0
詳情看這篇博客
2、原來flutter項目中的podfile文件是舊版本的ccocoapods了,刪除podfile和對應(yīng)的.lock,然后flutter項目重新運行使用它自動生成的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)升級)
不指定版本安裝
sudo gem install -n /usr/local/bin cocoapods
說明 :老項目sdk1.17.0===升級到2.0.1,當(dāng)前所有操作基于win平臺
到此為止環(huán)境已經(jīng)準備妥當(dāng),正式進入項目修改。
所有的插件都要適配到空安全,插件是否支持均會有對應(yīng)說明Null safety,適配過程不確定版本的話,可以使用dio: any,適配完事后再在pubspec.lock文件中查看具體的版本修改過來,實在有部分插件沒有支持的,參考下面
部分插件在適配空安全的版本放棄維護了,得自行更新或?qū)ふ姨娲纾?flutter_swiper 變?yōu)?flutter_swiper_null_safety ,插件更新后要注意項目中的用法是否需要更新
2.1.1: 以前采用的是 provide 插件共享全局數(shù)據(jù),現(xiàn)在變化為 provider ,用法改變, 點擊參考 ,以防文章丟失,我重復(fù)一遍:
比如:
2.1.2: dio版本升級到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
解決方案: 項目目錄下: android--app-build.gradle --minSdkVersion改為:18 或者19
2.2.8.2
解決方案: 在pubspec.yarm管理里面添加:publish_to
2.2.8.3
解決方案: video_player升級后字段發(fā)生了變化,initialized字段更換為:isInitialized(_controller.value.isInitialized)
2.2.8.4
解決方案:
2.2.8.5
解決方案:
2.2.8.6
解決方案: 方案一:刪除ios目錄下的Podfile.lock 文件然后重新運行 pod install命令
方案二:刪除ios目錄下的Podfile.lock與Podfile文件 重新運行flutter run或flutter build ios
方案三:刪除ios目錄,重新運行 flutter create . 命令,注意有"."這個符號不要忘記
2.2.8.7
這個報錯一般對應(yīng)的就是下面的報錯,注意看后面的報錯信息,看是哪個插件報錯。
解決方案: 把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報錯誤
解決方案: Scaffold換為ScaffoldMessenger
10.textSelectionColor棄用
解決方案:
11.charts_flutter升級后屬性報錯
解決方案:
12.flutter 真機調(diào)試無法訪問網(wǎng)絡(luò),dio報錯
解決方案:
android:
ios:
問題12完整參考
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)容大概就是這些