Flutter實現(xiàn)堆疊式卡輪播效果

在本博客中，我們將探討Flutter中的堆疊式卡輪播。 我們還將實現(xiàn)一個演示程序，并學習在您的flutter應用程序中使用 stacked_card_carousel 包創(chuàng)建一個帶有垂直輪播的堆疊卡。

創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站建設、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的小店網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

用于創(chuàng)建帶有堆疊卡片的垂直輪播的小部件。 下面的演示視頻顯示了如何在Flutter中創(chuàng)建帶有垂直旋轉木馬的堆疊卡。 它顯示了在您的flutter應用程序中如何使用stacked_card_carousel軟件包來使用堆疊式卡輪播。 它顯示了垂直圓盤傳送帶滑動卡的列表，所有卡向上滑動并堆疊，稱為堆疊式卡傳送帶。 它會顯示在您的設備上。

堆疊式卡輪播的一些屬性是：

在lib文件夾中創(chuàng)建一個名為style_card.dart的新dart文件。

首先，我們創(chuàng)建StyleCard類，將在后續(xù)的DEMO中調用它

我們將制作一個 card 控件. 在card控件中, 我們加入一個elevation 屬性和一個column控件。 在column中, 我們加入一個container用于包含image, title 和 description. 然后在stacked_card_demo頁面中使用它。

在lib文件夾中創(chuàng)建一個新的名為stacked_card_demo.dart的dart文件。

現(xiàn)在，我們將創(chuàng)建一個styleCards列表，并在其中添加一個StyleCard類。

我們創(chuàng)建了八個卡片控件，并在其中添加了image，title和description。 程序運行后，我們將看到一個卡片列表， 當用戶向上滑動時，所有卡片都將堆疊在一起； 當用戶向下滑動時，卡片都將回到原始位置；

效果如下：

Demo地址：

flutter為什么不推薦getx

使用這個版本的GetX寫了Demo之后，發(fā)現(xiàn)有幾個問題：

感覺不太像是穩(wěn)定版本，存在一些比較明顯的問題；而且2.0.6到2.0.7只是一個小版本，全局狀態(tài)管理邏輯似乎就有比較大的改動。

不支持響應式編程，這個版本的狀態(tài)管理還是基于state的邏輯；因為想要比較高效的解耦頁面和邏輯，可能需要搭配響應式編程框架。

相關功能可能比較少，沒有最新版本的功能那么全面。

Flutter是Google開源的構建用戶界面（UI）工具包，幫助開發(fā)者通過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面和嵌入式平臺。

Flutter 開源、免費，擁有寬松的開源協(xié)議，適合商業(yè)項目。Flutter已推出穩(wěn)定的2.0版本。

產生背景：

Flutter可以方便的加入現(xiàn)有的工程中。在全世界，F(xiàn)lutter 正在被越來越多的開發(fā)者和組織使用，并且 Flutter是完全免費、開源的。它也是構建未來的 Google Fuchsia 應用的主要方式。

Flutter組件采用現(xiàn)代響應式框架構建，這是從React中獲得的靈感，中心思想是用組件(widget)構建你的UI。

組件描述了在給定其當前配置和狀態(tài)時他們顯示的樣子。當組件狀態(tài)改變，組件會重構它的描述(description)，F(xiàn)lutter 會對比之前的描述， 以確定底層渲染樹從當前狀態(tài)轉換到下一個狀態(tài)所需要的最小更改。

Flutter Dio源碼分析(四)--封裝

Flutter Dio源碼分析(一)--Dio介紹

Flutter Dio源碼分析(二)--HttpClient、Http、Dio對比

Flutter Dio源碼分析(三)--深度剖析

Flutter Dio源碼分析(四)--封裝

Flutter Dio源碼分析(一)--Dio介紹視頻教程

Flutter Dio源碼分析(二)--HttpClient、Http、Dio對比視頻教程

Flutter Dio源碼分析(三)--深度剖析視頻教程

Flutter Dio源碼分析(四)--封裝視頻教程

github倉庫地址

本文會手把手教你該怎么去封裝一個類庫，平時在我們的工作中都是拿著別人的造好的輪子在使用，這篇文章將帶你怎么去自己造輪子，以后再碰到別的類庫需要對其進行封裝的時候提供一個的思路和方法。

