【百度地圖篇】1.Flutter+百度Sdk實現(xiàn)地圖功能 & 百度地圖顯示網(wǎng)格問題

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

成都創(chuàng)新互聯(lián)專注于扎蘭屯企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。扎蘭屯網(wǎng)站建設(shè)公司,為扎蘭屯等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

參考帖子：

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

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

參考帖子：

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

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

我是使用flutter插件：permission_handler，來解決安卓的動態(tài)授權(quán)問題，用法簡單而且設(shè)計合理。

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

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

參考帖子：

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

藍(lán)色框框見下圖：release標(biāo)簽里好像是自己設(shè)置了。所以debug標(biāo)簽里面，箭頭指向的位置，是我多設(shè)置的一個參數(shù)。

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

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

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

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

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

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

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

雖然提示設(shè)置失敗，但是回到模擬器一看，地圖已經(jīng)顯示出來了。

嘿嘿，在flutter設(shè)定多大的區(qū)域，地圖就是多大的區(qū)域。用起來就很方便了。

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

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

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

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

Flutter了解之可滑動組件

Flutter官方并沒有對Widget進(jìn)行官方分類，對其分類主要是為了對Widget進(jìn)行功能區(qū)分。

當(dāng)組件內(nèi)容超過當(dāng)前顯示窗口時，如果沒有特殊處理，F(xiàn)lutter則會提示Overflow錯誤。為此，F(xiàn)lutter提供了多種可滾動組件用于顯示列表和長布局。

在可滾動組件的坐標(biāo)描述中，通常將滾動方向稱為主軸，非滾動方向稱為縱軸。由于可滾動組件的默認(rèn)方向一般都是沿垂直方向，所以默認(rèn)情況下主軸就是指垂直方向，水平方向同理。

通常可滾動組件的子組件可能會非常多、占用的總高度也會非常大；如果要一次性將子組件全部構(gòu)建出將會非常昂貴！為此，F(xiàn)lutter中提出一個Sliver（中文為“薄片”的意思）概念，如果一個可滾動組件支持Sliver模型，那么該滾動可以將子組件分成好多個“薄片”（Sliver），只有當(dāng)Sliver出現(xiàn)在視口中時才會去構(gòu)建它，這種模型也稱為“基于Sliver的延遲構(gòu)建模型”。

可滾動組件中有很多都支持基于Sliver的延遲構(gòu)建模型，如ListView、GridView，但是也有不支持該模型的，如SingleChildScrollView。

在很多布局系統(tǒng)中都有ViewPort的概念，在Flutter中，術(shù)語ViewPort（視口），如無特別說明，則是指一個Widget的實際顯示區(qū)域。例如: 一個ListView的顯示區(qū)域高度是800像素，雖然其列表項總高度可能遠(yuǎn)遠(yuǎn)超過800像素，但是其ViewPort仍然是800像素。

可滾動組件都直接或間接包含一個Scrollable組件

如果要給可滾動組件添加滾動條，只需將Scrollbar作為可滾動組件的任意一個父級組件。

沿一個方向線性排布所有子組件。支持基于Sliver的延遲構(gòu)建模型。

ListView高度邊界無法確定時會異常。

默認(rèn)構(gòu)造函數(shù)有一個children參數(shù)，它接受一個Widget列表。

實際上通過此方式創(chuàng)建的ListView和使用SingleChildScrollView+Column的方式?jīng)]有本質(zhì)的區(qū)別。

適合只有少量的子組件的情況，因為這種方式需要將所有children都提前創(chuàng)建好（這需要做大量工作），而不是等到子widget真正顯示的時候再創(chuàng)建，也就是說通過默認(rèn)構(gòu)造函數(shù)構(gòu)建的ListView沒有應(yīng)用基于Sliver的懶加載模型。

例

例

例（水平滾動）

適合列表項比較多（或者無限）的情況，因為只有當(dāng)子組件真正顯示的時候才會被創(chuàng)建，也就說通過該構(gòu)造函數(shù)創(chuàng)建的ListView是支持基于Sliver的懶加載模型的。

例

例

例（不同類型的item）

ListView.separated可以在生成的列表項之間添加一個分割組件，它比ListView.builder多了一個separatorBuilder參數(shù)，該參數(shù)是一個分割組件生成器。

例

例

類似于Android中的ScrollView，它只能接收一個子組件。

