相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設(shè)計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應(yīng)該如何去布局，我覺得不現(xiàn)實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。
目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計、長豐網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
根據(jù)設(shè)計圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因為涉及到疊加，因此考慮用Stack；
系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴(kuò)展；載放logo圖標(biāo)在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。
登錄內(nèi)容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。
第一行為Image，
第二行為Text，
第三行可以看成一個小Column，分兩塊進(jìn)行布局
第四行可以看成一個小Column，分兩塊進(jìn)行布局
第五行可以看作一個TextButton，
第六行可以看作一個Row，分三塊進(jìn)行布局
通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現(xiàn)的話，就是復(fù)雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺得可以封裝出來的部分，則進(jìn)行下一步。
每一行的拆解，大致也是按照這個思路來進(jìn)行，因此筆者在這里就不做講解了。
在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設(shè)計到一些交互邏輯，筆者就想對第三第四行的這種展示進(jìn)行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現(xiàn)這種輸入操作，具體的實現(xiàn)筆者不再詳細(xì)的描述了。
經(jīng)過這一步，整體的規(guī)劃設(shè)計圖已經(jīng)有了，各個組件也都有了，接下來的工作就是組裝了。
具體布局設(shè)計到一些細(xì)節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。
像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。
對文字顏色大小等，可以用TextStyle直接設(shè)置。
對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。
flutter布局需要先了解flutter所有布局的widget，首先flutter布局分為Container、RenderObjectWidget和ParentDataWidget。而RenderObject中經(jīng)常使用的有SingleChildRenderObjectWidget（單節(jié)點）和MultiChildRenderObjectWidget（多節(jié)點）。
flutter中基礎(chǔ)的widget，可以為子節(jié)點設(shè)置內(nèi)間距。當(dāng)padding沒有child的時候，它會產(chǎn)生一個寬為left+right，高為top+bottom的區(qū)域，當(dāng)padding的child不為空的時候會將約束傳遞給child。一般在使用間距的地方使用。
設(shè)置child的對齊方式，并根據(jù)child的尺寸調(diào)整自身的尺寸。
設(shè)置透明度
用于矩形圓角裁剪組件
用于圓形裁剪，但是可以添加陰影和Z軸
給組件繪制區(qū)域大小
百分比布局，可以通過widthFactor或者h(yuǎn)eightFactor設(shè)置寬高占比
子組件疊加布局,也稱絕對布局
mainAxisAlignment： start：頂頭 center：居中 end：接尾 spaceAround：中間的孩子均分,兩頭的孩子空一半 spaceBetween：頂頭接尾其他均分 spaceEvenly：均勻分布
crossAxisAlignment： start：頂頭 center：居中 end：接尾 stretch：伸展
mainAxisSize： max：父容器沒有約束的話，column自身會盡可能延伸 min：不會延伸，只會包裹自己
屬性和column屬性一致，只是方向不同，一個豎直方向一個水平方向。使用方法也類似。
Wrap可以實現(xiàn)流布局,單行的Wrap跟Row一樣,單列的Wrap則跟Colum一樣.但是Row和Column都是單行單列的,Wrap可以多行多列。
Wrap能做的事情，flow也能做。但是flow會比較復(fù)雜點。flow類似于OC中CollectionLayout，需要自己實現(xiàn)子組件的位置以及大小。但是flow的性能比較好，靈活。
自定義FlowDelegate
運行結(jié)果：
絕對定位布局,用于指定組件的具體位置
Expanded組件可以使row、column或者flex子組件在其主軸上展開并填充可用空間。如果多個組件展開的話，會按照比例分割。
Tip：Expanded組件要在row、column或者flex的子組件中使用。具有兩個屬性，child：子組件，flex：所占比例
相信在方法當(dāng)中，我們都會遇到讓組件有拖拽效果的需求。在 Flutter 當(dāng)中怎么實現(xiàn)拖拽需求呢？這篇博客分享關(guān)于 拖拽手勢 的知識，希望對看文章的小伙伴有所啟發(fā)。
拖拽手勢 是指用戶在長按屏幕的時候，移動手指的手勢。會細(xì)分成：
我們可以理解成用戶在觸碰到屏幕的那一刻處于 按下 ，之后有可能觸發(fā) 移動 手勢，最后 抬起 離開屏幕，這就是完整的手勢。
在 GestureDetector 當(dāng)中，拖拽手勢分為2種：
那天,產(chǎn)品經(jīng)理說“我在微信朋友圈里點了別人分享出來的歌曲鏈接 聽了會歌 那歌簡直了 好聽 退到聊天界面 出現(xiàn)了個懸浮的歌曲圖標(biāo) 那我們能不能做類似的 在所有頁面都會存在這樣一個懸浮圖標(biāo) 這個圖標(biāo)目前要有打客服電話功能”。
我一心想，這人真會搞事 哈哈。行 滿足他
事實上有一個Overlay的widget,它的createState方法獲取的就是OverlayState對象.
Overlay可以認(rèn)為是一個UI上面的蒙版/浮空層,使用起來類似Stack;
Flutter 仿抖音效果 (一) 全屏點愛星
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 視頻播放列表] ( )
項目地址: 持續(xù)效果更新
1.基本的布局是簡單的,外層通過Stack作為根
2.左邊點贊的控件組通過Align進(jìn)行統(tǒng)一布局
3.頂部控件組通過Positioned進(jìn)行布局,設(shè)置頂部距離,其實也可以用align,我們多使用幾種來習(xí)慣flutter的布局
4.底部同樣使用Positioned,設(shè)置底部距離
5.子頁面的左右滑動使用PageView,一開始我們要從推薦開始左滑到關(guān)注,可以使用reverse屬性,不需要更多額外的操作
1.pageController監(jiān)聽
刷新頂部的下劃線時,我們一樣使用StreamController刷新,這樣效率比setstate高很多
2.歌曲名走馬燈效果
這個效果看起來挺麻煩的其實實現(xiàn)起來超級的簡單用最普通的ListView就能快速的實現(xiàn)
首頁listview里面套入的是最簡單的container+text
listview添加一個ScrollController做為滑動的控制
使用一個定時器,把listview滑到最大的位置之后,在滑回去
先通過scroController.position.maxScrollExtent獲取最大位置,
然后通過scroController.animateTo進(jìn)行滑動,因為我設(shè)置一次循環(huán)的時間是3000毫秒,所以滑過去和滑回來的時間各占一般 new Duration(milliseconds: (time * 0.5).toInt()),還有就是歌名沒有大于最大寬度時候其實我們不需要進(jìn)行滑動,所以判斷maxScrollExtent是否大于0來確定是否進(jìn)行滑動動畫
重慶分公司
重慶分公司