在前面的文章中，我們對 Dio 的基本使用、請求庫對比、源碼分析，我們知道 Dio 的使用非常的簡單，那為什么還需要進行封裝呢？有兩點如下：

當組件庫方法發(fā)生重要改變需要遷移的時候如果有多處地方用到，那么需要對使用到的每個文件都進行修改，非常的繁瑣而且很容易出問題。

當不需要 Dio 庫的時候，我們可以隨時方便切換到別的網(wǎng)絡請求庫，當然 Dio 目前內置支持使用第三方庫的適配器。

因為一個應用程序基本都是統(tǒng)一的配置方式，所以我們可以針對 攔截器 、 轉換器 、 緩存 、 統(tǒng)一處理錯誤 、 代理配置 、 證書校驗 等多個配置進行統(tǒng)一管理。

因為我們的應用程序在每個頁面中都會用到網(wǎng)絡請求，那么如果我們每次請求的時候都去實例化一個 Dio ，無非是增加了系統(tǒng)不必要的開銷，而使用單例模式對象一旦創(chuàng)建每次訪問都是同一個對象，不需要再次實例化該類的對象。

這是通過靜態(tài)變量的私有構造器來創(chuàng)建的單例模式

我們對 超時時間 、 響應時間 、 BaseUrl 進行統(tǒng)一設置

因為不管是 get() 還是 post() 請求， Dio 內部最終都會調用 request 方法，只是傳入的 method 不一樣，所以我們這里定義一個枚舉類型在一個方法中進行處理

我們已經把 Restful API 風格簡化成了一個方法，通過 DioMethod 來標明不同的請求方式。在我們平時開發(fā)的過程中，需要在請求前、響應前、錯誤時對某一些接口做特殊的處理，那我們就需要用到攔截器。 Dio 為我們提供了自定義攔截器功能，很容易輕松的實現(xiàn)對請求、響應、錯誤時進行攔截

我們發(fā)現(xiàn)雖然 Dio 框架已經封裝了一個 DioError 類庫，但如果需要對返回的錯誤進行統(tǒng)一彈窗處理或者路由跳轉等就只能自定義了

在我們發(fā)送請求的時候會碰到幾種情況，比如需要對非open開頭的接口自動加上一些特定的參數(shù)，獲取需要在請求頭增加統(tǒng)一的 token

在我們請求接口前可以對響應數(shù)據(jù)進行一些基礎的處理，比如對響應的結果進行自定義封裝，還可以針對單獨的 url 做特殊處理等。

我們看了轉換器的介紹，發(fā)現(xiàn)和攔截器的功能差不多，那為什么還要存在轉換器，有兩點：

執(zhí)行流程： 請求攔截器 請求轉換器 發(fā)起請求 響應轉換器 響應攔截器 最終結果 。

只會被用于 'PUT'、 'POST'、 'PATCH'方法，因為只有這些方法才可以攜帶請求體(request body)

會被用于所有請求方法的返回數(shù)據(jù)。

在開發(fā)過程中，客戶端和服務器打交道的時候，往往會用一個 token 來做校驗，因為每個公司處理刷新token的邏輯都不一樣，我這里舉一個簡單的例子

為什么我們需要有取消請求的功能，如果當我們的頁面在發(fā)送請求時，用戶主動退出當前界面或者app應用程序退出的時候數(shù)據(jù)還沒有響應，那我們就需要取消該網(wǎng)絡請求，防止不必要的錯誤。

由 服務器生成 的 一小段文本信息 ，發(fā)送給瀏覽器，瀏覽器把 cookie 以kv形式保存到本地 某個目錄下的文本文件內，下一次請求同一網(wǎng)站時會把該 cookie 發(fā)送給服務器。

cookie 的使用需要用到兩個第三方組件 dio_cookie_manager 和 cookie_jar

因為在我們平時的開發(fā)過程中，會碰到一種情況，在進行網(wǎng)絡請求時，我們希望能正常訪問到上次的數(shù)據(jù)，對于用戶的體驗比較好，而不是展示一個空白的頁面，該緩存主要是 《Flutter實戰(zhàn)》網(wǎng)絡接口緩存 提供參考。