通常內(nèi)容不會超過屏幕太多時使用SingleChildScrollView，這是因為它不支持基于Sliver的延遲實例化模型，所以如果預(yù)計視口可能包含超出屏幕尺寸太多的內(nèi)容時，那么使用SingleChildScrollView將會非常昂貴（性能差），此時應(yīng)該使用一些支持Sliver延遲加載的可滾動組件，如ListView。

例（將大寫字母A-Z沿垂直方向顯示）

一個二維網(wǎng)格列表

GridView和ListView的大多數(shù)參數(shù)都是相同的。

橫軸為固定數(shù)量子元素。

GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount。

例

例（GridView.count）

該子類實現(xiàn)了一個橫軸子元素為固定最大長度的layout算法

例

當(dāng)子widget比較多時，可以通過GridView.builder來動態(tài)創(chuàng)建子widget。

GridView.builder 必須指定的參數(shù)有兩個，其中itemBuilder為子widget構(gòu)建器。

例

舉個例子，假設(shè)有一個頁面，頂部需要一個GridView，底部需要一個ListView，而要求整個頁面的滑動效果是統(tǒng)一的，即它們看起來是一個整體。如果使用GridView+ListView來實現(xiàn)的話，就不能保證一致的滑動效果，因為它們的滾動效果是分離的。

所以這時就需要一個"膠水"，把這些彼此獨立的可滾動組件"粘"起來，而CustomScrollView的功能就相當(dāng)于“膠水”。

Sliver有細(xì)片、薄片之意，在Flutter中Sliver通常指可滾動組件子元素。在CustomScrollView中，需要粘起來的可滾動組件就是CustomScrollView的Sliver了，如果直接將ListView、GridView作為CustomScrollView是不行的，因為它們本身是可滾動組件而并不是Sliver。

因此，為了能讓可滾動組件能和CustomScrollView配合使用，F(xiàn)lutter提供了一些可滾動組件的Sliver版，如SliverList、SliverGrid等。

實際上Sliver版的可滾動組件和非Sliver版的可滾動組件最大的區(qū)別就是前者不包含滾動模型（自身不能再滾動），而后者包含滾動模型 ，也正因如此，CustomScrollView才可以將多個Sliver"粘"在一起，這些Sliver共用CustomScrollView的Scrollable，所以最終才實現(xiàn)了統(tǒng)一的滑動效果。

例（SliverList）

例（SliverGrid）

可以用ScrollController來控制可滾動組件的滾動位置

例

滾動位置恢復(fù)

ScrollPosition

ScrollController控制原理

滾動監(jiān)聽

例

Flutter快速上手10：高級布局之網(wǎng)格 GridView

用于創(chuàng)建二維網(wǎng)格列表。

GridView.count 是在交叉軸上創(chuàng)建固定個數(shù)的網(wǎng)格，crossAxisCount為必須的屬性，表示交叉軸網(wǎng)格的個數(shù)，而GridView.extent是在交叉軸上創(chuàng)建最大可容納的網(wǎng)格，maxCrossAxisExtent是必須的屬性，表示交叉軸上網(wǎng)格的最大的寬度。

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2

我是小栗子，初學(xué)Flutter ，文章會根據(jù)學(xué)習(xí)進(jìn)度不定時更新，請多多指教~~

flutter中流式布局

流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。柵欄系統(tǒng)（網(wǎng)格系統(tǒng)），用戶標(biāo)簽等。在Flutter中主要有Wrap和Flow兩種Widget實現(xiàn)。

在介紹Row和Colum時，如果子widget超出屏幕范圍，則會報溢出錯誤，在Flutter中通過Wrap和Flow來支持流式布局，溢出部分則會自動折行。

上述有很多屬性和Row的相同，其意義其實也是相同的，這里我就不一一介紹了，主要介紹下不同的屬性：

我們一般很少會使用Flow，因為其過于復(fù)雜，需要自己實現(xiàn)子widget的位置轉(zhuǎn)換，在很多場景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高(如動畫中)的場景。Flow有如下優(yōu)點：

我們對六個色塊進(jìn)行自定義流式布局：

實現(xiàn)TestFlowDelegate:

可以看到我們主要的任務(wù)就是實現(xiàn)paintChildren，它的主要任務(wù)是確定每個子widget位置。由于Flow不能自適應(yīng)子widget的大小，我們通過在getSize返回一個固定大小來指定Flow的大小，實現(xiàn)起來還是比較麻煩的。

