Flutter自定義繪制組件

Flutter中自定義組件一般有兩種方式：

成都創(chuàng)新互聯是專業(yè)的朝天網站建設公司，朝天接單;提供成都網站建設、網站設計,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行朝天網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

CustomPaint繼承自SingleChildRenderObjectWidget，即它可以在通過嵌套引入到widget樹中，并且可以有一個child子widget。它的構造方法如下：

painter和foregroundPainter需要接收CustomPainter對象，是CustomPaint核心。CustomPainter是進行UI繪制的核心類，繪制時, CustomPaint 首先在畫布上調用 painter繪制 , 然后再繪制它的 child Widget, child 繪制完成后再調用 foregroundPainter 進行繪制。

size屬性標識繪制區(qū)域大小，但當CustomPaint有child，該屬性將會忽略，而使用child的大小為繪制區(qū)域大小。

isComplex和willChange用于控制繪制層緩存處理的，這里暫不討論。

可實現CustomPainter子類進行UI繪制

實現paint方法進行真正的繪制，canvas是畫布對象，size是繪制區(qū)域，是從CustomPaint中size屬性傳遞得到的。繪制過程與Android原生開發(fā)十分類似，連API都十分相像，這點對熟悉Android原生開發(fā)者真是太友好了。

Paint對象是畫筆對象，就是繪圖工具，我們可以設置畫筆的顏色、粗細、是否抗鋸齒、筆觸形狀以及作畫風格等，通過這些屬性我們可以很方便的來定制自己的UI效果，在繪制的過程中可以定義多個畫筆，以便實現多種風格圖形的集合。

根據需求選擇合適的畫筆屬性，完成你的繪制。

Canvas是繪制的畫布，它包含了很多繪制方法，可以繪制出各種形狀的圖形。需要注意的是，畫布是應用所有控件都在使用的, 所以通過這個畫布其實是可以繪制充滿屏幕的內容的，每次繪制都應該限制在本控件的區(qū)域(Size)內, 以免繪制覆蓋到其他組件。

下面介紹下Canvas的繪制方法：

PointMode是個枚舉

p1、p2為線段兩個端點

Rect定義矩形的大小位置，有多種構造方式:

RRect描述圓角矩形，他通過Rect和Radius來構造

畫圓比較簡單，c表示圓心位置，radius是半徑。

橢圓使用外接矩形確定大小位置，rect就是外接矩形。

繪制弧形，先確定弧形對應的橢圓，同樣地用外接矩形rect確定橢圓，然后根據起始點和結束點角度來確定那一段弧度，startAngle，sweepAngle分別代表起始和結束點角度，角度用弧度表示法。

useCenter表示是否連接閉合形狀，userCenter = false表示不閉合，即畫一段弧線，userCenter = true表示閉合，即繪制一個扇形。

繪制路徑，關鍵在于構建路徑Path，可以直接new Path對象，然后通過path方法可以連接出圖形，path關鍵方法如下：

還有其他方法，有興趣可以查看API。

Flutter 開發(fā)筆記

下面這種情況下，為 InkWell 設置的 splashColor 不會生效：

需要用 Material 去除背景色，然后將顏色設置在 InkWell 外部：

在 Dialog builder 中使用 WillPopScope 禁用返回鍵返回：

注意：使用此方法同時也會禁用 iOS 上的手勢滑動返回功能，推薦判斷平臺后再使用。

修改對話框中的復選框狀態(tài)，最簡便的方法是通過 Element 中的 markNeedsBuild 方法：

當然，更推薦的做法是通過 StatefulBuilder ，然后就可以在 Dialog 中調用 setState 方法了，不過在調用 setState 時需要判斷 Dialog 是否已經關閉，否則會造成 setState() called after dispose() 的錯誤，可以通過添加一個標志位來解決，如下：

在 Web 中加載網絡圖片有時會失敗，遇到這樣的報錯： Exception caught by image resource service... ，造成該錯誤的原因通常是，圖片跨域了（見 跨域資源共享 ）。最簡單的解決辦法是， 使用 HTML 渲染加載 ，而不是默認的 CanvasKit。

Flutter 中所有的 list 默認都是沒有 ScrollBar 的，必須使用 ScrollBar 組件。ScrollBar 組件通過監(jiān)聽 ScrollView 的 ScrollNotification 來刷新位置，所以 List 的長度必須是固定的。

當使用 WebView 等高度不定的組件時會出現內容被截斷的情況，通?？梢允褂?NestedScrollView 來解決該問題，需要在 WebView 外部嵌套 SingleChildScrollView。

雖然使用了緩存，而且也是用 builder 加載圖片的，但是發(fā)現一個現象：滑動屏幕后圖片短暫消失并重新加載了。圖片高度很高時這種現象更加明顯，其原因是超出屏幕范圍一定距離的組件被重新渲染了。解決方法是在 ListView 上設置 cacheExtent 參數:

該參數的作用是改變超出屏幕高度后繼續(xù)渲染的范圍（以像素為單位），比如設置成 9999 后意味著超出屏幕 10000 像素以內的內容都會被保留下來。

借助 IntrinsicHeight 組件：

