Flutter 中有兩種布局模型：
創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供綿陽主機(jī)托管、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。
基于 RenderBox 的盒模型布局。
基于 Sliver ( RenderSliver ) 按需加載列表布局。
通?？蓾L動(dòng)組件的子組件可能會(huì)非常多、占用的總高度也會(huì)非常大；如果要一次性將子組件全部構(gòu)建出將會(huì)非常昂貴！為此，F(xiàn)lutter中提出一個(gè)Sliver（中文為“薄片”的意思）概念，Sliver 可以包含一個(gè)或多個(gè)子組件。Sliver 的主要作用是配合：加載子組件并確定每一個(gè)子組件的布局和繪制信息，如果 Sliver 可以包含多個(gè)子組件時(shí)，通常會(huì)實(shí)現(xiàn)按需加載模型。
只有當(dāng) Sliver 出現(xiàn)在視口中時(shí)才會(huì)去構(gòu)建它，這種模型也稱為“基于Sliver的列表按需加載模型”?？蓾L動(dòng)組件中有很多都支持基于Sliver的按需加載模型，如 ListView 、 GridView ，但是也有不支持該模型的，如 SingleChildScrollView 。
Flutter 中的可滾動(dòng)主要由三個(gè)角色組成： Scrollable 、 Viewport 和 Sliver ：
具體布局過程：
比如有一個(gè) ListView，大小撐滿屏幕，假設(shè)它有 100 個(gè)列表項(xiàng)（都是RenderBox）且每個(gè)列表項(xiàng)高度相同，結(jié)構(gòu)如圖6-1所示：
圖中白色區(qū)域?yàn)樵O(shè)備屏幕，也是 Scrollable 、 Viewport 和 Sliver 所占用的空間，三者所占用的空間重合，父子關(guān)系為：Sliver 父組件為 Viewport，Viewport的 父組件為 Scrollable 。注意ListView 中只有一個(gè) Sliver，在 Sliver 中實(shí)現(xiàn)了子組件的按需加載。
其中頂部和底部灰色的區(qū)域?yàn)?cacheExtent，它表示預(yù)渲染的高度，需要注意這是在可視區(qū)域之外，如果 RenderBox 進(jìn)入這個(gè)區(qū)域內(nèi)，即使它還未顯示在屏幕上，也是要先進(jìn)行構(gòu)建的，預(yù)渲染是為了后面進(jìn)入 Viewport 的時(shí)候更絲滑。cacheExtent 的默認(rèn)值是 250，在構(gòu)建可滾動(dòng)列表時(shí)我們可以指定這個(gè)值，這個(gè)值最終會(huì)傳給 Viewport。
用于處理滑動(dòng)手勢(shì)，確定滑動(dòng)偏移，滑動(dòng)偏移變化時(shí)構(gòu)建 Viewport，我們看一下其關(guān)鍵的屬性：
在可滾動(dòng)組件的坐標(biāo)描述中，通常將滾動(dòng)方向稱為主軸，非滾動(dòng)方向稱為縱軸。由于可滾動(dòng)組件的默認(rèn)方向一般都是沿垂直方向，所以默認(rèn)情況下主軸就是指垂直方向，水平方向同理。
Viewport 比較簡(jiǎn)單，用于渲染當(dāng)前視口中需要顯示 Sliver。
需要注意的是：
Sliver 主要作用是對(duì)子組件進(jìn)行構(gòu)建和布局，比如 ListView 的 Sliver 需要實(shí)現(xiàn)子組件（列表項(xiàng)）按需加載功能，只有當(dāng)列表項(xiàng)進(jìn)入預(yù)渲染區(qū)域時(shí)才會(huì)去對(duì)它進(jìn)行構(gòu)建和布局、渲染。
Sliver 對(duì)應(yīng)的渲染對(duì)象類型是 RenderSliver，RenderSliver 和 RenderBox 的相同點(diǎn)是都繼承自 RenderObject 類，不同點(diǎn)是在布局的時(shí)候約束信息不同。RenderBox 在布局時(shí)父組件傳遞給它的約束信息對(duì)應(yīng)的是 BoxConstraints ，只包含最大寬高的約束；而 RenderSliver 在布局時(shí)父組件（列表）傳遞給它的約束是對(duì)應(yīng)的是 SliverConstraints 。關(guān)于 Sliver 的布局協(xié)議，我們將在本章最后一節(jié)中介紹。
幾乎所有的可滾動(dòng)組件在構(gòu)造時(shí)都能指定 scrollDirection （滑動(dòng)的主軸）、 reverse （滑動(dòng)方向是否反向）、 controller 、 physics 、 cacheExtent ，這些屬性最終會(huì)透?jìng)鹘o對(duì)應(yīng)的 Scrollable 和 Viewport，這些屬性我們可以認(rèn)為是可滾動(dòng)組件的通用屬性，后續(xù)再介紹具體的可滾動(dòng)組件時(shí)將不再贅述。
可滾動(dòng)組件都有一個(gè) controller 屬性，通過該屬性我們可以指定一個(gè) ScrollController 來控制可滾動(dòng)組件的滾動(dòng)，比如可以通過ScrollController來同步多個(gè)組件的滑動(dòng)聯(lián)動(dòng)。由于 ScrollController 是需要結(jié)合可滾動(dòng)組件一起工作，所以本章中，我們會(huì)在介紹完 ListView 后詳細(xì)介紹 ScrollController。
Scrollbar是一個(gè)Material風(fēng)格的滾動(dòng)指示器（滾動(dòng)條），如果要給可滾動(dòng)組件添加滾動(dòng)條，只需將Scrollbar作為可滾動(dòng)組件的任意一個(gè)父級(jí)組件即可，如：
Scrollbar 和 CupertinoScrollbar 都是通過監(jiān)聽滾動(dòng)通知來確定滾動(dòng)條位置的。關(guān)于的滾動(dòng)通知的詳細(xì)內(nèi)容我們將在本章最后一節(jié)中專門介紹。
CupertinoScrollbar是 iOS 風(fēng)格的滾動(dòng)條，如果你使用的是Scrollbar，那么在iOS平臺(tái)它會(huì)自動(dòng)切換為CupertinoScrollbar
這里實(shí)現(xiàn)flutter第三方地圖導(dǎo)航，選用最簡(jiǎn)單的方式--調(diào)用第三方地圖客戶端；但各種地圖客戶端用的坐標(biāo)系不一定相同，先了解下常見的坐標(biāo)系：
地圖應(yīng)用api坐標(biāo)系：
在 pubspec.yaml 文件中添加依賴插件：
一般android和ios調(diào)起第三方應(yīng)用是通過scheme方式，這里調(diào)起第三方地圖客戶端導(dǎo)航也一樣，如高德地圖，ios scheme為iosamap，android scheme為androidamap; 所以flutter需要引用url_launcher;
未完待續(xù)~~
Flutter官方并沒有對(duì)Widget進(jìn)行官方分類，對(duì)其分類主要是為了對(duì)Widget進(jìn)行功能區(qū)分。
當(dāng)組件內(nèi)容超過當(dāng)前顯示窗口時(shí)，如果沒有特殊處理，F(xiàn)lutter則會(huì)提示Overflow錯(cuò)誤。為此，F(xiàn)lutter提供了多種可滾動(dòng)組件用于顯示列表和長(zhǎng)布局。
在可滾動(dòng)組件的坐標(biāo)描述中，通常將滾動(dòng)方向稱為主軸，非滾動(dòng)方向稱為縱軸。由于可滾動(dòng)組件的默認(rèn)方向一般都是沿垂直方向，所以默認(rèn)情況下主軸就是指垂直方向，水平方向同理。
通常可滾動(dòng)組件的子組件可能會(huì)非常多、占用的總高度也會(huì)非常大；如果要一次性將子組件全部構(gòu)建出將會(huì)非常昂貴！為此，F(xiàn)lutter中提出一個(gè)Sliver（中文為“薄片”的意思）概念，如果一個(gè)可滾動(dòng)組件支持Sliver模型，那么該滾動(dòng)可以將子組件分成好多個(gè)“薄片”（Sliver），只有當(dāng)Sliver出現(xiàn)在視口中時(shí)才會(huì)去構(gòu)建它，這種模型也稱為“基于Sliver的延遲構(gòu)建模型”。
可滾動(dòng)組件中有很多都支持基于Sliver的延遲構(gòu)建模型，如ListView、GridView，但是也有不支持該模型的，如SingleChildScrollView。
在很多布局系統(tǒng)中都有ViewPort的概念，在Flutter中，術(shù)語ViewPort（視口），如無特別說明，則是指一個(gè)Widget的實(shí)際顯示區(qū)域。例如: 一個(gè)ListView的顯示區(qū)域高度是800像素，雖然其列表項(xiàng)總高度可能遠(yuǎn)遠(yuǎn)超過800像素，但是其ViewPort仍然是800像素。
可滾動(dòng)組件都直接或間接包含一個(gè)Scrollable組件
如果要給可滾動(dòng)組件添加滾動(dòng)條，只需將Scrollbar作為可滾動(dòng)組件的任意一個(gè)父級(jí)組件。
沿一個(gè)方向線性排布所有子組件。支持基于Sliver的延遲構(gòu)建模型。
ListView高度邊界無法確定時(shí)會(huì)異常。
默認(rèn)構(gòu)造函數(shù)有一個(gè)children參數(shù)，它接受一個(gè)Widget列表。
實(shí)際上通過此方式創(chuàng)建的ListView和使用SingleChildScrollView+Column的方式?jīng)]有本質(zhì)的區(qū)別。
適合只有少量的子組件的情況，因?yàn)檫@種方式需要將所有children都提前創(chuàng)建好（這需要做大量工作），而不是等到子widget真正顯示的時(shí)候再創(chuàng)建，也就是說通過默認(rèn)構(gòu)造函數(shù)構(gòu)建的ListView沒有應(yīng)用基于Sliver的懶加載模型。
例
例
例（水平滾動(dòng)）
適合列表項(xiàng)比較多（或者無限）的情況，因?yàn)橹挥挟?dāng)子組件真正顯示的時(shí)候才會(huì)被創(chuàng)建，也就說通過該構(gòu)造函數(shù)創(chuàng)建的ListView是支持基于Sliver的懶加載模型的。
例
例
例（不同類型的item）
ListView.separated可以在生成的列表項(xiàng)之間添加一個(gè)分割組件，它比ListView.builder多了一個(gè)separatorBuilder參數(shù)，該參數(shù)是一個(gè)分割組件生成器。
例
例
類似于Android中的ScrollView，它只能接收一個(gè)子組件。
通常內(nèi)容不會(huì)超過屏幕太多時(shí)使用SingleChildScrollView，這是因?yàn)樗恢С只赟liver的延遲實(shí)例化模型，所以如果預(yù)計(jì)視口可能包含超出屏幕尺寸太多的內(nèi)容時(shí)，那么使用SingleChildScrollView將會(huì)非常昂貴（性能差），此時(shí)應(yīng)該使用一些支持Sliver延遲加載的可滾動(dòng)組件，如ListView。
例（將大寫字母A-Z沿垂直方向顯示）
一個(gè)二維網(wǎng)格列表
GridView和ListView的大多數(shù)參數(shù)都是相同的。
橫軸為固定數(shù)量子元素。
GridView.count構(gòu)造函數(shù)內(nèi)部使用了SliverGridDelegateWithFixedCrossAxisCount。
例
例（GridView.count）
該子類實(shí)現(xiàn)了一個(gè)橫軸子元素為固定最大長(zhǎng)度的layout算法
例
當(dāng)子widget比較多時(shí)，可以通過GridView.builder來動(dòng)態(tài)創(chuàng)建子widget。
GridView.builder 必須指定的參數(shù)有兩個(gè)，其中itemBuilder為子widget構(gòu)建器。
例
舉個(gè)例子，假設(shè)有一個(gè)頁面，頂部需要一個(gè)GridView，底部需要一個(gè)ListView，而要求整個(gè)頁面的滑動(dòng)效果是統(tǒng)一的，即它們看起來是一個(gè)整體。如果使用GridView+ListView來實(shí)現(xiàn)的話，就不能保證一致的滑動(dòng)效果，因?yàn)樗鼈兊臐L動(dòng)效果是分離的。
所以這時(shí)就需要一個(gè)"膠水"，把這些彼此獨(dú)立的可滾動(dòng)組件"粘"起來，而CustomScrollView的功能就相當(dāng)于“膠水”。
Sliver有細(xì)片、薄片之意，在Flutter中Sliver通常指可滾動(dòng)組件子元素。在CustomScrollView中，需要粘起來的可滾動(dòng)組件就是CustomScrollView的Sliver了，如果直接將ListView、GridView作為CustomScrollView是不行的，因?yàn)樗鼈儽旧硎强蓾L動(dòng)組件而并不是Sliver。
因此，為了能讓可滾動(dòng)組件能和CustomScrollView配合使用，F(xiàn)lutter提供了一些可滾動(dòng)組件的Sliver版，如SliverList、SliverGrid等。
實(shí)際上Sliver版的可滾動(dòng)組件和非Sliver版的可滾動(dòng)組件最大的區(qū)別就是前者不包含滾動(dòng)模型（自身不能再滾動(dòng)），而后者包含滾動(dòng)模型 ，也正因如此，CustomScrollView才可以將多個(gè)Sliver"粘"在一起，這些Sliver共用CustomScrollView的Scrollable，所以最終才實(shí)現(xiàn)了統(tǒng)一的滑動(dòng)效果。
例（SliverList）
例（SliverGrid）
可以用ScrollController來控制可滾動(dòng)組件的滾動(dòng)位置
例
滾動(dòng)位置恢復(fù)
ScrollPosition
ScrollController控制原理
滾動(dòng)監(jiān)聽
例
附上開發(fā)環(huán)境：
折線圖是一個(gè) Widget，和普通 Widget一樣聲明即可：
LineChart 的構(gòu)造參數(shù)是一個(gè) LineChartData，其屬性如下：
配置了三條線，所以 lineBarsData 對(duì)應(yīng)的數(shù)組有三個(gè)元素。
看下 LineChartBarData 屬性：
圖表四個(gè)方向的邊框，有總顯示開關(guān)，決定是否顯示和隱藏所有，如果開啟，又想隱藏個(gè)別邊框，需要設(shè)置透明色。
FlBorderData 對(duì)應(yīng)邊框信息，有兩個(gè)參數(shù)， show 就是顯示與隱藏的邊框， border 是邊框數(shù)據(jù)。
FlTitlesData 可以配置4條坐標(biāo)軸，也有一個(gè)總開關(guān)，如果要顯示坐標(biāo)軸，就設(shè)為 true ，然后配置對(duì)應(yīng)位置的數(shù)據(jù)：
每個(gè)位置對(duì)應(yīng)的是 SideTitles ，設(shè)置如下：
標(biāo)題是顯示在坐標(biāo)軸后面的文字標(biāo)題，每個(gè)軸對(duì)應(yīng)一個(gè)。
附上源碼
重慶分公司
重慶分公司