Flutter 可滾動組件 之 GridView (十七)

GridView可以構(gòu)建一個二維網(wǎng)格列表

默認(rèn)構(gòu)造函數(shù)如下：

我們可以看到，GridView和ListView的大多數(shù)參數(shù)都是相同的，它們的含義也都相同的。我們唯一需要關(guān)注的是gridDelegate參數(shù)，類型是SliverGridDelegate，它的作用是控制GridView子組件如何排列(layout)。

SliverGridDelegate 是一個抽象類，定義了GridView Layout相關(guān)接口，子類需要通過實現(xiàn)它們來實現(xiàn)具體的布局算法。Flutter中提供了兩個 SliverGridDelegate 的子類 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount

該子類實現(xiàn)了一個橫軸為固定數(shù)量子元素的layout算法，其構(gòu)造函數(shù)為：

可以發(fā)現(xiàn)，子元素的大小是通過crossAxisCount和childAspectRatio兩個參數(shù)共同決定的。注意，這里的子元素指的是子組件的最大顯示空間，注意確保子組件的實際大小不要超出子元素的空間。

示例

SliverGridDelegateWithMaxCrossAxisExtent

該子類實現(xiàn)了一個橫軸子元素為固定最大長度的layout算法，其構(gòu)造函數(shù)為

maxCrossAxisExtent為子元素在橫軸上的最大長度，之所以是“最大”長度，是因為橫軸方向每個子元素的長度仍然是等分的，舉個例子，如果ViewPort的橫軸長度是450，那么當(dāng)maxCrossAxisExtent的值在區(qū)間[450/4，450/3)內(nèi)的話，子元素最終實際長度都為112.5，而childAspectRatio所指的子元素橫軸和主軸的長度比為最終的長度比。其它參數(shù)和SliverGridDelegateWithFixedCrossAxisCount相同。

示例

GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount，我們通過它可以快速的創(chuàng)建橫軸固定數(shù)量子元素的GridView

示例

GridView.extent構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithMaxCrossAxisExtent，我們通過它可以快速的創(chuàng)建橫軸子元素為固定最大長度的的GridView

示例

上面我們介紹的GridView都需要一個widget數(shù)組作為其子元素，這些方式都會提前將所有子widget都構(gòu)建好，所以只適用于子widget數(shù)量比較少時，當(dāng)子widget比較多時，我們可以通過GridView.builder來動態(tài)創(chuàng)建子widget。GridView.builder 必須指定的參數(shù)有兩個：

示例

假設(shè)我們需要從一個異步數(shù)據(jù)源（如網(wǎng)絡(luò)）分批獲取一些Icon，然后用GridView來展示:

_retrieveIcons()：在此方法中我們通過Future.delayed來模擬從異步數(shù)據(jù)源獲取數(shù)據(jù)，每次獲取數(shù)據(jù)需要200毫秒，獲取成功后將新數(shù)據(jù)添加到_icons，然后調(diào)用setState重新構(gòu)建。

在 itemBuilder 中，如果顯示到最后一個時，判斷是否需要繼續(xù)獲取數(shù)據(jù)，然后返回一個Icon。

GridView.builder 源碼定義如下：

它主要要傳兩個參數(shù) gridDelegate 和 childrenDelegate ，gridDelegate是SliverGridDelegate類型，SliverGridDelegate它有兩個子類，就是我們上文中說的 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent ，childrenDelegate 是SliverChildDelegate類型，SliverChildDelegate也有兩個子類 SliverChildBuilderDelegate 和 SliverChildListDelegate ,一個是通過Builder創(chuàng)建Item，一個是指定所有item。和ListView 很類似

示例

補充知識點：

GridView中的Sliver是SliverGrid

ListView 和 GridView 都是繼承于BoxScrollView，BoxScrollView中存在一個抽象方法buildChildLayout，這個buildChildLayout方法是在提供Sliver，GridView中關(guān)于buildChildLayout實現(xiàn)如下：

網(wǎng)站標(biāo)題：flutter網(wǎng)格,flutter css
本文網(wǎng)址：http://chinadenli.net/article0/dsgpiio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、電子商務(wù)、App設(shè)計、定制網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)頁設(shè)計公司

廣告

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