【百度地圖篇】1.Flutter+百度Sdk實現地圖功能 & 百度地圖顯示網格問題

我是初學者小白，所以很多看法不深，理解也不夠透徹。但是很適合小白們一起從低角度往高處探索。文中有錯誤的，感謝指正，一起進步。

成都創新互聯是一家集成都網站建設、做網站、網站頁面設計、網站優化SEO優化為一體的專業網站制作公司，已為成都等多地近百家企業提供網站建設服務。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設計最適合用戶的網站頁面。 合作只是第一步，服務才是根本,我們始終堅持講誠信，負責任的原則，為您進行細心、貼心、認真的服務,與眾多客戶在蓬勃發展的市場環境中,互促共生。

趁著假期做一個Flutter的地圖功能，因為后端選用了百度地圖，所以前端沒得挑。找了遍插件，并沒有現成可用的。（不過發現了百度官方也自開發Flutter插件，目前功能只有一個獲取本地位置信息，后期會繼續增加吧？很期待！）

參考帖子：

這個實際上跟功能之間沒太大關系，只是我按照個人摸索的過程來寫。

當對一個“領域/知識塊”完全不懂的時候，360°的方向都不確定的話。先了解基礎概念，有利于你確定自己的摸索方向。

參考帖子：

中間我跳過了幾十，上百個帖子的摸索過程。這個才是關鍵能夠真正做事的參考。

因為百度的sdk還算是很完善的，所以一旦出問題，都會有對應的報錯提示。

我是使用flutter插件：permission_handler，來解決安卓的動態授權問題，用法簡單而且設計合理。

這個錯誤直接來看，就是簽名有問題。怎么查看SHA1碼和包名，這里不多說，網上有極其多的方法，百度Sdk開發指南里也有。沒那么復雜，也沒那么麻煩。按照流程操作就是對的。

實在不放心？跟我一樣，flutter打包后，把apk反過來解SHA1碼不就行了？

參考帖子：

紅色框框基本就是帖子講解的那樣。

藍色框框見下圖：release標簽里好像是自己設置了。所以debug標簽里面，箭頭指向的位置，是我多設置的一個參數。

uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map.baidu.com": No address associated with hostname

這一步我是哭笑不得，一開始老是和問題（2）混淆，導致浪費很多時間。仔細閱讀后，發現是不能連接到“api.map.baidu.com”。

我打開模擬器的chrome瀏覽器，發現不能上網。查看手機的dns是10.0.2.3(默認的)，和家里wifi不一樣，所以不能上網也正常，之前居然沒發現這個問題！！！

終端執行：adb shell? 和? getprop，就可以查看所有的屬性參數了。（window小伙伴自行百度，這個沒多大差別。如果你有多個設備，記得自己選好設備。）

在里面找到這一項，就是你的dns參數。有些人是net.dns1，我的是net.eth0.dns1。這個沒關系，只是等下指令 稍微改動 就行。

修改dns指令：setprop net.eth0.dns1 192.168.2.1

后面的192.168.2.1是我自己的dns，這個根據自己的情況來填寫。不懂的百度下怎么查看自己的dns。

雖然提示設置失敗，但是回到模擬器一看，地圖已經顯示出來了。

嘿嘿，在flutter設定多大的區域，地圖就是多大的區域。用起來就很方便了。

過程十分痛苦，因為對flutter不是很熟悉，對Android原生更是了解很少。所以自己就像突然不能講話，被丟到一個陌生的環境，卻要我去找一個人。所以細心很重要，一定要看清楚錯誤提示，不要錯過每一個細節和可能性。

幸好最后解決了問題，開心~

其實如果你仔細閱讀過百度官方的文檔，會發現里面有關于 地圖的生命周期管理 。然后在這里面沒有提及到，這一點雖然沒提，但不可或缺，小伙伴就自行思考吧。

最后還有一點，其實我的初衷是想實現一個百度地圖的plugin，但是苦于能力有限，對Android的不熟悉，最后折戟。我不得已另起項目，然后重新實現地圖sdk接入。經過這次對于這些有更多更全面的認知后，有空會再次研究flutter 插件的開發，共勉，奧利給！！！

Flutter dynamic_widget框架支持json code導出功能

dynamic_widget 是一個可以用json來描述flutter widget的動態布局框架，json code和flutter widget code一一對應，如下圖：

dynamic_widget:

Flutter_定義控件StatefulWidgets和StatelessWidget

Stateful（有狀態） 和 stateless（無狀態） widgets

stateless widget 沒有內部狀態. Icon、 IconButton, 和Text 都是無狀態widget, 他們都是 StatelessWidget的子類。

stateful widget 是動態的. 用戶可以和其交互 (例如輸入一個表單、 或者移動一個slider滑塊),或者可以隨時間改變 (也許是數據改變導致的UI更新). Checkbox, Radio, Slider, InkWell, Form, and TextField 都是 stateful widgets, 他們都是 StatefulWidget的子類。

