我是初學(xué)者小白，所以很多看法不深，理解也不夠透徹。但是很適合小白們一起從低角度往高處探索。文中有錯(cuò)誤的，感謝指正，一起進(jìn)步。
業(yè)務(wù)包括：企業(yè)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作設(shè)計(jì)、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、網(wǎng)站營(yíng)銷推廣等服務(wù)，并且涵蓋域名注冊(cè)、虛擬主機(jī)、云服務(wù)器、等互聯(lián)網(wǎng)基礎(chǔ)服務(wù)；創(chuàng)新互聯(lián)聯(lián)建站以互聯(lián)網(wǎng)的創(chuàng)新理念，成熟完善的建站體系，開(kāi)拓進(jìn)取的精神，專業(yè)的解決方案和顧問(wèn)咨詢服務(wù)，幫助客戶在互聯(lián)網(wǎng)時(shí)代提升形象、把握商機(jī)、實(shí)現(xiàn)價(jià)值，提高企業(yè)的核心競(jìng)爭(zhēng)力。
趁著假期做一個(gè)Flutter的地圖功能，因?yàn)楹蠖诉x用了百度地圖，所以前端沒(méi)得挑。找了遍插件，并沒(méi)有現(xiàn)成可用的。（不過(guò)發(fā)現(xiàn)了百度官方也自開(kāi)發(fā)Flutter插件，目前功能只有一個(gè)獲取本地位置信息，后期會(huì)繼續(xù)增加吧？很期待?。?/p>
參考帖子：
這個(gè)實(shí)際上跟功能之間沒(méi)太大關(guān)系，只是我按照個(gè)人摸索的過(guò)程來(lái)寫(xiě)。
當(dāng)對(duì)一個(gè)“領(lǐng)域/知識(shí)塊”完全不懂的時(shí)候，360°的方向都不確定的話。先了解基礎(chǔ)概念，有利于你確定自己的摸索方向。
參考帖子：
中間我跳過(guò)了幾十，上百個(gè)帖子的摸索過(guò)程。這個(gè)才是關(guān)鍵能夠真正做事的參考。
因?yàn)榘俣鹊膕dk還算是很完善的，所以一旦出問(wèn)題，都會(huì)有對(duì)應(yīng)的報(bào)錯(cuò)提示。
我是使用flutter插件：permission_handler，來(lái)解決安卓的動(dòng)態(tài)授權(quán)問(wèn)題，用法簡(jiǎn)單而且設(shè)計(jì)合理。
這個(gè)錯(cuò)誤直接來(lái)看，就是簽名有問(wèn)題。怎么查看SHA1碼和包名，這里不多說(shuō)，網(wǎng)上有極其多的方法，百度Sdk開(kāi)發(fā)指南里也有。沒(méi)那么復(fù)雜，也沒(méi)那么麻煩。按照流程操作就是對(duì)的。
實(shí)在不放心？跟我一樣，flutter打包后，把a(bǔ)pk反過(guò)來(lái)解SHA1碼不就行了？
參考帖子：
紅色框框基本就是帖子講解的那樣。
藍(lán)色框框見(jiàn)下圖：release標(biāo)簽里好像是自己設(shè)置了。所以debug標(biāo)簽里面，箭頭指向的位置，是我多設(shè)置的一個(gè)參數(shù)。
uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map.baidu.com": No address associated with hostname
這一步我是哭笑不得，一開(kāi)始老是和問(wèn)題（2）混淆，導(dǎo)致浪費(fèi)很多時(shí)間。仔細(xì)閱讀后，發(fā)現(xiàn)是不能連接到“api.map.baidu.com”。
我打開(kāi)模擬器的chrome瀏覽器，發(fā)現(xiàn)不能上網(wǎng)。查看手機(jī)的dns是10.0.2.3(默認(rèn)的)，和家里wifi不一樣，所以不能上網(wǎng)也正常，之前居然沒(méi)發(fā)現(xiàn)這個(gè)問(wèn)題！??！
終端執(zhí)行：adb shell? 和? getprop，就可以查看所有的屬性參數(shù)了。（window小伙伴自行百度，這個(gè)沒(méi)多大差別。如果你有多個(gè)設(shè)備，記得自己選好設(shè)備。）
在里面找到這一項(xiàng)，就是你的dns參數(shù)。有些人是net.dns1，我的是net.eth0.dns1。這個(gè)沒(méi)關(guān)系，只是等下指令 稍微改動(dòng) 就行。
修改dns指令：setprop net.eth0.dns1 192.168.2.1
后面的192.168.2.1是我自己的dns，這個(gè)根據(jù)自己的情況來(lái)填寫(xiě)。不懂的百度下怎么查看自己的dns。
雖然提示設(shè)置失敗，但是回到模擬器一看，地圖已經(jīng)顯示出來(lái)了。
嘿嘿，在flutter設(shè)定多大的區(qū)域，地圖就是多大的區(qū)域。用起來(lái)就很方便了。
過(guò)程十分痛苦，因?yàn)閷?duì)flutter不是很熟悉，對(duì)Android原生更是了解很少。所以自己就像突然不能講話，被丟到一個(gè)陌生的環(huán)境，卻要我去找一個(gè)人。所以細(xì)心很重要，一定要看清楚錯(cuò)誤提示，不要錯(cuò)過(guò)每一個(gè)細(xì)節(jié)和可能性。
幸好最后解決了問(wèn)題，開(kāi)心~
其實(shí)如果你仔細(xì)閱讀過(guò)百度官方的文檔，會(huì)發(fā)現(xiàn)里面有關(guān)于 地圖的生命周期管理 。然后在這里面沒(méi)有提及到，這一點(diǎn)雖然沒(méi)提，但不可或缺，小伙伴就自行思考吧。
最后還有一點(diǎn)，其實(shí)我的初衷是想實(shí)現(xiàn)一個(gè)百度地圖的plugin，但是苦于能力有限，對(duì)Android的不熟悉，最后折戟。我不得已另起項(xiàng)目，然后重新實(shí)現(xiàn)地圖sdk接入。經(jīng)過(guò)這次對(duì)于這些有更多更全面的認(rèn)知后，有空會(huì)再次研究flutter 插件的開(kāi)發(fā)，共勉，奧利給?。?！
流式布局（Liquid）的特點(diǎn)（也叫"Fluid") 是頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。柵欄系統(tǒng)（網(wǎng)格系統(tǒng)），用戶標(biāo)簽等。在Flutter中主要有Wrap和Flow兩種Widget實(shí)現(xiàn)。
在介紹Row和Colum時(shí)，如果子widget超出屏幕范圍，則會(huì)報(bào)溢出錯(cuò)誤，在Flutter中通過(guò)Wrap和Flow來(lái)支持流式布局，溢出部分則會(huì)自動(dòng)折行。
上述有很多屬性和Row的相同，其意義其實(shí)也是相同的，這里我就不一一介紹了，主要介紹下不同的屬性：
我們一般很少會(huì)使用Flow，因?yàn)槠溥^(guò)于復(fù)雜，需要自己實(shí)現(xiàn)子widget的位置轉(zhuǎn)換，在很多場(chǎng)景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高(如動(dòng)畫(huà)中)的場(chǎng)景。Flow有如下優(yōu)點(diǎn)：
我們對(duì)六個(gè)色塊進(jìn)行自定義流式布局：
實(shí)現(xiàn)TestFlowDelegate:
可以看到我們主要的任務(wù)就是實(shí)現(xiàn)paintChildren，它的主要任務(wù)是確定每個(gè)子widget位置。由于Flow不能自適應(yīng)子widget的大小，我們通過(guò)在getSize返回一個(gè)固定大小來(lái)指定Flow的大小，實(shí)現(xiàn)起來(lái)還是比較麻煩的。
flutter加載h5很卡的解決方法如下：
一種臨時(shí)解決方案，在切換動(dòng)畫(huà)加載完畢后，再去構(gòu)造 WebView，這樣從用戶角度上看，就不會(huì)有路由切換動(dòng)畫(huà)的卡頓了。class WebViewPage extends StatefulWidget {undefined
final String uri;
WebViewPage({undefined
@required this.uri,
}) : assert(uri != null);
@override
_WebViewPageState createState() = _WebViewPageState();
}
class _WebViewPageState extends State {undefined
WebViewController _controller;
bool _animationCompleted = false;
@override
Widget build(BuildContext context) {undefined
// 主要是下面的代碼
var route = ModalRoute.of(context);
if (route != null !_animationCompleted) {undefined
void handler(status) {undefined
if (status == AnimationStatus.completed) {undefined
route.animation.removeStatusListener(handler);
setState(() {undefined
_animationCompleted = true;
});
}
}
route.animation.addStatusListener(handler);
}
return Scaffold(
title: widget.title,
backgroundColor: Colors.white,
body: _animationCompleted
? WebView(
initialUrl: 'about:blank',
onWebViewCreated: (WebViewController webViewController) {undefined
_controller = webViewController;
_loadHtmlFromAssets();
},
)
: Container(),
);
}
_loadHtmlFromAssets() async {undefined
var uri = Uri.dataFromString(
await rootBundle.loadString(widget.uri),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
).toString();
_controller.loadUrl(uri);
}
}
Fluent是目前國(guó)際上比較流行的商用CFD軟件包，在美國(guó)的市場(chǎng)占有率為60%，凡是和流體、熱傳遞和化學(xué)反應(yīng)等有關(guān)的工業(yè)均可使用。
它具有豐富的物理模型、先進(jìn)的數(shù)值方法和強(qiáng)大的前后處理功能，在航空航天、汽車設(shè)計(jì)、石油天然氣和渦輪機(jī)設(shè)計(jì)等方面都有著廣泛的應(yīng)用。
FLUENT軟件包含基于壓力的分離求解器、基于密度的隱式求解器、基于密度的顯式求解器，多求解器技術(shù)使FLUENT軟件可以用來(lái)模擬從不可壓縮到高超音速范圍內(nèi)的各種復(fù)雜流場(chǎng)。
FLUENT軟件包含非常豐富、經(jīng)過(guò)工程確認(rèn)的物理模型，由于采用了多種求解方法和多重網(wǎng)格加速收斂技術(shù)，因而FLUENT能達(dá)到最佳的收斂速度和求解精度。
靈活的非結(jié)構(gòu)化網(wǎng)格和基于解的自適應(yīng)網(wǎng)格技術(shù)及成熟的物理模型，可以模擬高超音速流場(chǎng)、傳熱與相變、化學(xué)反應(yīng)與燃燒、多相流、旋轉(zhuǎn)機(jī)械、動(dòng)/變形網(wǎng)格、噪聲、材料加工等復(fù)雜機(jī)理的流動(dòng)問(wèn)題。
用于創(chuàng)建二維網(wǎng)格列表。
GridView.count 是在交叉軸上創(chuàng)建固定個(gè)數(shù)的網(wǎng)格，crossAxisCount為必須的屬性，表示交叉軸網(wǎng)格的個(gè)數(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 ，文章會(huì)根據(jù)學(xué)習(xí)進(jìn)度不定時(shí)更新，請(qǐng)多多指教~~
在前端項(xiàng)目開(kāi)發(fā)過(guò)程中，現(xiàn)在很少有人會(huì)使用原生的CSS來(lái)搭建頁(yè)面，總歸都會(huì)引入一些前端UI框架以減少代碼的書(shū)寫(xiě)。一般為了方便自己的使用，很多大公司都有自己的一套UI框架，同時(shí)也會(huì)把其開(kāi)源出來(lái)。下面就是最近經(jīng)常使用并且很流行的一些前端UI框架，總有一款適合你：
Mint UI
Mint UI
Mint UI是餓了么團(tuán)隊(duì)開(kāi)發(fā)的基于Vue .js的移動(dòng)端UI框架，它包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開(kāi)發(fā)需要。
WeUI
WeUI是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。
Cube-ui
Cube-ui
Cube-ui 是滴滴團(tuán)隊(duì)開(kāi)發(fā)的基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)。支持按需引入和后編譯，輕量靈活；擴(kuò)展性強(qiáng)，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開(kāi)發(fā)。
iView UI
iView UI
iView UI是一個(gè)強(qiáng)大的UI庫(kù)，基于vue，有很多實(shí)用的基礎(chǔ)組件比elementui的組件更豐富，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。使用單文件的 Vue 組件化開(kāi)發(fā)模式 基于 npm + webpack + babel 開(kāi)發(fā)，支持 ES2015 高質(zhì)量、功能豐富 友好的 API ，自由靈活地使用空間。
LayUI
LayUI
LayUI是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架，遵循原生 HTML/CSS/JS 的書(shū)寫(xiě)與組織形式，門(mén)檻極低，拿來(lái)即用。其外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢，非常適合界面的快速開(kāi)發(fā)。
ElementUI
ElementUI
Element是餓了么前端開(kāi)源維護(hù)的Vue UI組件庫(kù),組件齊全，基本涵蓋后臺(tái)所需的所有組件，文檔講解詳細(xì)，例子也很豐富。 主要用于開(kāi)發(fā)PC端的頁(yè)面，是一個(gè)質(zhì)量比較高的Vue UI組件庫(kù)。
at-ui
at-ui
at-ui 是一款阿里團(tuán)隊(duì)創(chuàng)建的基于 Vue 2.x 的前端 UI 組件庫(kù)，主要用于快速開(kāi)發(fā) PC 網(wǎng)站產(chǎn)品。 它提供了一套 npm + webpack + babel 前端開(kāi)發(fā)工作流程，CSS 樣式獨(dú)立，即使采用不同的框架實(shí)現(xiàn)都能保持統(tǒng)一的 UI 風(fēng)格。
amaze UI
amaze UI
Amaze UI 是一個(gè)移動(dòng)優(yōu)先的跨屏前端框架。提供基礎(chǔ)樣式，網(wǎng)格，表格、表單、按鈕及常用組件樣式。是一個(gè)輕量級(jí)（所有 CSS 和 JS gzip 后 100 kB 左右）、?Mobile first?的前端框架
Vant UI
Vant UI
Vant UI是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫(kù)，提供了一整套 UI 基礎(chǔ)組件和業(yè)務(wù)組件。通過(guò) Vant，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開(kāi)發(fā)效率。
Flutter
Flutter
Flutter 是谷歌的移動(dòng)端 UI 框架，可在極短的時(shí)間內(nèi)構(gòu)建 Android 和 iOS 上高質(zhì)量的原生級(jí)應(yīng)用。 Flutter 可與現(xiàn)有代碼一起工作, 它被世界各地的開(kāi)發(fā)者和組織使用, 并且 Flutter 是免費(fèi)和開(kāi)源的.
ionic
Ionic既是一個(gè)CSS框架也是一個(gè)Javascript UI庫(kù),Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它 提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。 它使用 JavaScript MVVM 框架和 AngularJS 來(lái)增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開(kāi)發(fā)者的共同選擇。
GridView可以構(gòu)建一個(gè)二維網(wǎng)格列表
默認(rèn)構(gòu)造函數(shù)如下：
我們可以看到，GridView和ListView的大多數(shù)參數(shù)都是相同的，它們的含義也都相同的。我們唯一需要關(guān)注的是gridDelegate參數(shù)，類型是SliverGridDelegate，它的作用是控制GridView子組件如何排列(layout)。
SliverGridDelegate 是一個(gè)抽象類，定義了GridView Layout相關(guān)接口，子類需要通過(guò)實(shí)現(xiàn)它們來(lái)實(shí)現(xiàn)具體的布局算法。Flutter中提供了兩個(gè) SliverGridDelegate 的子類 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent
SliverGridDelegateWithFixedCrossAxisCount
該子類實(shí)現(xiàn)了一個(gè)橫軸為固定數(shù)量子元素的layout算法，其構(gòu)造函數(shù)為：
可以發(fā)現(xiàn)，子元素的大小是通過(guò)crossAxisCount和childAspectRatio兩個(gè)參數(shù)共同決定的。注意，這里的子元素指的是子組件的最大顯示空間，注意確保子組件的實(shí)際大小不要超出子元素的空間。
示例
SliverGridDelegateWithMaxCrossAxisExtent
該子類實(shí)現(xiàn)了一個(gè)橫軸子元素為固定最大長(zhǎng)度的layout算法，其構(gòu)造函數(shù)為
maxCrossAxisExtent為子元素在橫軸上的最大長(zhǎng)度，之所以是“最大”長(zhǎng)度，是因?yàn)闄M軸方向每個(gè)子元素的長(zhǎng)度仍然是等分的，舉個(gè)例子，如果ViewPort的橫軸長(zhǎng)度是450，那么當(dāng)maxCrossAxisExtent的值在區(qū)間[450/4，450/3)內(nèi)的話，子元素最終實(shí)際長(zhǎng)度都為112.5，而childAspectRatio所指的子元素橫軸和主軸的長(zhǎng)度比為最終的長(zhǎng)度比。其它參數(shù)和SliverGridDelegateWithFixedCrossAxisCount相同。
示例
GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount，我們通過(guò)它可以快速的創(chuàng)建橫軸固定數(shù)量子元素的GridView
示例
GridView.extent構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithMaxCrossAxisExtent，我們通過(guò)它可以快速的創(chuàng)建橫軸子元素為固定最大長(zhǎng)度的的GridView
示例
上面我們介紹的GridView都需要一個(gè)widget數(shù)組作為其子元素，這些方式都會(huì)提前將所有子widget都構(gòu)建好，所以只適用于子widget數(shù)量比較少時(shí)，當(dāng)子widget比較多時(shí)，我們可以通過(guò)GridView.builder來(lái)動(dòng)態(tài)創(chuàng)建子widget。GridView.builder 必須指定的參數(shù)有兩個(gè)：
示例
假設(shè)我們需要從一個(gè)異步數(shù)據(jù)源（如網(wǎng)絡(luò)）分批獲取一些Icon，然后用GridView來(lái)展示:
_retrieveIcons()：在此方法中我們通過(guò)Future.delayed來(lái)模擬從異步數(shù)據(jù)源獲取數(shù)據(jù)，每次獲取數(shù)據(jù)需要200毫秒，獲取成功后將新數(shù)據(jù)添加到_icons，然后調(diào)用setState重新構(gòu)建。
在 itemBuilder 中，如果顯示到最后一個(gè)時(shí)，判斷是否需要繼續(xù)獲取數(shù)據(jù)，然后返回一個(gè)Icon。
GridView.builder 源碼定義如下：
它主要要傳兩個(gè)參數(shù) gridDelegate 和 childrenDelegate ，gridDelegate是SliverGridDelegate類型，SliverGridDelegate它有兩個(gè)子類，就是我們上文中說(shuō)的 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent ，childrenDelegate 是SliverChildDelegate類型，SliverChildDelegate也有兩個(gè)子類 SliverChildBuilderDelegate 和 SliverChildListDelegate ,一個(gè)是通過(guò)Builder創(chuàng)建Item，一個(gè)是指定所有item。和ListView 很類似
示例
補(bǔ)充知識(shí)點(diǎn)：
GridView中的Sliver是SliverGrid
ListView 和 GridView 都是繼承于BoxScrollView，BoxScrollView中存在一個(gè)抽象方法buildChildLayout，這個(gè)buildChildLayout方法是在提供Sliver，GridView中關(guān)于buildChildLayout實(shí)現(xiàn)如下：
重慶分公司
重慶分公司