我們在程序退出后內存緩存將會消失，所以我們用 shared_preferences 進行磁盤緩存數(shù)據(jù)。

在我們用flutter進行抓包的時候需要配置 Dio 代理。由 DefaultHttpClientAdapter 提供了一個 onHttpClientCreate 回調來設置底層 HttpClient 的代理。

用于驗證正在訪問的網(wǎng)站是否真實。提供安全性，因為證書和域名綁定，并且由根證書機構簽名確認。

日志打印主要是幫助我們開發(fā)時進行輔助排錯

Flutter 開發(fā)筆記

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

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

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

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

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

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

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

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

當使用 WebView 等高度不定的組件時會出現(xiàn)內容被截斷的情況，通常可以使用 NestedScrollView 來解決該問題，需要在 WebView 外部嵌套 SingleChildScrollView。

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

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

借助 IntrinsicHeight 組件：

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

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

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

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

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

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

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

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

InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平臺設置 InAppWebViewOptions ，而且需要注意，由于設置 userAgent 后會覆蓋默認的 UserAgent，所以如果需要在默認的 UserAgent 上添加其它參數(shù)，iOS 上需要通過 InAppWebViewController.getDefaultUserAgent() 獲取默認 UserAgent 參數(shù)，而 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，拖動圖片占滿全屏，然后根據(jù) View Controller Scene 的 Warning，更新 Constraint 就可以了。

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

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

Flutter中文書籍推薦

我寫了一本 《Flutter實戰(zhàn)》 推薦給大家。

在線閱讀地址：

更多內容請移步 《Flutter實戰(zhàn)》 。

Flutter（六）Android與Flutter混合開發(fā)（Hybird）

如果我們目前的項目是Android的，但是接下來我們希望部分頁面可以使用Flutter進行開發(fā)，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實現(xiàn)呢？

假設你現(xiàn)在Android項目的目錄的結構是這樣的

這時候如果你想創(chuàng)建一個Flutter模塊，使得Android模塊和Flutter模塊之間可以進行交互，我們可以通過Android Studio新建一個Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為

也就是說，最終你的項目結構會是這樣的

接下來在Android Module的 build.gradle 文件中添加flutter依賴

先創(chuàng)建一個Flutter頁面

這里比較重要的是 window.defaultRouteName 這個字段，這個字段可以接收從Native傳遞過來的參數(shù) （下文我們會介紹原生傳遞參數(shù)的方法），也就是說通過這個字段我們就可以進行Flutter頁面的路由的分發(fā)

我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數(shù)就對應Flutter層的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注冊 FlutterActivity

自己創(chuàng)建一個 FlutterAppActivity 繼承自 FlutterActivity

在 MainActivity 中啟動 FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity ）

兩種啟動方式的區(qū)別

如果單純只是想打開一個Flutter頁面，兩種方式實際上基本沒有太大區(qū)別，第一種方式也許還會更簡單一點。但是，在Flutter開發(fā)中，我們往往還需要開發(fā)一些Native插件供Flutter調用，如果使用復寫 FlutterActivity 的方式更有利于我們在 FlutterActivity 中注冊我們的Native插件，所以實際開發(fā)中一般推薦使用第二種方式

擴展思考

initialRoute 從名稱上看起來是Flutter提供給我們進行Native與Flutter交互的路由跳轉的，但是實際上他就是一個字符串，我們不僅僅可以傳遞一個路由名稱，有時候我們也可以通過這個參數(shù)傳遞一串JSON數(shù)據(jù)，然后在Flutter端進行解析，這樣我們就可以通過這個參數(shù)做更多的事情

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中

運行結果

上半部分是原生的TextView，下半部分是Flutter的Text組件

本節(jié)主要介紹了Native和Flutter之間的頁面跳轉，以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進行數(shù)據(jù)交互

分享標題：flutter輪子推薦,flutter入門經典
文章起源：http://www.chinadenli.net/article4/dseddie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站營銷、App開發(fā)、關鍵詞優(yōu)化、移動網(wǎng)站建設、自適應網(wǎng)站

廣告

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