StatefulWidget類

具有可變狀態的小部件。

狀態是（1）在構建窗口小部件時可以同步讀取的信息，以及（2）在窗口小部件的生命周期內可能會更改的信息。這是小工具實施者的責任，以確保國家的及時通知當這種狀態的改變，使用State.setState。

有狀態窗口小部件是一個窗口小部件，它通過構建一個更具體地描述用戶界面的其他窗口小部件來描述用戶界面的一部分。構建過程以遞歸方式繼續，直到用戶界面的描述完全具體（例如，完全由RenderObjectWidget組成，其描述具體的RenderObject）。

當您描述的用戶界面部分可以動態更改時（例如由于具有內部時鐘驅動狀態或依賴于某些系統狀態），狀態窗口小部件非常有用。對于僅依賴于對象本身中的配置信息以及窗口小部件膨脹的 BuildContext的組合，請考慮使用 StatelessWidget。

StatefulWidget實例本身是不可變的，并且將它們的可變狀態存儲在由createState方法創建的單獨State對象中 ，或者存儲在State訂閱的對象中，例如Stream或ChangeNotifier對象，其引用存儲在StatefulWidget的最終字段中本身。

框架在膨脹StatefulWidget時 調用createState，這意味著如果該窗口小部件已插入到多個位置的樹中，則多個State對象可能與同一StatefulWidget關聯。同樣，如果StatefulWidget從樹中移除，后來在樹再次插入時，框架將調用createState再創建一個新的國家目標，簡化的生命周期狀態的對象。

如果StatefulWidget的創建者使用GlobalKey作為其 鍵，則StatefulWidget在從樹中的一個位置移動到另一個位置時保持相同的State對象。由于具有GlobalKey的窗口小部件可以在樹中的至多一個位置使用，因此使用GlobalKey的窗口小部件最多只有一個關聯元素。當通過將與該窗口小部件關聯的（唯一）子樹從舊位置移植到新位置（而不是在該位置重新創建子樹）時，框架利用此屬性將全局鍵從樹中的一個位置移動到另一個位置時利用此屬性。新的位置）。與StatefulWidget關聯的State對象與子樹的其余部分一起被移植，這意味著State對象在新位置被重用（而不是被重新創建）。但是，為了有資格進行嫁接，必須將窗口小部件插入到從舊位置移除它的同一動畫幀中的新位置。

StatefulWidget有兩個主要類別。

首先是其中一個分配資源State.initState并在他們的處置State.dispose，但不依賴于InheritedWidget S或致電State.setState。這些小部件通常在應用程序或頁面的根目錄中使用，并通過ChangeNotifier， Stream或其他此類對象與子小部件進行通信。遵循這種模式的有狀態小部件相對便宜（就CPU和GPU周期而言），因為它們構建一次然后永不更新。因此，它們可能有一些復雜和深刻的構建方法。

第二類是使用State.setState或依賴于 InheritedWidget的小部件。這些通常會在應用程序的生命周期內重建多次，因此最小化重建此類窗口小部件的影響非常重要。（他們也可以使用State.initState或 State.didChangeDependencies并分配資源，但重要的是他們重建。）

可以使用幾種技術來最小化重建有狀態窗口小部件的影響：

StatelessWidget類

一個不需要可變狀態的小部件。

無狀態窗口小部件是一個窗口小部件，它通過構建一個更具體地描述用戶界面的其他窗口小部件來描述用戶界面的一部分。構建過程以遞歸方式繼續，直到用戶界面的描述完全具體（例如，完全由RenderObjectWidget組成，其描述具體的RenderObject）。

當您描述的用戶界面部分不依賴于對象本身的配置信息以及窗口小部件膨脹的BuildContext時，無狀態窗口小部件非常有用。對于可以動態更改的組合，例如由于具有內部時鐘驅動狀態或依賴于某些系統狀態，請考慮使用StatefulWidget。

無狀態窗口小部件的構建方法通常僅在以下三種情況下調用：第一次將窗口小部件插入樹中，窗口小部件的父窗口更改其配置時，以及何時依賴于更改的InheritedWidget。

如果窗口小部件的父級將定期更改窗口小部件的配置，或者它依賴于經常更改的繼承窗口小部件，則優化構建方法的性能以保持流暢的呈現性能非常重要。

可以使用幾種技術來最小化重建無狀態窗口小部件的影響：

Flutter 集成第三方藍牙庫踩坑記錄

最近在寫flutter應用，需要集成藍牙功能，用了一個第三方的庫，踩了一些坑，做一下記錄。

這是庫的地址 PhilipsHue/flutter_reactive_ble: Flutter library that handles BLE operations for multiple devices. (github.com)

安卓主要的坑就是，在使用藍牙功能的時候，需要獲取定位權限，這個需要動態獲取。