另外，IntrinsicHeight 還可以用于 Dialog 或者 BottomSheet 中，使得其中的元素 顯示內在元素的高度 ，從而避免元素因為約束的存在而不顯示或者高度太高（比如在使用了 Column 或者 Row 的時候）。

在通過 Uri 的 queryParameters 獲取 query 參數時，發(fā)現有些鏈接會拋出下面異常：

造成該異常的原因是 Uri 默認使用 utf-8 解碼超鏈接字符串，如果鏈接中包含非 utf-8 字符，就會造成上面的錯誤，相關 issue 見： issue #31621 。目前該 issue 處于 open 的狀態(tài)，暫時的解決辦法是，在所有使用到 queryParameter 的地方用 try..catch 捕捉可能拋出的異常。

Flutter 開發(fā)非常依賴各種官方或第三方的插件，而在使用這些插件時多少都會遇到一些問題，大部分問題都可以通過搜索和查找 issue 來解決。這里記錄下一些我在使用部分插件時遇到的問題及其解決方法。

目前該庫沒有圖片加載完成的回調（見 issue #545 ），不過我們可以通過在 imageBuilder 中來添加回調：

這是一個應用內更新插件，安卓 10 以上安裝時需要在 manifest 中添加以下內容：

目前功能最強大的 WebView 插件，基本能滿足絕大部分移動端網頁加載的需求，而且可定制化程度高。

一般通過 CookieManager 修改 Cookie，攔截請求并修改請求對象的 Header 不會生效。

InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平臺設置 InAppWebViewOptions ，而且需要注意，由于設置 userAgent 后會覆蓋默認的 UserAgent，所以如果需要在默認的 UserAgent 上添加其它參數，iOS 上需要通過 InAppWebViewController.getDefaultUserAgent() 獲取默認 UserAgent 參數，而 Android 不需要添加。

如果圖片源或者請求是 http 的，為了在 Android 上正常加載請求，必須在 AndroidInAppWebViewOptions 中將 mixedContentMode 設置為 AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW 。

當我們想要設置全屏圖片的時候，由于默認的 Constraint 會將圖片居中顯示，所以圖片四周會留有空隙。為了去除這個限制，我們需要 Xcode 中打開 LaunchScreen.storyboard，然后在 View Controller 的 View 和 LaunchImage 上的 Safe Area 去掉。

具體設置方法：右側 Inspector 面板 Show the Size inspector 解選 Layout Margins 中的 Safe Area Relative Margins，拖動圖片占滿全屏，然后根據 View Controller Scene 的 Warning，更新 Constraint 就可以了。

在集成某些三方庫之后，在使用命令行運行 iOS 模擬器的時候可能會遇到下面這個報錯：

這是因為 iOS 模擬器未來將會兼容 arm64 架構，但是目前還不支持，所以我們需要修改 Build Setting 使得能夠在 x86_64 的模擬器上運行，操作步驟見 這里 。

Flutter:快速創(chuàng)建簡單閃屏頁

近來閑暇時間一直在做Flutter,閃屏頁是一個比較常見的需求,網上的閃屏頁教程大部分是那種類似于廣告頁,而非iOS中的 LaunchScreen 性質的閃屏頁.按照原來的方案我們要配置閃屏頁的話,我們需要同時配置兩端的閃屏頁,那么有沒有比較簡單的方案來配置閃屏頁呢? 毋庸置疑,當然是有了,那就是Flutter的插件 - flutter_native_splash . 接下來我們就來看一下具體應該怎么使用這個插件.

首先把 flutter_native_splash 導入到工程的 pubspec.yaml 中.這里需要注意的是需要放在 dev_dependencies 下,而不是 dependencies .具體如下所示.

接下來我們就來配置 flutter_native_splash ,在配置之前我們看一下 flutter_native_splash 的可配置項.

例如,我現在只有一個logo圖片,那么我想生成iOS和android兩端的閃屏頁,這時候我只需在 pubspec.yaml 如下設置即可.

當然了,如果你有其他配置可以自行進行添加.

配置完成了,我們該如何生成呢?這時候需要我們打開終端 cd 到我們的工程目錄下.如果是Android Studio 或者 VSCode 默認就是在當前工程目錄下.

然后我們需要執(zhí)行下面的三個命令來生成閃屏頁

每一次都敲三個命令實屬麻煩,我們把上訴的三個命令整合成一個命令,如下所示.

那么,我們不想使用該插件生成的閃屏頁該怎么辦呢?我們只需要執(zhí)行下面命令即可.

注:每一次更換圖片都是需要重新執(zhí)行命令重新生成.

OK,上面就是關于 flutter_native_splash 的使用全部內容,其實比較簡單,如果需要定制化的,建議還是各自平臺配置各自的閃屏頁.如果有任何問題歡迎在評論區(qū)批評指導,感謝大家了.

文章名稱：flutter定制,flutter 京東
本文網址：http://jinyejixie.com/article28/dssicjp.html

成都網站建設公司_創(chuàng)新互聯，為您提供外貿建站、服務器托管、面包屑導航、微信小程序、域名注冊、手機網站建設

廣告

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