集成之后，編譯出錯，提示Swift Compiler Error。

（1）首先嘗試，修改對應三方庫的Swift編譯版本。

我這邊嘗試修改，沒有成功。

（2） 沒辦法，我這邊手動修改三方庫的源碼文件，進行修復。重新編譯成功。

其他問題

Flutter局部刷新方法

Flutter中Widget分為StatefulWidget和StatelessWidget，分別為動態視圖和靜態視圖，視圖的更新需要調用StatefulWidget的setState方法，這會遍歷調用子Widget的build方法。當一個主頁面比較復雜時，會包含多個widget，如果直接調用setState，會遍歷所有子Widget的build，這是非常不必要的性能開銷，有沒有單獨刷新指定Widget的方式呢？這個時候就要用到GlobalKey了。

一個StatefulWidget包含一個Button，一個Text，通過點擊Button調用主Widget的setState方法，刷新Text，示例如下：

同樣一個StatefulWidget包含一個多個Text和Button，點擊Button我們只需要刷新指定的Text，通過GlobalKey的方式，實現如下：

主Widget，包含一個需要更新的TextWidget和一個不需要更新的Text

需要單獨更新的Widget

傳遞事件的Button

這樣點擊Button就只會更新指定的TextWidget了，效果如下：

這只是一個簡單的例子，在實際開發中為了頁面刷新的高效率，模塊化封裝非常重要。很多情況下都只需要局部刷新，而不是重構整個視圖。所以Globalkey的運用在項目中需要熟練掌握

Widget總結

Flutter中Widget，State和BuildContext的概念是每個Flutter開發人員需要完全理解的最重要概念之一。這里先講解一下Widget以及Widget。三者之間的關系會在最后一篇總結一下。

Widget類在Flutter中是非常重要的，繼承自Widget類的有PreferredSizeWidget、ProxyWidget、RenderObjectWidget、StatefulWidget、StatelessWidget。我們日常使用的絕大部分widget都是繼承自Widget類，查看Widget類源碼，內部實現非常簡單，構造函數如下：

在flutter中構建APP是由widget樹構建起來的，所以這個key的作用是用來控制在widget樹中替換widget的時候使用的。其中Key類是Widget、Element以及SemanticsNode的唯一標識符，繼承自Key的還有LocalKey以及GlobalKey。詳細可以去framework.dart文件查看相關源碼及說明。

在Flutter中，我們平時自定義的widget，一般都是繼承自StatefulWidget或StatelessWidget（并不是只有這兩種），這兩種widget也是目前最常用的兩種。如果一個控件自身狀態不會去改變，創建了就直接顯示，不會有色值、大小或者其他屬性的變化，這種widget一般都是繼承自StatelessWidget，常見的有Container、ScrollView等。如果一個控件需要動態的去改變或者相應一些狀態，例如點擊態、色值、內容區域等，那么一般都是繼承自StatefulWidget，常見的有CheckBox、AppBar、TabBar等。兩者的差別在于是否有狀態。

對于StatelessWidget，build方法會在如下三種情況下調用：

我們在創建State的時候可以看到和StatefulWidget相似的build方法，也就是說我們也可以獲得一個BuildContext，在使用StatefulWidget.createState創建它們之前以及在調用initState之前，框架將State對象與BuildContext關聯起來，該關聯是永久的：State對象永遠不會改變它的BuildContext（但是BuildContext本身可以在控件樹中移動）。后面講解一下這個BuildContext對象在整個程序中什么角色

State的作用有兩點：

State的生命周期有四種狀態：

完整生命周期如下：

當控件的配置被更改時會調用State.didUpdateWidget方法，此時框架會重新繪制控件。你也可以使用State.setState方法在狀態發生變化時通知框架，告訴框架該對象的內部狀態已經改變，框架接到通知后也會重新繪制控件。

State中比較重要的一個方法是setState，當修改狀態時，widget會被更新。比方說點擊CheckBox，會出現選中和非選中狀態之間的切換，就是通過修改狀態來達到的。查看setState源碼，在一些異常的情況下將會拋出異常：

markNeedsBuild內部，則是通過標記element為diry，在下一幀的時候重建（rebuild）。可以看出setState并不是立即生效，它只是將widget進行了標記，真正的rebuild操作，則是等到下一幀的時候才會去進行。

StatefulWidget的兩個主要類別：

在我的小部件的生命周期中，我是否需要考慮一個將要更改的變量，何時更改，將強制重建小部件？

如果問題的答案是肯定的，那么您需要一個有狀態的小部件，否則，您需要一個無狀態小部件。

比如：

分享文章：flutter動態壁紙,flutter 桌面
文章位置：http://vcdvsql.cn/article20/dsdehjo.html

成都網站建設公司_創新互聯，為您提供網站維護、網站制作、動態網站、移動網站建設、網站策劃、網站導航

廣告

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